需求是在前端導出人員明細表，後端只給提供json格式的數據，函數方法如下:
一：第一種方法：（不可移動端導出）
// 導出明細csv格式（純前端導出）
getExport() {
// this.getDetailList();
if (this.startTime && this.endTime) {
exportAccessList({
residenceId: this.residenceId,
startTime: this.startTime,
endTime: this.endTime
})
.then(res => {
console.log(res.data, "請求json導出數據");
let jsonData = res.data.map((val, index, arr) => {
// 改造數據格式
let json = {};
json.index = index + 1;
json.userName = val.userName; //姓名
json.phone = val.phone; //聯繫方式
json.doorNum = val.doorNum; //門牌號
json.createTime = val.createTime; //時間
json.idNumber = val.idNumber; //出入人身份證
json.accessType = val.accessType; //出入方式
json.carNum = val.carNum; //車牌號
json.temperature = val.temperature; //體溫
json.reason = val.reason; //事由
json.destination = val.destination; //目的地
return json;
});
console.log(jsonData, "改造數據"); //列標題，逗號隔開，每一個逗號就是隔開一個單元格
let str = `序號,出入人姓名,出入人聯繫方式,房屋門牌號,登記時間,出入人身份證號,出入方式,車牌號,體溫,事由,目的地\n`;
// 增加\t爲了不讓表格顯示科學計數法或者其他格式
for (let i = 0; i < jsonData.length; i++) {
for (let item in jsonData[i]) {
str += `${jsonData[i][item] + "\t"},`;
}
str += "\n";
}
//encodeURIComponent解決中文亂碼
let uri =
"data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
//通過創建a標籤實現
let link = document.createElement("a");
link.href = uri;
//對下載的文件命名
link.download = "進出明細表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
.catch(error => {
console.log(error);
});
} else {
Toast("請選擇查詢時間");
}
}
二：第二種方法： (不可移動端導出）
此方法需要安裝依賴包：
1.安裝依賴
1 //npm 2 npm install file-saver -S 3 npm install xlsx -S 4 npm install -D script-loader
2.Blob.js和Export2Excel.js 在src目錄下新建vendor文件夾，裏面放入Blob.js和Export2Excel.js兩個JS文件。目錄大概是這樣的：
3.在main.js中引入兩個包
import Blob from './vendor/Blob'
import Export2Excel from './vendor/Export2Excel.js'
4.修改Export2Excel.js
主要把路徑修改到你自己文件的位置
5.具體方法如下：
// 導出明細2
getExport1() {
if (this.startTime && this.endTime) {
exportAccessList({
residenceId: this.residenceId,
startTime: this.startTime,
endTime: this.endTime
})
.then(res => {
console.log(res.data, "請求json導出數據");
let jsonData = res.data.map((val, index, arr) => {
// 改造數據格式
let json = {};
json.index = index + 1;
json.userName = val.userName; //姓名
json.phone = val.phone; //聯繫方式
json.doorNum = val.doorNum; //門牌號
json.createTime = val.createTime; //時間
json.idNumber = val.idNumber; //出入人身份證
json.accessType = val.accessType; //出入方式
json.carNum = val.carNum; //車牌號
json.temperature = val.temperature; //體溫
json.reason = val.reason; //事由
json.destination = val.destination; //目的地
return json;
});
console.log(jsonData, "改造數據"); //列標題，逗號隔開，每一個逗號就是隔開一個單元格
require.ensure([], () => {
const {
export_json_to_excel
} = require("../../excel/Export2Excel");
const tHeader = [
"序號",
"出入人姓名",
"出入人聯繫方式",
"房屋門牌號",
"登記時間",
"出入人身份證號",
"出入方式",
"車牌號",
"體溫",
"事由",
"目的地"
];
// 上面設置Excel的表格第一行的標題
const filterVal = [
"index",
"userName",
"phone",
"doorNum",
"createTime",
"idNumber",
"accessType",
"carNum",
"temperature",
"reason",
"destination"
];
// 上面的index、nickName、name是tableData裏對象的屬性
const data = this.formatJson(filterVal, jsonData);
export_json_to_excel(tHeader, data, "出入人員明細表");
});
})
.catch(error => {
console.log(error);
});
} else {
Toast("請選擇查詢時間");
}
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},
三.可在移動端導出的方法：
這種方法是後端提供url導出地址，直接請求導出接口，得到導出隨機碼，然後拼接約定好的url，最後定向url導出下載就可以了。
