nodejs 前端生成csv 直接下载记录

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);
			});

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值