zoukankan      html  css  js  c++  java
  • vue 导出xlsx表功能

    详细步骤:

    1.需要安装三个依赖:

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

    两个命令行包含三个依赖。

    2.项目中src下新建一个文件夹:

    (vendor---名字任取) 下载:Blob.js和 Export2Excel.js

    文件:链接: http://pan.baidu.com/s/1nvSdw85 密码: 5qhi
    里面放置两个文件Blob.js和 Export2Excel.js。

    3.  修改:Export2Excel.js:require('./Blob');

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

    5.在.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]))
        }

    6.按钮导出调用export2Excel方法。

  • 相关阅读:
    IntentService使用以及源码分析
    Android HandlerThread源码解析
    Android Handler消息机制源码解析
    Gradle技术之四
    Android EditText实现小数点后几位的终级方案
    Gradle系列之三 Gradle概述以及生命周期
    Gradle系列之二 Groovy对文件的操作
    Gradle系列之一 Groovy语法精讲
    Context源码分析
    用EXCLE群发outlook邮件
  • 原文地址:https://www.cnblogs.com/dhpong/p/10620456.html
Copyright © 2011-2022 走看看