vue 中 如何导出任意的表格数据 导出格式为excal格式

第一步:导入 相关的依赖包 cnpm i -S file-saver xlsx  并且导入 cnpm i -D script-loader 

第二步: 下载对应的js文件 Blob.js和Export2Excal.js 

第三步: 在需要导出vue文件的methods中添加对应的方法:

//导出表格数据 start

export2Excel() {

      require.ensure([], () => {

const { export_json_to_excel } = require('../../assets/script/Export2Excel');

        const tHeader = ['摘要', '科目名称', '贷方金额', '借方金额', '制表日期'];

//对应表格输出的title

        const filterVal = ['digest', 'subjectname', 'creditpayment', 'debtorpayment', 'time'];

// 对应表格输出的数据

        const list = this.tableDataList;

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

        export_json_to_excel(tHeader, data, '列表excel'); //对应下载文件的名字

      })

    },

    formatJson(filterVal, jsonData) {

      return jsonData.map(v => filterVal.map(j => { if(j == "time") {

                                                                               // 该部分主要是用来处理数据  此处处理的是后台返回的 data日期格式 处理为想要的时间格式  其中 this.$moment是在main.js中绑定的moment 处理时间格式的处理方法

                                                                                return this.$moment(v[j]).format("YYYY-MM-DD")

                                                                               } else {

                                                                              return v[j]

                                                                               }

}))

    },

// 表格导出方法 end

第四步: 在对应的导出按钮中调用export2Excel()方法。

主要参考:https://blog.csdn.net/linux12a/article/details/77995973;

js文件的下载 通过:http://files.cnblogs.com/files/wangyunhui/vendor.rar 进行下载。

你可能感兴趣的:(前端)