vue 将表格导出为excel表格

作者: 前端渣渣 | 来源:发表于2017-08-30 15:14 被阅读398次

    摘抄过来的,备忘!!!
    项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL

    只说怎么做。

    一、需要安装三个依赖:

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

    二、项目中新建一个文件夹:(vendor---名字任取)

    里面放置两个文件Blob.js和 Export2Excel.js。

    百度可下载。

    三、在.vue文件中
       写这两个方法:其中list是表格的内容
        export2Excel() {
          require.ensure([], () => {
            const { export_json_to_excel } = require('../../vendor/Export2Excel');
            const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
            const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
            const list = this.tableData;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, '列表excel');
          })
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        }

    四、按钮导出调用export2Excel方法

    注:如果webpack报解析错误:

    在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
          即可解决
          alias是配置别名

    Blob.js和 Export2Excel.js文件:链接: http://pan.baidu.com/s/1nvSdw85 密码: 5qhi

    相关文章

      网友评论

        本文标题:vue 将表格导出为excel表格

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