vue 本地导出实现(亲测ok)

来源: https://www.jianshu.com/p/53ebd034273c

 

一、模块安装

用到 json2csv 和 file-saver。
yarn add json2csv 或 npm install json2csv
yarn add file-saver 或 npm install file-saver

代码实现

import FileSaver from "file-saver";
const Json2csvParser = require("json2csv").Parser;

export default {
  methods: {
    // 点击按钮时触发
    exportFile(){
             let data = [
                {
                    "姓名": '张三',//表格的表头即为key,表格的值即为value
                    "年龄": '26',
                    "性别": '男'
                },
                {
                    "姓名": '小红',
                    "年龄": '22',
                    "性别": '女'
                },
                {
                    "姓名": '小兰',
                    "年龄": '24',
                    "性别": '女'
                },
            ]
      this.exportCSV(data) //表格所需数据
    },
    // 导出文件
    exportCSV(data, filename = `${Date.now()}.csv`) {
      const parser = new Json2csvParser();
      const csvData = parser.parse(data);
      const blob = new Blob(["\uFEFF" + csvData], {
        type: "text/plain;charset=utf-8;",
      });
      FileSaver.saveAs(blob, filename);
    },
  }
}