🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Using the example link here, and my own implementation, it does not download any file while using Chrome on iOS (Safari works fine). I tested using Chrome version 870.0.4280.163 (latest) and iOS 14.4.2. Anyone else have this issue?

I noticed that the data proptery is being called on page load, as well as whenever the underlying data is updated. Is it possible to only call the computed property when actually downloading the file?

Thanks for making this! First issues I encountered...
It's not clear as to what is expected when passing an object or what to return from a callback.

Can this plugin be used by using the script tag directly in page?

Example:

  <script src="/modules/vue/dist/vue.min.js"></script>
  <script src="/modules/vue-json-csv/dist/vue-json-csv.umd.min.js"></script>
  <script type="text/javascript"> Vue.use(downloadCsv)</script>

I am passing an object into the data prop that has the following structure:

Data: [
{
  data1: 'value',
  data2: ''value',
  dataArray: [
    {
      subData1: 'value',
      subData2: 'value',
      subData3: 'value'
    },
    {
      subData1: 'value',
      subData2: 'value',
      subData3: 'value'
    },
    ...
  ]
},
{
  data1: 'value',
  data2: ''value',
  dataArray: [
    {
      subData1: 'value',
      subData2: 'value',
      subData3: 'value'
    },
    {
      subData1: 'value',
      subData2: 'value',
      subData3: 'value'
    },
    ...
  ]
},
...
]

Based on this, the "dataArray" does not get parsed correctly.
In the CSV file, depending how many objects are in that array, it will just display [object Object].

The issue #66 offers a solution, but I do not see how that solution will help.

I have tried to use papa parse options like:

<download-csv
	class   = "btn btn-default"
	:data   = "results"  
       :advancedOptions ="{preview:2}"  
	name    = "planning.csv">

or as:

<download-csv  
	class   = "btn btn-default"  
	:data   = "results"  
       :advancedOptions ="opt"  
	name    = "planning.csv">  
(...)  
data :()=>({  
    opt:{preview:2}  
})

But it does not break after 2 lines. How should i use these advancedOptions?

Hi there

I was wondering if there were any plans to make this compatible with Vue 3?

I installed it and it doesn't work with Vue 3, however, I simply copied over the src file and used it instead of this package which works. Therefore it's probably a small change to convert it to be Vue 3 friendly.

Hello,

I'm using version 1.2.10, and I have a strange behaviour....

When trying to export using separator-excel=true and encoding set to encoding=utf-8, then I have the encoding being set like without BOM.

As a workaround, I've set the delimiter to ";" and removed separator-excel=true.
I think it's probably an Excel problem more than a "vue-json-csv" problem, but I don't know...

So I hope that it will at least help some people having this issue.

Hi again,
thanks for fixing my encoding issue #23 so quickly. I just upgraded from version 1.2.5 to 1.2.8. However I was not able to try it yet as it fails to compile. I get this error message:

Failed to compile.

./node_modules/vue-json-csv/dist/vue-json-csv.common.js
Module parse failed: Unexpected token (17562:8)
You may need an appropriate loader to handle this file type.
|         delimiter: this.delimiter,
|         encoding: this.encoding,
|         ...this.advancedOptions
|       })
|       if (this.separatorExcel) {
 @ ./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/src/shared/startlists/lead/lead_startlist.vue?vue&type=script&lang=js& 48:0-35
 @ ./app/javascript/src/shared/startlists/lead/lead_startlist.vue?vue&type=script&lang=js&
 @ ./app/javascript/src/shared/startlists/lead/lead_startlist.vue
 @ ./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/src/judges/dashboard/index.vue?vue&type=script&lang=js&
 @ ./app/javascript/src/judges/dashboard/index.vue?vue&type=script&lang=js&
 @ ./app/javascript/src/judges/dashboard/index.vue
 @ ./app/javascript/packs/judges/dashboard/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/judges/dashboard/index.js

File ./app/javascript/src/shared/startlists/lead/lead_startlist.vue is of course the file where I use JsonCSV. I did not change anything else, only updated your package, and used not to get this error in 1.2.5.
If you could help me, it would be very appreciated.
Let me know if you need further info.
In the meantime I'm downgrading to 1.2.5 for development purposes.

Thank you in advance.

Thanks

Hi everyone

Download not working.

My code:
HTML

<download-csv
       @click="exportGraph"
       class="btn btn-success"
       :data="wellsExporteds"
       name="Lista de Poços.csv"
     >Exportar Póleo</download-csv>

SCRIPT

<script>
import exportCsv from "../plugins/exportCsv";

methods: {

async exportGraph() {
      let exportWellId = new Array();

      exportWellId.push(this.idwell);

      const exportPoil = axios.create({
        withCredentials: true
      });
      exportPoil
        .post("http://localhost:8000/gerenciamento/ExportarPoleo", {
          well_ids: exportWellId
        })
        .then(response => {
          this.wellsExporteds = response.data;
          console.log(this.wellsExporteds);
        });
    }
}
</script>

NUXT CONFIG
plugins: ["~/plugins/main.js", "~/plugins/exportCsv.js"],

Do you support vue 3?

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE'), What is the cause of this problem?

Firstly thanks for creating this library, but ive just tried to implement it and im getting the following console error:

vue-json-csv.common.js?2347:5361 Uncaught TypeError: Cannot read properties of undefined (reading 'call')

The vue application builds fine.

Our builds were failing with the following error during asset compilation. This happens with 1.2.7 and does not happen in 1.2.5.

ERROR in ./node_modules/vue-json-csv/dist/JsonCSV.js
Module not found: Error: Can't resolve 'vue-runtime-helpers/dist/normalize-component.js' in '/var/lib/jenkins/jobs/project/workspace/node_modules/vue-json-csv/dist'
@ ./node_modules/vue-json-csv/dist/JsonCSV.js 8:40-98
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?

Hi,
First of all, great work! :)

I have some custom console error (vue warn - The computed property "fields" is already defined as a prop).
Plugin imported:
import JsonCSV from "vue-json-csv";

Then I defined component inside my component like this:
downloadCsv: JsonCSV

After that I'm using downloadCsv component in v-for loop inside table td:
<download-csv :data="[row.data]" :name="${row.name}.csv"> <i class="material-icons">cloud_download</i> </download-csv>

row.data is object.
row.name - using template literals

It will be great if you provide some answer. Thanks.

Looks like a console.log made it into the latest release.
https://github.com/Belphemur/vue-json-csv/blob/develop/src/JsonCSV.vue#L115
I don't think this is intentional

hi @Belphemur !
I wonder how to achieve the proper format of my extracted csv to be displayed as a matrix, let's say a 2 by 2 like so :

I cannot let the first cell empty

;;label 1;label 2;
;label 1;1;0;
;label 2;0;1;

Template

<JsonCSV
      :data="json_data"
      :fields="getCSVFields"
      :labels="getCSVLabels"
    >
Download
    </JsonCSV>

Code:

import JsonCSV from "vue-json-csv";

export default {
  components: {
    JsonCSV
  },
  data() {
   json_data: [
            {
                'name': 'Tony Peña',
                'city': 'New York',
                'country': 'United States',
                'birthdate': '1978-03-15',
                'phone': {
                    'mobile': '1-541-754-3010',
                    'landline': '(541) 754-3010'
                }
            },
            {
                'name': 'Thessaloniki',
                'city': 'Athens',
                'country': 'Greece',
                'birthdate': '1987-11-23',
                'phone': {
                    'mobile': '+1 855 275 5071',
                    'landline': '(2741) 2621-244'
                }
            }
        ]
    }
}
  },
  methods: {
    getCSVFields: function(value,key)
    {
//console.log in here gets called fine
      if (key == 'groupColor')
      {
        return false
      }
      return true;
    },
    getCSVLabels: function(value,key)
    {
      console.log('getCSVLabels',value,key)
//this doesn't show in my console
      return key+value;
    }
  }
}

There is not Typescript support for Vue 3

Could not find a declaration file for module 'vue-json-csv'.

i'm trying to install this package using npm , is it available there ?

I just had no place leave a comment so I am using this as the only place. I apologize in advance. I am just pretty impressed with how easily this package integrated with my Vue app. A true plug and play. Big props!

Recently I accidentally upgraded from version 1.2.4 to 1.2.10. I realize this version is not yet on here, but it is on npm. It breaks in IE11 on this:

advancedOptions: { type: Object, default: () => { } }

IE doesn't understand () => { }

I was curious if this is a use case you've used in the past and if there's already a solution for it. My new feature requires an axios call to be fired to grab results from our backend upon click; we would like to export those results to CSV using this library. The issue is that the export is executed immediately upon click, with seemingly no way to force the component to wait for the request to return with the correct data from the back end (apart from sending that request every time the page loads, which isn't ideal). Any thoughts?

i have set endoing='utf-8' ,but when export , the file still does not display the chinese font, any idea?

<download-csv class="text-black" :data="this.jsonData" name="BookInfo.csv" encoding="utf-8"> Export </download-csv>

jsonData: [{ 'name': '你好', 'city': 'New York', 'country': 'United States', 'birthdate': '1978-03-15', 'phone': { 'mobile': '1-541-754-3010', 'landline': '(541) 754-3010' } }, { 'name': 'Thessaloniki', 'city': 'Athens', 'country': 'Greece', 'birthdate': '1987-11-23', 'phone': { 'mobile': '+1 855 275 5071', 'landline': '(2741) 2621-244' } } ],

Hello, thank u for this component. Chinese is not supported.

is possible create a custom header with vue-json-csv ?

Example :

Hello.

Is there any way to use this asyncronously ? My use case is:

• when the user clicks Dowload I neet to first retrieve the data from the server before exporting it.

Thank you.

lodash has had an issue with prototype pollution. vue-json-csv should update its dependencies to not use the affected versions, otherwise users will potentially be exposed to severe vulnerabilities when using the package.

While vue-json-csv is slightly more convenient, I was able to replace vulnerable vue-json-csv completely by using json-2-csv and techniques in this post:

<v-btn prepend-icon="mdi-download" @click="downloadFile"></v-btn>

import * as converter from "json-2-csv";

function downloadFile() {
// downloadableJSON: Record<string, string | number>[]
  const csv = converter.json2csv(downloadableJSON);
  const anchor = document.createElement("a");
  anchor.href = "data:text/csv;charset=utf-8," + encodeURIComponent(csv);
  anchor.target = "_blank";
  anchor.download = "resultsData.csv";
  anchor.click();
}

download-csv
:data = csvData
class= "vs-component vs-button mb-4 vs-button-success vs-button-filled"
:disabled="isDisabled"
>
Download
/download-csv

isDisabled: true

Hello, thank u for this component. But i have a problem with cyrillic symbols. Its look terrible in MS Excel. Like this

44,�>4@O4G8:,,�>=AB0=B8=>20 �235=8

First of all, thanks for this great plugin !
I am struggling to understand how to use 'fields' to access nested properties or to modify the value of the property
Could you please clarify how it is supposed to be used ?
I tried to use it like this but my exported file is empty

labels: {
    'id': 'ID',
    'createdAt': 'Date',
    'product': 'Title',
},
fields: {
  'createdAt':  (value) => {
   this.dateTimeFormat(value);
  },
  'product':  (value) => {
    value.title;
  },
}

hi, I try to follow your example for Vue 3 but I get the following error message:

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of render function
at <JsonCSV data= (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}] name="my_export.csv" >
at

runtime-core.cjs.js:6504 Uncaught TypeError: Cannot read properties of null (reading 'isCE')
at renderSlot (runtime-core.cjs.js:6504:34)
at Proxy.render (JsonCSV.vue?a4ce:13:5)
at renderComponentRoot (runtime-core.esm-bundler.js:893:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5045:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
at setupRenderEffect (runtime-core.esm-bundler.js:5171:9)
at mountComponent (runtime-core.esm-bundler.js:4954:9)
at processComponent (runtime-core.esm-bundler.js:4912:17)
at patch (runtime-core.esm-bundler.js:4504:21)
at mountChildren (runtime-core.esm-bundler.js:4700:13)

App.txt

Because of the spread operator that babel can't polyfill.

Hi, I have a button "Download" which will call an api to fetch data and then export that data to CSV. But I could not find how to do it with this package. it looks like we need to have a json data before clicking download button

Since you upgrade i got some problem with accent and special character for exemple Référent become Référent
I check and it is 'encoding:"utf-8";
Do you have any idea please ?

THanks a lot in advance

Hi, thx for the great library. :)
I'd like to export csv file on Shift_JIS format and implemented as below.

    <download-csv
      :data = "data"
      encoding = "shift_jis"
    >

I also tried the values such as "shiftjis", "shift-jis" and "sjis" but none of them worked.
It just gives me a csv with utf-8.
There may be something wrong with my way of implementation.
If it's the case, would you tell me the way to indicate the encoding format?
I looked through the docs but can't figure it out...
Thx,

Hello,

I'm trying to export an object that has a nested object, but when I do, the values for that column appear as [object Object].

Can you please provide an option to invoke callbacks on success and error of downloading a file?

Hi,
first of all thanks for the great work!

I think I am experiencing some issues with encoding.
I have this data that I pass to JsonCSV:

data = [{
order: 37
lastname: Širůčková
firstname: Tereza
}]

and I expect the downloaded csv to contain:

order,lastname,firstname
37,Širůčková,Tereza

but instead I get this output:

order,lastname,firstname
37,`iro
ková,Tereza

Encoding is set to default (utf8). I tried changing it to utf16 to no avail. Anyway I don't think that's the issue, as I use another tool to generate pdf files with encoding set to utf8 and have no problem. I did not notice similar behaviour with other characters so far. Is it a known issue? Is there a fix for this? If you could point me in the right direction it would be highly appreciated.

Thank you in advance

I utilize vue-json-csv in an enterprise application where I have to support Internet Explorer 11 🤮 . Based on the settings added in v1.2.12, Internet Explorer 11 can no longer utilize the package.

I'm just guessing here, but I believe it's because of the browserslist entry in package.json. In my Vue app, I have my own .browserlistrc file with the following contents:

> 3%
last 3 versions
not ie < 11

Unsure of what the actual setting would be here, but if you could restore support for Internet Explorer 11 for us enterprise users, that would be much appreciated!

Lovely package that was easy to get up and running.

I'd like to have a dynamic file name that interpolates the date, and perhaps some other variables.
If I had a method to call I could do it there, but I currently only see an option to add this in-template.

Am I mistaken, or is there a workaround to generate a dynamic file name?

Hello. Thank you for your library.
How I can generate filename after click button?

<download-csv
  :data=fraudErrorsForCSV
  :name="CSVFileName"
  ref="export"
  hidden
>
</download-csv>

<v-btn
  color="green"
  rounded
  @click="createFileName">
  Errors(csv)
</v-btn>

createFileName () {
      var currentdate = new Date()
      this.CSVFileName = `log_${currentdate.getDate()}-${currentdate.getMonth()}-${currentdate.getFullYear()} ${currentdate.getHours()}-${currentdate.getMinutes()}-${currentdate.getSeconds()}.csv`
      this.$refs.export.generate()
    },

data () {
return {
CSVFileName: null,
....
}

File seems to download OK, but when opening I get a "can't open file" error.

The files seem to still show in "blob" format when downloaded. Not sure if that's an issue.

Tested on Android Chrome so far.

Title says it all, I tried every combination to download my data to .xlsx (do not want xls) and no dice, maybe this isn't a feature? Would be cool if there was a way, it makes it easier for users to get excel data and not have to convert from csv

Getting the following error, just loading the website. Not even pressing the download button. I was previously using vue-json-excel with no issues. Any ideas?
Uncaught TypeError: Cannot read properties of undefined (reading 'call')
at webpack_require (vue-json-csv.common.js?2347:5361:1)
at eval (vue-json-csv.common.js?2347:5465:1)
at eval (vue-json-csv.common.js?2347:5732:1)
at eval (vue-json-csv.common.js?2347:5734:1)
at ./node_modules/vue-json-csv/dist/vue-json-csv.common.js (chunk-vendors.js:5238:1)
at webpack_require (app.js:854:30)
at fn (app.js:151:20)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/base/_base-widget-system-bar.vue?vue&type=script&lang=js&:47:71)
at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/base/_base-widget-system-bar.vue?vue&type=script&lang=js& (app.js:1643:1)
at webpack_require (app.js:854:30)

My data may have some columns with empty values. The vue-json-csv omits the columns totally if there's an empty cell on the first row.