參考博客
前端導出表格爲CSV文件功能
代碼
getExportList() {
let jsonData = {
trade:{
tHeader: ["名字","性別","年齡","愛好","身份證號碼"],
filterVal: ["name","sex","nlin","aihao","sfz"],
list: [{name: "名字啊",sex: "性別啊",aihao: "愛好啊",nlin:"年齡啊",sfz:"123456789012345678"},
{name: "名字哦",sex: "性別哦",nlin:"年齡哦",aihao: "愛好哦",sfz:"123456789012345678"}]
},
order:{
tHeader: ["附表名字","附表性別","附表年齡","附表愛好"],
filterVal: ["name","sex","nlin","aihao"],
list: [{name: "附表名字啊",sex: "附表性別啊",nlin:"附表年齡啊",aihao: "附表愛好啊",},
{name: "附表名字哦",sex: "附表性別哦",nlin:"附表年齡哦",aihao: "附表愛好哦",}]
}
}
this.exportPathMethod(jsonData)// 調用exportPathMethod對數據進行處理導出
},
exportPathMethod(data) {
/*
*注:csv文件:","逗號換列,\n換行,\t防止excel將長數字變科學計算法等樣式
*/
//要導出的json數據
let mainLists = data.trade //主表
let subLists = data.order //副表
//## 數據處理
//一級表
let mainTitle = mainLists.tHeader;//一級標題
let mainTitleForKey = mainLists.filterVal;//一級過濾
let mainList = mainLists.list;//一級數據
let mainStr = [];
mainStr.push(mainTitle.join("\t,")+"\n"); //標題添加上換列轉成字符串並存進數組
for(let i=0;i<mainList.length;i++){
let temp = [];
for(let j=0;j<mainTitleForKey.length;j++){
temp.push(mainList[i][mainTitleForKey[j]]); //根據過濾器拿出對應的值
}
mainStr.push(temp.join("\t,")+"\n"); //取出來的值加上逗號換列轉字符串存數組
}
// console.log(JSON.stringify(mainStr.join("")));//打印文本
//二級表
let subTitle = subLists.tHeader;//二級標題
let subTitleForKey = subLists.filterVal;//二級過濾
let subData = subLists.list;//二級數據
let subStr = [];
subStr.push(subTitle.join("\t,")+"\t\n");
for(let i=0;i<subData.length;i++){
let temp = [];
for(let j=0;j<subTitleForKey.length;j++){
temp.push(subData[i][subTitleForKey[j]]);
}
subStr.push(temp.join("\t,")+"\t\n");
}
//兩個表數組轉成字符串合併
let merged = mainStr.join("") + '\n' + subStr.join("")
//console.log(JSON.stringify(merged));//打印結果
//## 導出操作
// encodeURIComponent解決中文亂碼
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(merged)
// 通過創建a標籤實現
let link = document.createElement('a')
link.href = uri
// 對下載的文件命名
link.download = '客戶管理列表.csv'
document.body.appendChild(link)
link.click()
},