vue中使用数据导出功能

1.下载依赖包：
    npm install -S file-saver xlsx
    npm install -D script-loader

2.webpack.base.conf.js中添加配置

      'scss_vars': '@/styles/vars.scss',

      'excel': path.resolve(__dirname, '../src/excel'), //文件路径（src下创建excel文件夹放置Blob.js和Export2Excel.js）

  

3.使用：代码放置位置

template:

      <el-button @click="outExe()">导出</el-button>

      

methods:

outExe() {

this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {

confirmButtonText: "确定",

cancelButtonText: "取消",

type: "warning"

})

.then(() => {

this.excelData = this.demoData; //导出的数据list。

this.export2Excel();

})

.catch(() => {});

},

export2Excel() {

var that = this;

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

const { export_json_to_excel } = require("../../excel/Export2Excel.js"); //必须使用绝对路径

const tHeader = ["信息", "信息2", "信息3", "信息4", "信息5", "信息6"]; // 标题

const filterVal = ["msg1", "msg2", "msg3", "msg4", "msg5", "msg6"]; // 导出的字段名

const list = that.demoData;

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

export_json_to_excel(tHeader, data, `excel`);

});

},

formatJson(filterVal, jsonData) {

return jsonData.map(v => filterVal.map(j => v[j]));

}

 

附加-附加-附加：Blob.js和Export2Excel.js源代码

 

Blob.js:源代码

(function (view) {

"use strict";

 

view.URL = view.URL || view.webkitURL;

 

if (view.Blob && view.URL) {

try {

new Blob;

return;

} catch (e) {}

}

 

// Internally we use a BlobBuilder implementation to base Blob off of

// in order to support older browsers that only have BlobBuilder

var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {

var

get_class = function(object) {

return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];