vue点击导出文件实现功能。

效果图:

1.下载插件

			npm install --save xlsx file-saver
			// 加载script 需要
			npm install script-loader -S -D
            npm install xlsx-populate 

2.使用方法

<div class="hello" id="app">
<button @click="exportExcle">导出</button>
</div>

methods:{
 exportExcle(){
      console.log('导出文件内容');
      // console.log(exportList);
       let sourceOriginAmount = [
                {   
                    scoreName:'李四',
                    goodsName: '华西',
                    sourceCode: '销售打分',
                    defenScore:'王某',
                    deFen:'20',
                    data:'2022-06-12',
                    hangye:'销售',
                    fuwuContent:'销售打分',
                    dataTime:'2022-06-14',
                },
                {
                    scoreName:'张三',
                    goodsName: '海通',
                    sourceCode: '券商整体服务',
                    defenScore:'李某',
                    deFen:'30',
                    data:'2022-06-12',
                    hangye:'化工',
                    fuwuContent:'整体服务',
                    dataTime:'2022-06-14',
                },
                      {   
                    scoreName:'李四',
                    goodsName: '华西',
                    sourceCode: '销售打分',
                    defenScore:'王某',
                    deFen:'20',
                    data:'2022-06-12',
                    hangye:'销售',
                    fuwuContent:'销售打分',
                    dataTime:'2022-06-14',
                },
                {
                    scoreName:'张三',
                    goodsName: '海通',
                    sourceCode: '券商整体服务',
                    defenScore:'李某',
                    deFen:'30',
                    data:'2022-06-12',
                    hangye:'化工',
                    fuwuContent:'整体服务',
                    dataTime:'2022-06-14',
                },
                      {   
                    scoreName:'李四',
                    goodsName: '华西',
                    sourceCode: '销售打分',
                    defenScore:'王某',
                    deFen:'20',
                    data:'2022-06-12',
                    hangye:'销售',
                    fuwuContent:'销售打分',
                    dataTime:'2022-06-14',
                },
                {
                    scoreName:'张三',
                    goodsName: '海通',
                    sourceCode: '券商整体服务',
                    defenScore:'李某',
                    deFen:'30',
                    data:'2022-06-12',
                    hangye:'化工',
                    fuwuContent:'整体服务',
                    dataTime:'2022-06-14',
                }
        ]; // 需要导出的数据，可以动态获取
        
    this.loading = true; // 设置一个loading，生成Excel需要时间
    import('@/vendor/Export2Excel.js').then(excel => { // 导入js模块
    const tHeader = ['打分人', '券商', '服务类型','得分人','得分','时间','行业','服务内容','打分时间']; // 导出excel 的标题
    const filterVal = ['index', 'goodsName', 'sourceCode','defenScore','deFen','data','hangye','fuwuContent','dataTime']; // 每个标题对应的字段
    const list = (sourceOriginAmount || []).map((item, key) => { // 通过 map 方法遍历，组装数据成上面的格式
    console.log(item,'每一项内容是');
             
              return {
                  index: item.scoreName,
                  goodsName: item.goodsName,
                  sourceCode: item.sourceCode,
                  defenScore: item.defenScore,
                  deFen: item.deFen,
                  data: item.data,
                  hangye: item.hangye,
                  fuwuContent: item.fuwuContent,
                  dataTime: item.dataTime,
                }
            });
     
      if (list) {
        const data = this.formatJson(filterVal, list); // 生成json数据
        excel.export_json_to_excel({ // 调用excel方法生成表格
                  header: tHeader,
                  data,
                  filename: this.goodsName
        });

      }else {
        alert('暂无无数据');
      }
      this.loading = false;
    })
    },
    //调用方法
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
}

return：{
loading: false,//默认
}

总计:导出的excel样式可以自己整改，项目需求的效果。