前端js实现数据写csv文件，并下载
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端js实现数据写csv文件，并下载相关的知识，希望对你有一定的参考价值。
参考技术A var data = ["1,2,3\n","4,5,6"] // 每一行数据为一个字符串，字符串用“,”隔开，并且在每一行加上换行符var blob = new Blob(data, type:"text/csv,charset=UTF-8")
var csvUrl = URL.createObjectURL(blob)
var aEle = document.createElement("a")
aEle.download = "data.csv" //文件名随意
aEle.href = csvUrl
aEle.click()
前端js导出CSV，Excel格式文件
通过自己实际测试有以下几种方法
方法一通过a标签实现，把要导出的数据用“\n”和“,”拼接成一个字符串，然后把字符串放到href中，这种方法只支持chrome，firefox等非ie浏览器
html页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>导出CSV文件</title>
<script>
function exportCsv(obj){
//title ["","",""]
var title = obj.title;
//titleForKey ["","",""]
var titleForKey = obj.titleForKey;
var data = obj.data;
var str = [];
str.push(obj.title.join(",")+"\n");
for(var i=0;i<data.length;i++){
var temp = [];
for(var j=0;j<titleForKey.length;j++){
temp.push(data[i][titleForKey[j]]);
}
str.push(temp.join(",")+"\n");
}
var uri = ‘data:text/csv;charset=utf-8,‘ + encodeURIComponent(str.join(""));
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = "export.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
window.onload = function(){
document.getElementById("test").onclick = function(){
exportCsv({
title:["第一列","第二列"],
titleForKey:["num1","num2"],
data:[
{
num1:"123",
num2:"fff"
},{
num1:"123",
num2:"fff"
},{
num1:"123",
num2:"fff"
}]
});
}
}
</script>
</head>
<body>
<a id="test" href="javascript:;">导出</a>
</body>
</html>
第二种方法通过ActiveXObject("Excel.Application")实现，这种方法只支持ie浏览器
html页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE导出CSV</title>
<script>
window.onload = function(){
function exportCsv(){
//创建AX对象excel
var oXL = new ActiveXObject("Excel.Application");
//获取workbook对象
var oWB = oXL.Workbooks.Add();
//激活当前sheet
var oSheet = oWB.ActiveSheet;
var Lenr = [["标题一","标题二","标题三"],["4","5","6"],["1","2","3"]];
for (i = 0; i < Lenr.length; i++) {
for (j = 0; j < Lenr[i].length; j++) {
oSheet.Cells(i + 1, j + 1).value = Lenr[i][j];
}
}
//设置excel可见属性
oXL.Visible = true;
}
document.getElementById("J_export").onclick = function(){
exportCsv();
}
}
</script>
</head>
<body>
<a href="javascript:;" id="J_export">导出</a>
</body>
</html>
第三种方法也是目前项目中正在使用的
通过使用FileSave.js实现FileSave.js插件https://github.com/eligrey/FileSaver.js/
html页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE导出CSV</title>
<script src="FileSaver.js"></script>
<script>
window.onload = function(){
function exportCsv2(){
//Excel打开后中文乱码添加如下字符串解决
var exportContent = "\uFEFF";
var blob = new Blob([exportContent+"标题,标题,标题\n1,2,3\n4,5,6"],{type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.csv");
}
document.getElementById("J_export").onclick = function(){
exportCsv2();
}
}
</script>
</head>
<body>
<a href="javascript:;" id="J_export">导出</a>
</body>
</html>
以上是关于前端js实现数据写csv文件，并下载的主要内容，如果未能解决你的问题，请参考以下文章