vue导出excel加一个进度条_Vue 纯前端导出Excel

Vue 纯前端导出Excel

实际开发，遇到要求只在前端进行导出Excel文件的需求，而非调用接口形式。

1.使用npm下载插件

npm 命令行如下：

npm install xlsx file-saver -S

npm install script-loader -S -D

也可以使用 cnpm :

cnpm install xlsx file-saver -S

cnpm install script-loader -S -D

2.在 -src文件夹下创建增加两个文件：

如图：

文件位置

文件资源路径：

3. 封装、使用

按钮使用：

// click事件

exportExcelData () {

// 省略的逻辑代码 ......

exportExcel(columnTitle, columnData, "我的导出文件名"); //调用封装好的方法

}

这里要说注意下，这个导出数据我的是一个二维数组，需要做一个处理

封装成公共的方法：

// 导出Excel

export function exportExcel(columns,list,excelName){

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

const { export_json_to_excel } = require('../vender/Export2Excel');//注意引入资源路径问题(我这里是相对路径)

let tHeader = []

let filterVal = []

columns.forEach(item =>{

tHeader.push(item.title)

filterVal.push(item.key)

})

let data = []

list.forEach(v => {

v.forEach((item, j) =>{

let a = data[j] = data[j] || []

a.push(item)

})

})

export_json_to_excel(tHeader, data, excelName);

})

}

4. 导出结果

如图：

导出的excel