介紹
目前代碼支持兩種導(dǎo)出方式：
- csvExport：導(dǎo)出為csv格式
- plainExport：純文本形式導(dǎo)出风题，默認(rèn)后綴為txt
模塊要求：
- antd
csvExport
import { message } from 'antd';
const csvExport = (data, fileName='export.csv', removeColName = false, separator=',') => {
/*csv download*/
if (data.length === 0) {
message.warn("NO such data. Please reset the search criteria.");
} else {
const cols = Object.keys(data[0]);
let blobData = '\uFEFF' // BOM head, make excel know it is csv.
if (!removeColName) {
blobData += cols.join(separator) + '\n'; // add column name
}
console.log('prepare to download. data is ', data);
data.forEach(
item => {
const itemData = []
cols.forEach(col => {
// console.log(ele, index)
const val = item[col] || '-';
itemData.push(`"${val}"`)
})
blobData += `${itemData.join(separator)}\n`;
}
);
const export_uri = `data:text/csv;charset=utf-8,${encodeURIComponent(blobData)}`;
const a = document.createElement('a');
a.style.display = 'none';
a.setAttribute('target', '_blank');
a.setAttribute('download', fileName);
a.href = export_uri;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
參數(shù)data為要導(dǎo)出的數(shù)據(jù)，要求格式為列表幽勒，列表元素為對象羽历。如果data為空會報(bào)錯(cuò)焊虏。
當(dāng)data不為空時(shí)，會以data的第一個(gè)元素的key值作為列名秕磷。默認(rèn)是要輸出列名的诵闭，如果不想在導(dǎo)出的文件中包含列名，可以將removeColName設(shè)置為True澎嚣。
另外疏尿，默認(rèn)情況下csv中每一行的分隔符是逗號，但其他的如制表符其實(shí)也可以易桃。如果想使用除逗號之外的分隔符褥琐，可以將其傳遞給separator參數(shù)。
準(zhǔn)備導(dǎo)出數(shù)據(jù)的部分并不復(fù)雜晤郑，其實(shí)就是將data中元素的每一個(gè)值挨個(gè)取出敌呈，用separator拼接在一起形成一個(gè)字符串贸宏，然后元素和元素之間（可以理解為行與行之間）用\n分隔即可。
？暮椤吭练！注意：需要保證data中每一個(gè)元素的key相同，否則只會取第一個(gè)元素中包含的key做導(dǎo)出文件的列析显。
在導(dǎo)出內(nèi)容整理好之后鲫咽，就通過添加超鏈接節(jié)點(diǎn)的方式觸發(fā)下載，也就是const export_uri = `data:text/csv;charset=utf-8,${encodeURIComponent(blobData)}`;及之后的代碼谷异。
plainExport
const plainExport = (data, fileName='export.txt') => {
let blobData = data
const export_uri = `data:text/plain;charset=utf-8,${encodeURIComponent(blobData)}`;
const a = document.createElement('a');
a.style.display = 'none';
a.setAttribute('target', '_blank');
a.setAttribute('download', fileName);
a.href = export_uri;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
邏輯更加簡單分尸，即“無腦地”將輸入的參數(shù)進(jìn)行導(dǎo)出。這里歹嘹，要求data為字符串結(jié)構(gòu)箩绍，由后臺代碼來控制每一行列分別是什么樣子。比如在我的項(xiàng)目中荞下，先將dataframe的多列拼接成由逗號分隔各列內(nèi)容的單列伶选，然后將其轉(zhuǎn)為list，最后用換行符拼接成一個(gè)字符串尖昏。這樣的字符串經(jīng)由plainExport()導(dǎo)出，其形如csv构资，但添加了在csv中不太好操作的一些格式化內(nèi)容抽诉，用以滿足用戶的需求：
# python
joined_series = None
for col_index in range(len(df.columns)):
if col_index == 0:
joined_series = " "+df[df.columns[col_index]] # first col, start with two space
elif col_index == len(df.columns) -1:
# last col, start with ",", no spaces
joined_series += ","+df[df.columns[col_index]]
else:
# middle cols, start with ",....", "." is space
joined_series += ", " + df[df.columns[col_index]]
logger.debug("Join all columns of df is done.")
if joined_series is None:
raise Exception(f"No columns can be got")
logger.debug(str(joined_series))
joined_series_list = joined_series.tolist()
return_content = "\n".join(joined_series_list)
return return_content
完整code
import { message } from 'antd';
const csvExport = (data, fileName='export.csv', removeColName = false, separator=',') => {
/*csv download*/
if (data.length === 0) {
message.warn("NO such data. Please reset the search criteria.");
} else {
const cols = Object.keys(data[0]);
let blobData = '\uFEFF' // BOM head, make excel know it is csv.
if (!removeColName) {
blobData += cols.join(separator) + '\n'; // add column name
}
console.log('prepare to download. data is ', data);
data.forEach(
item => {
const itemData = []
cols.forEach(col => {
// console.log(ele, index)
const val = item[col] || '-';
itemData.push(`"${val}"`)
})
blobData += `${itemData.join(separator)}\n`;
}
);
// console.log('prepare export', blobData);
const export_uri = `data:text/csv;charset=utf-8,${encodeURIComponent(blobData)}`;
const a = document.createElement('a');
a.style.display = 'none';
a.setAttribute('target', '_blank');
a.setAttribute('download', fileName);
a.href = export_uri;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
const plainExport = (data, fileName='export.txt') => {
let blobData = data
const export_uri = `data:text/plain;charset=utf-8,${encodeURIComponent(blobData)}`;
const a = document.createElement('a');
a.style.display = 'none';
a.setAttribute('target', '_blank');
a.setAttribute('download', fileName);
a.href = export_uri;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
export {
csvExport,
plainExport
}
