在vue中使用导入导出csv文件

1.如何在vue中是使用csv文件导出和导入

2.使用 PapaParse，PapaParse是一个JavaScript库 

npm install papaparse

使用这个安装 

  <button @click="importCsvFile">导入</button> 

这个是绑定了点击事件 

    // 点击导入csv文件按钮
    importCsvFile() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.csv';
      input.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();

        reader.onload = (e) => {
          const csvData = e.target.result;
          const parsedData = Papa.parse(csvData, { header: true });
          // 处理导入的数据
          console.log(parsedData.data);
          this.list = parsedData.data

        };

        reader.readAsText(file);
      });

      input.click();
    },

 

    // 点击导出csv文件按钮
    exportCsvFile() {
      let firstLines = this.firstLine
      let secondLines = this.secondLine
      let thirdLines = this.thirdLine
      let fourthLines = this.fourthLine
      const data = this.list;
      const csvData = Papa.unparse(data);
      const blob = new Blob([csvData], { type: 'text/csv' });
      const url = URL.createObjectURL(blob);

      const a = document.createElement('a');
      a.href = url;
      a.download = 'export.csv';
      a.click();

      URL.revokeObjectURL(url);
    }

 

   const data = this.list;

只需要改变data的数据就可以了