什么是csv文件?
百度百科的解释: 逗号分隔值文件格式综上,该格式有3个特点:
- 该格式是纯文本数据格式,即字符串格式
- 字段间的分隔符是其它字符或字符串,最常见的是逗号或制表符
- 记录间以某种换行符分隔
编辑Excel文件时,当编辑完成当前单元格,想要编辑下一行紧挨着的单元格,按一下Enter键就可以。Enter键在js字符串中是用\r
表示的,而各个系统对Enter键的匹配模式不太一样:
- Windows系统,标准模式采用的是
\r\n
匹配Enter键 - mac系统,用
\r
匹配Enter键 - Linux系统,用
\n
匹配Enter键
所以记录间的换行分隔符应该以\r\n
表示
数据转换
弄清csv格式后就要开始数据转换了。以下面列出的表头和数据为例
// 表头
const exportTitle = ["月份", "价格"];
// 数据
const exportData = [
{
month: "2020-07",
price: 78,
},
{
month: "2020-08",
value: 108.8,
},
{
month: "2020-09",
value: 93.6,
},
];
// 文件名称
const fileName = "bill.csv";
按照上述规则:字段间逗号分隔+记录间\r\n
分隔,拼接字符串。
let row = "",
csvData = "";
for (const title of exportTitle) {
row += '"' + title + '",';
}
csvData += row + "\r\n"; // 添加换行符号
for (const item of exportData ) {
row = "";
for (let key in item) {
row += '"' + item[key] + '",';
}
csvData += row + "\r\n"; // 添加换行符号
}
if (!csvData) return;
转换后的数据格式是:
""月份","价格",
"2020-07","72.5",
"2020-08","108.8",
"2020-09","93.6",
"
csv文件下载
目前最方便快捷的方法就是使用HTML5原生的download属性实现下载,于是思路来了:创建a标签-->设置href和download属性-->移除a标签。随之问题也来了:
- 由于是实现本地下载,没有href:生成一个好了,神器Blob就派上用场了。
- IE 不支持download属性:不怕,有msSaveBlob,还要新增一个判断浏览器的方法。
完整代码如下(IE 11以下就不考虑啦):
let alink = document.createElement("a");
// 解决中文乱码的问题,标识该字节流的字节序
let _utf = "\uFEFF";
const bw = this.browser();
if (bw["edge"] || !bw["ie"]) {
// Blob IE>=10 都支持,不能作为判断依据
if (window.Blob && window.URL && window.URL.createObjectURL) {
// DOMStrings会被编码为UTF-8,utf-8保存的csv格式要让Excel正常打开的话,必须加入在文件最前面加入BOM(Byte order mark)
const csvDataBlob = new Blob([_utf + csvData], {
type: "text/csv",
});
//会产生一个类似 blob:http://localhost:8083/5a2d03ec-cbdf-4ea9-be0c-f837ed35a9be 这样的URL字符串,
//可以像使用普通 URL 那样使用它,比如用在 img.src 上。
alink.href = URL.createObjectURL(csvDataBlob);
}
document.body.appendChild(alink);
alink.setAttribute("download", fileName);
alink.click();
document.body.removeChild(alink);
} else if (bw["ie"] >= 10) {
const csvDataBlob = new Blob([_utf + csvData], {
type: "text/csv",
});
navigator.msSaveBlob(csvDataBlob, fileName);
}
判断浏览器代码如下:
browser() {
let Sys = {};
let ua = navigator.userAgent.toLowerCase();
let s;
(s =
ua.indexOf("edge") !== -1
? (Sys.edge = "edge")
: ua.match(/rv:([\d.]+)\) like gecko/))
? (Sys.ie = s[1])
: (s = ua.match(/msie ([\d.]+)/))
? (Sys.ie = s[1])
: (s = ua.match(/firefox\/([\d.]+)/))
? (Sys.firefox = s[1])
: (s = ua.match(/chrome\/([\d.]+)/))
? (Sys.chrome = s[1])
: (s = ua.match(/opera.([\d.]+)/))
? (Sys.opera = s[1])
: (s = ua.match(/version\/([\d.]+).*safari/))
? (Sys.safari = s[1])
: 0;
return Sys;
}
代码写完了,见证奇迹的时刻到了
对账单下载
月份明明是字符串,下载下来怎么变成自定义的日期格式了?试了好多种方法,最后发现直接加个空串更直接高效:
row += '"' + item[key] + '",';
改成
row += '" ' + item[key] + '",';
就ok了,完美!
对账单
拓展
- Blob乱码问题:需要了解下BOM
FEFF -
createObjectURL:会产生一个类似
blob:http://localhost:8083/5a2d03ec-cbdf-4ea9-be0c-f837ed35a9be
这样的URL字符串, 可以像使用普通 URL 那样使用它,比如用在img.src
上。
网友评论