美文网首页
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