Vue 純前端導出Excel
實際開發(fā)，遇到要求只在前端進行導出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文件夾下創(chuàng)建增加兩個文件：
如圖：
文件位置
文件資源路徑：
鏈接:https://pan.baidu.com/s/1faCXdvqoiyagGWID3_e_PA
密碼:bau3
下載記得點贊钞护，口享衙四！
3. 封裝、使用
按鈕使用：
<el-tooltip class="item" effect="dark" content="導出" placement="bottom">
<el-button type="primary" circle icon="el-icon-download" @click="exportExcelData" />
</el-tooltip>
// 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
