JS 前端导出CSV文件

您所在的位置:网站首页 react导出cvs文件到浏览器 JS 前端导出CSV文件

JS 前端导出CSV文件

2024-07-17 00:35| 来源: 网络整理| 查看: 265

前言:

长期以来,在做文件下载功能的时候都是前端通过ajax把需要生成的文件的内容参数传递给后端,后端通过Java语言将文件生成在服务器,然后返回一个文件下载的连接地址url。前端通过location.href = url或者window.open(url),完成文件的下载。

如果希望在前端直接出发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性。

CSV文件格式:

csv文件以纯文本形式存储表格数据(数字和文本)。纯文本意味着该文件是一个字符序列,不含必须像二进制数字那样被解读的数据。列之间以英文逗号(’,’)分隔,以换行符:“\n”进行换行。 例:用文本打开: 用文本打卡 用csv格式打开: 在这里插入图片描述 导出原理如下:

a标签的datasource功能 直接下载文件 a标签的download属性,用以声明下载的文件名 csv文件的BOM头,data:text/csv;charset=utf-8,\ufeff,特别指出 \ufeff是BOM头,可以让excel等识别出csv文件的编码。 encodeURIComponent() ,对csv文件的换行符\n进行转码 一个简单的示例: 导出CSV文件示例 function exportCsv(obj){ var title = obj.title; var titleForKey = Object.keys(obj.data[0]); var data = obj.data; var str = []; str.push(obj.title.join(",")+"\n"); for(var i=0;i


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3