2020-09-14
1.设置csv名称
var name="aaaa.csv" //名称可以根据自己的需求更改
2.设置href
var csvContent = "data:text/csv;charset=utf-8,";
// data:text/csv 和data:application/csv两个区别
如果服务器说"此数据类型为text / csv",则客户端可以理解可以在内部呈现该数据,而如果服务器显示"此数据是类型application / csv"客户端知道它需要启动在操作系统上注册的应用程序才能打开csv文件。text / csv更通用。
// 设置的格式是没有BOM的 具体的BOM有和无有什么区别目前就不再这里说了。
如果想设置有BOM的需要在后面加上\ufeff 结果就是data:text/csv;charset=utf-8,\ufeff
3. 内容填充
csvContent += "xxxxxx"+",";
csvContent += "yyyyyy"+",";
csvContent += "zzzzzz"+",\r\n";
// xxxxx,yyyyyy,zzzzzz根据自己的内容就行修改 结尾的\r\n 和\n也是有区别的
// \r\n实在windows系统里面,\n用在Unix系统里 根据需求自己进行调整即可
// 需要表头的需要自己添加,目前这个代码就是直接输出数据没有表头
4.进行转码
var encodedUri = encodeURI(csvContent)
5.然后做一个a标签即可(需要支持html5)
代码如下
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", name);
document.body.appendChild(link);
link.click();
适用于支持html5的浏览器 目前自己只调试了ChromeheEdge
IE浏览器由于不支持HTML5里面的这个download属性,需要用另外的写法
区别,
1.herf里面不用设置data等
2.需要使用Blob 代码如下
var blob = new Blob([decodeURIComponent(encodeURI(csvContent))], {
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, name);
上述均为自己开发时遇到的总结,也包括网上搜索的资源,有哪些理解不对的希望大佬指点
// 文件CSV保存
var csvExport = function (name, csvContent) {
//如果是IE浏览器
if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([decodeURIComponent(encodeURI(csvContent))], {
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, name);
} else {
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", name);
document.body.appendChild(link);
link.click();
}
}
$('#xxxxxxxxxxx').on('click',function(event){
var name = 'aaaa.csv';
var csvContent = "data:text/csv;charset=utf-8,";
// IE用
if (window.navigator.msSaveOrOpenBlob) {
csvContent = "";
}
// 构建内容
csvContent += aaaaaaa + ',';
csvContent += bbbbbbb + ',';
csvContent += 'ccccc,\r\n';
csvExport(name,csvContent);
});