码上敲享录 > vue.js常见问题详解 > vue前端导出excel教程,如此简单

vue前端导出excel教程,如此简单

上一章章节目录下一章 2020-09-07已有1400人阅读 评论(0)

vue前端导出excel教程,如此简单


解决方法:

1.安装依赖,如果下载慢,npm也可以换成cnpm

npm install file-saver -S

npm install xlsx -S

npm install -D script-loader


2.下载资源文件Blob.js和Export2Excel.js,我是放到src\assets\plugins\excel

下载地址:https://github.com/han6054/export-excel


3.修改Export2Excel.js文件,注意目录路径

require('script-loader!../../../../node_modules/file-saver/src/FileSaver');

require('script-loader!@/assets/plugins/excel/Blob');

require('script-loader!../../../../node_modules/xlsx/dist/xlsx.core.min');


4.调用方法,@click="export2Excel"

export2Excel(){

            const { export_json_to_excel } = require('@/assets/plugins/excel/Export2Excel.js')

           const tHeader = ['题目','答题人数', '选项', '选项答题人数','百分比(%)'];

               //对应的标签

           const filterVal = ['questionTitle','questAnsCount','content', 'count', 'percent'];

           //标签对应的内容  是一个数组结构

           var list = [{'questionTitle':1,'questAnsCount':2,'content':3, 'count':4, 'percent':5}]

         

               //一个方法 我也不知道干嘛的

               const data = this.formatJson(filterVal, list);


               export_json_to_excel(tHeader, data, "数据统计");

       },

       formatJson(filterVal, jsonData) {

           return jsonData.map(v => filterVal.map(j => v[j]))

       },


向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti
0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交