項目中后端返回JSON數(shù)據(jù)絮缅，我們前端需要生成Excel文件并保存
第一種方法
參考文檔
不是官方的,網(wǎng)上的 參考文檔
安裝
-
我這里使用了vue-cli.
安裝依賴包
npm i file-saver xlsx script-loader -S
使用
在項目中創(chuàng)建一個文件夾（比如vendor绳泉，一般是在src目錄下創(chuàng)建）
把 Blob.js 和 Export2Excel.js 這兩個文件夾放到新建的文件夾內(nèi)
由于這幾個文件不支持import引入稀轨，所以我們需要script-loader來將他們掛載到全局環(huán)境下
添加到export2Excel.js
```javascript
require('script-loader!file-saver'); //保存文件用
require('script-loader!vendor/Blob'); //轉(zhuǎn)二進制用
require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心
```
- 注意Bolb的引入 上面的引入需要修改成這樣
require('script-loader!@/vendor/Blob'); //引入之前下載的Bolo.js
使用方法
在vue的methods鉤子中新增方法
代碼如下
handleDownload() {
require.ensure([], () = {
const { export_json_to_excel } = require("@/vendor/Export2Excel");
const tHeader = ["日期", "姓名", "地址"];
const data = ["111",'456','666'];
export_json_to_excel(tHeader, data, "列表excel");
});
}
第二種方法
參考文檔
- npm地址 js-export-excel
- 使用參考文檔 參考文檔
- 安裝
npm i js-export-excel -S
使用
const option = {};
option.fileName = "excel";
option.datas = [
{
sheetData: [
{ one: "一行一列", two: "一行二列" },
{ one: "二行一列", two: "二行二列" }
],
sheetName: "sheet",
sheetFilter: ["two", "one"],
sheetHeader: ["第一列", "第二列"],
columnWidths: [20, 20]
},
{
sheetHeader: ["姓名", "性別"],
sheetData: [["wxh", "男"], ["xh", "女"]]
}
];
const toExcel = new ExportJsonExcel(option); //new
toExcel.saveExcel(); //保存
選項
-
數(shù)據(jù)數(shù)據(jù)
/*多個sheet*/ /*每個sheet為一個object */ [{ sheetData:[], // 數(shù)據(jù) sheetName:'', // sheet名字 sheetFilter:[], //列過濾 sheetHeader:[] // 第一行 columnWidths: [] //列寬 需與列順序?qū)?yīng) }]- fileName 下載文件名（默認(rèn)：下載）
表格選項
- sheetName sheet名字（可有可無）（默認(rèn)sheet1）
- **sheetHeader **標(biāo)題（excel第一行數(shù)據(jù)）
sheetHeader: ["姓名", "性別"],
- columnWidths列寬非必須
// number 屏幕寬度為100 20即為 1/5屏幕大小
columnWidths = [20, ""];
- sheetData數(shù)據(jù)源（必須）
//第一種方式 Object
sheetData: [
{ one: "一行一列", two: "一行二列" },
{ one: "二行一列", two: "二行二列" }
]
//第二種方法 Array
sheetData: [["wxh", "男"], ["xh", "女"]]
- sheetFilter 列過濾（只有在數(shù)據(jù)為對象下起作用）（可有可無）
sheetFilter = ["two", "one"];
完成
- 我不太會總結(jié),多看幾次代碼我也就會了,復(fù)制粘貼
