vue 纯前端导出excel表格

vue 纯前端导出excel表格

首先装依赖

npm install xlsx file-saver -S
npm install script-loader -S -D

然后需要两个文件 —src 下创建

文件地址链接:文件地址链接 提取码: 6rjd

封装公用方法

export function export2Excel(columns,list,excelName){
  require.ensure([], () => {
      const { export_json_to_excel } = require('@/vendor/Export2Excel');
      let tHeader = []
      let filterVal = []
      columns.forEach(item =>{
          tHeader.push(item.title)
          filterVal.push(item.key)
      })
      const data = list.map(v => filterVal.map(j => v[j]))
      export_json_to_excel(tHeader, data, excelName);
  })
}

页面用法

 exportExcel() {
      const column = [
        { title: "名称", key: "name" },
        { title: "类型/种类", key: "type" },
        { title: "项目编号", key: "projectId" },
        { title: "项目名称", key: "projectName" },
        { title: "负责群组", key: "projectGroup" },
        { title: "价格类型", key: "priceType" },
        { title: "批价文号", key: "priceTag" },
        { title: "批价", key: "priceFixing" },
        { title: "批价年度", key: "priceFixingYear" }
      ]; //表格title       //表格输出数据
      export2Excel(column, this.selecteData, "excelName"); //excelName:excel表名字；column：表格头；selecteData：表格数据
    }

个人vuepress搭建博客 链接
如果您觉得文章有用，可以打赏个咖啡钱
每天成长一点点