导出

安装vue插件papaparse

yarn add papaparse

插件使用

首先，导出的数据一定得是一个列表，一个对象列表，例如：

itemList: [
        {
          name: '红木',
          type: 'P000001',
          price: '￥88888'
        },
        {
          name: '水杉',
          type: 'P000002',
          price: '￥2000'
        }
      ]

写一个按钮，点击按钮的时候把数据导出csv文件：

<a-button type="primary"   @click="exportCsv()">导出指令</a-button>

点击按钮调用 exportCsv 方法，首先在script里面引用一下库

import Papa from 'papaparse'

接下来是 exportCsv 方法的实现：

/**
     * by wjw
     * 导出指令csv文件
     */
    exportCsv () {
      var csv = Papa.unparse(this.itemList)
      // 定义文件内容，类型必须为Blob 否则createObjectURL会报错
      const content = new Blob([csv])
      // 生成url对象
      const urlObject = window.URL || window.webkitURL || window
      const url = urlObject.createObjectURL(content)
      // 生成<a></a>DOM元素
      const el = document.createElement('a')
      // 链接赋值
      el.href = url
      el.download = '文件导出.csv'
      // 必须点击否则不会下载
      el.click()
      // 移除链接释放资源
      urlObject.revokeObjectURL(url)
    }

可以了。这样的话点击按钮之后就可以将数据转成csv文件导出到本地。但是记住哈，数据一定要符合格式，每条数据都是一样的。

vue 导出cvs文件

https://blog.csdn.net/mmorss/article/details/82586743

导入

首先一样，写一个上传文件的按钮，点击打开文件上传对话框，选择csv文件那种。

<input  type="file" id="files" ref="refFile" v-on:change="importCsv">

当上传了文件调用 importCsv 方法，这个方法是上传csv文件之后的处理方法，逻辑根据需要自己写。

 /**
     * by 王佳伟
     * 2020年6月17日08:42:11
     */
    importCsv () {
      let selectedFile = null
      selectedFile = this.$refs.refFile.files[0]
      if (selectedFile === undefined) {
        return
      }
      var reader = new FileReader()
      reader.readAsDataURL(selectedFile)
      reader.onload = (evt) => {
        // 检查编码
        // let encoding = this.checkEncoding(evt.target.result);
        // 将csv转换成二维数组
        Papa.parse(selectedFile, {
          encoding: 'ANSI',
          complete: (res) => {
            // UTF8 \r\n与\n混用时有可能会出问题
            const data = res.data
            if (data[data.length - 1] == '') {
              // 去除最后的空行
              data.pop()
            }
            console.log(data) // data就是文件里面的数据
          }
        })
      }
    }

前端 VUE 解析 CSV 文件

https://www.jianshu.com/p/a4cc716e246d

本文来自：

Vue项目导入导出csv文件

https://www.cnblogs.com/wjw1014/p/13150412.html