美文网首页
vue导出excel文件和使用moment.js

vue导出excel文件和使用moment.js

作者: xcx时光你好 | 来源:发表于2020-07-22 17:21 被阅读0次

1.安装依赖

npm install -S file-saver xlsx
npm install -D script-loader
cnpm i moment --save

2.下载Bolb.js与Export2Excel.js 下载链接https://pan.baidu.com/s/1S6sIVXjbHNxy-Gol5xnShA 提取码:ulro

3.在src下创建文件夹excel,将下载的Bolb.js和Export2Excel.js放在此处,修改Export2Excel.js如图 2.png

4.在main.js中导入Bolb和Export2Excel和挂载moment

import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'
import moment from 'moment'//导入文件 

 Vue.prototype.$moment = moment;//赋值使用

5.在组件中的data中定义tableData存放数据

      tableData:[
        {id:1,name:'小明',age:18},
        {id:2,name:'小红',age:10},
        {id:3,name:'晓东',age:33}
      ]

6.在组件的methods中放如下方法

    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel');
        const tHeader = ['ID', '名称', '年龄'];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['id', 'name', 'age'];
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, ''+this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss') +'');
      })
    },
     //凡是用的prototype   使用都要this.继承
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }

7.导出结果如下图 3.png

相关文章

网友评论

      本文标题:vue导出excel文件和使用moment.js

      本文链接:https://www.haomeiwen.com/subject/wyjwghtx.html