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/Export2Ex