VuePapaParse
A simple wrapper for for the original PapaParse built for VueJs. Supports both Vue 2 & Vue 3.
Table of contents
- VuePapaParse
- Installation
- Default import (Vue 2)
- Default import (Vue 3)
- Usage
- PapaParse Docs
- Example Vue Component
Installation
npm i vue-papa-parse
# or
yarn add vue-papa-parse
Default import (Vue 2)
import Vue from 'vue'
import VuePapaParse from 'vue-papa-parse'
Vue.use(VuePapaParse)
Default import (Vue 3)
import { createApp } from 'vue'
import App from './App.vue'
import VuePapaParse from 'vue-papa-parse'
const app = createApp(App)
app.use(VuePapaParse)
app.mount('#app')
Usage
PARSE STRING
this.$papa.parse(csvString[, config])
read the docs for parsing csv strings
PARSE LOCAL FILES
this.$papa.parse(file, config)
read the docs for parsing local files
PARSE REMOTE FILE
this.$papa.parse(url, {
download: true,
// rest of config ...
})
read the docs for parsing remote files
PARSE Converts CSV to JSON
The Parse Result Object A parse result always contains three objects: data, errors, and meta. Data and errors are arrays, and meta is an object. In the step callback, the data array will only contain one element. See the parse results object docs.
The Parse Config Object The
parse
function may be passed a configuration object. It defines settings, behavior, and callbacks used during parsing. Any properties left unspecified will resort to their default values. See all config options for parse.
UNPARSE
this.$papa.unparse(data[, config])
read the docs for unparsing data
UNPARSE Converts JSON to CSV
Papa's
unparse
utility writes out correct delimited text strings given an array of arrays or an array of objects. See all config options for unparse.
DOWNLOAD
Extended Papa to include a simple download method. This allows you to easily download a .csv
file for JSON that has been converted to CSV.
This method takes two arguments:
csv
usually the the results fromthis.$papa.unparse(data[, config])
)title
The title of the downloaded .csv. note: no need to add the .csv extension.
this.$papa.download(csv, title)
DEDUPE
Extended Papa to include a simple deduplication method. This allows you to simply remove exact duplicate entries from a parsed CSV file.
This method takes one argument:
data
usually the data key from the result object returned fromthis.$papa.parse(mixed[, config])
)
PAPAPARSE DOCS
View all available PapaParse options by visiting the Official Papa docs
EXAMPLE VUE COMPONENT
<template>
<button
@click="unparse"
>
Unparse Sample Data
</button>
</template>
<script>
export default {
data () {
return {
unparsedResults: null,
sampleData: [{
"Column 1": "1-1",
"Column 2": "1-2",
"Column 3": "1-3",
"Column 4": "1-4"
}, {
"Column 1": "2-1",
"Column 2": "2-2",
"Column 3": "2-3",
"Column 4": "2-4"
}, {
"Column 1": "3-1",
"Column 2": "3-2",
"Column 3": "3-3",
"Column 4": "3-4"
}, {
"Column 1": 4,
"Column 2": 5,
"Column 3": 6,
"Column 4": 7
}]
}
},
watch: {
unparsedResults (current) {
if (current) {
console.log(current)
}
}
},
methods: {
unparse () {
this.unparsedResults = this.$papa.unparse(this.sampleData, {
delimiter: ","
})
}
}
}
</script>
/*
Expected output in the console is:
1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7
*/