Web 端 js 导出csv文件(使用a标签)

已于 2024-01-06 17:26:44 修改
阅读量923 收藏 1
点赞数
分类专栏： JavaScript 文章标签： web
于 2017-08-29 16:23:11 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_23502409/article/details/77679563
版权

前言

导出文件，使用最多的方式还是服务器端来处理。比如jsp 中使用response 的方式。

但是，有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢？ 比如说，导出页面的一个表格。

这个需求肯定是有答案的，只是对于各浏览器处理会稍微不一样。(主要是IE 和其他浏览器的区别)。

在IE中使用ActiveXObject 实现，在firefox 和Chrome 中使用  a 标签（或者js）就可以实现了。 这里主要讲一下其他浏览器中的实现。


使用 a 标签实现方式

直接上例子：

[html] view plain copy
print ?
  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>  
  2. <html>  
  3.   <head>  
  4.   <meta http-equiv=“content-type” content=“text/html; charset=utf-8”>  
  5.   <meta name=“author” content=“oscar999”>  
  6.   <title></title>  
  7.   </head>  
  8.   <body>  
  9.     <a id=“test” download=“downlaod.txt” href=“data:text/txt;charset=utf-8,download Test Data”>download</a>  
  10.   </body>  
  11. </html>  
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<head>

<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>

<meta name=“author” content=“oscar999”>

<title></title>

</head>

<body>

<a id=“test” download=“downlaod.txt” href=“data:text/txt;charset=utf-8,download Test Data”>download</a>

</body>

</html>
说明一下：

1. download 设置下载的文件名。

2. href 加上 data:text/txt;charset=utf-8  分别设置点击link 是下载文件， 编码是utf-8 . 这个逗号后面的就是保存在文件中的内容了。


以多行，多列导出csv 文件

csv 文件可以用Excel打开， 如果是导出一个table 的话，使用Excel 就方便很多了。

问题是： 如何分行， 分列？

理论上 ： 分列使用 ， 号分割， 分行用 \n .

可以用以上方式，会发现列可以分开，但是不换行。 看上去不认识 \n.

解决方式是使用 encodeURIComponent 进行编码/

[html] view plain copy
print ?
  1.   <head>  
  2.   <meta http-equiv=“content-type” content=“text/html; charset=utf-8”>  
  3.   <meta name=“author” content=“oscar999”>  
  4.   <title>  
  5.   </title>  
  6.   <script>  
  7.     function clickDownload(aLink)  
  8.     {  
  9.          var str = “col1,col2,col3\nvalue1,value2,value3”;  
  10.          str =  encodeURIComponent(str);  
  11.          aLink.href = “data:text/csv;charset=utf-8,”+str;  
  12.          aLink.click();  
  13.     }  
  14.   </script>   
  15.   </head>  
  16.   <body>  
  17.     <a id=“test” onclick=“clickDownload(this)” download=“downlaod.csv” href=“#”>download</a>  
  18.   </body>  
  19. </html>  
  <head>

<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>

<meta name=“author” content=“oscar999”>

<title>

</title>

<script>

function clickDownload(aLink)

{

var str = “col1,col2,col3\nvalue1,value2,value3”;

str =  encodeURIComponent(str);

aLink.href = “data:text/csv;charset=utf-8,”+str;

aLink.click();

}

</script>

</head>

<body>

<a id=“test” οnclick=“clickDownload(this)” download=“downlaod.csv” href=“#”>download</a>

</body>

</html>


带中文问题的csv 导出

以上使用的都是utf-8 编码，理论上导出中文应该不是问题。

但是导出csv 格式的话， 使用Excel 打开会发现中文是乱码，但是用其他文本程序打开确是正常的。

原因就是少了一个 BOM头 。  \ufeff。

加上一切都正常了，

[html] view plain copy
print ?
  1.    <head>  
  2.   <meta http-equiv=“content-type” content=“text/html; charset=gb2312”>  
  3.   <meta name=“author” content=“oscar999”>  
  4.   <title>  
  5.   </title>  
  6.   <script>  
  7.     function clickDownload(aLink)  
  8.     {  
  9.          var str = “栏位1,栏位2,栏位3\n值1,值2,值3”;  
  10.          str =  encodeURIComponent(str);  
  11.          aLink.href = “data:text/csv;charset=utf-8,\ufeff”+str;  
  12.          aLink.click();  
  13.     }  
  14.   </script>   
  15.   </head>  
  16.   <body>  
  17.     <a id=“test” onclick=“clickDownload(this)” download=“downlaod.csv” href=“#”>download</a>      
  18.   </body>  
  19. </html>  
   <head>

  <meta http-equiv=“content-type” content=“text/html; charset=gb2312”>

  <meta name=“author” content=“oscar999”>

  <title>

  </title>

  <script>

    function clickDownload(aLink)

    {

         var str = “栏位1,栏位2,栏位3\n值1,值2,值3”;

         str =  encodeURIComponent(str);

         aLink.href = “data:text/csv;charset=utf-8,\ufeff”+str;

         aLink.click();

    }

  </script>

  </head>

  <body>

    <a id=“test” οnclick=“clickDownload(this)” download=“downlaod.csv” href=“#”>download</a>    

  </body>

</html>


这里有两个改变

1. 页面的charset 需设置成gb2312

2. 加上 \ufeff BOM 头


Chrome下载的文件名

以上使用 a 的download 属性可以指定下载的文件名及后缀。 但是在Chrome 执行的时候会发现， Chrome 压根不理会这个。

下载名是 “下载” 或是 “download”.

上网搜索一下， 有说是Chrome 的 bug.

参见 stackoverflow 中的两篇文章：

http://stackoverflow.com/questions/23962284/download-attribute-on-a-tag-doesnt-work-in-chrome
http://stackoverflow.com/questions/23816005/anchor-tag-download-attribute-not-working-bug-in-chrome-35-0-1916-114

以上两篇文章可以不去关注， 需要关注的是这个问题是否可以解决， 以及解决的方法是什么？

直接贴解决方案：

[html] view plain copy
print ?
  1. var blob = new Blob([data], { type: ‘text/csv’ }); //new way  
  2. var csvUrl = URL.createObjectURL(blob);  
  3. document.getElementById(“mylink”).href = csvUrl;   
							 var blob = new Blob([data], { type: ‘text/csv’ }); //new way

var csvUrl = URL.createObjectURL(blob);

document.getElementById(“mylink”).href = csvUrl;

使用Blob 和URL 来封装和转换. 问题解决。

这里如遇中文问题， 和上面的处理方式是一样的：

1. 页面的charset 需设置成gb2312 （设成UTF-8 也可以）

2. 加上 \ufeff BOM 头

具体的代码类似：

[html] view plain copy
print ?
  1. data = “\ufeff”+data;  
  2. var blob = new Blob([data], { type: ‘text/csv,charset=UTF-8’});  
data = “\ufeff”+data;

var blob = new Blob([data], { type: ‘text/csv,charset=UTF-8’});

    <div id="digg" articleid="16342699">
        <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">
           
             <dt>顶</dt>
            <dd>9</dd>
        </dl>
       
          
        <dl id="btnBury" class="digg digg_enable" onclick="btnburya();">
          
              <dt>踩</dt>
            <dd>1</dd>               
        </dl>
        
    </div>
 <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank">&nbsp;</a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank">&nbsp;</a></div>
<script type="text/javascript">
    function btndigga() {
        $(".tracking-ad[data-mod='popu_222'] a").click();
    }
    function btnburya() {
        $(".tracking-ad[data-mod='popu_223'] a").click();
    }
        </script>

<div style="clear:both; height:10px;"></div>


        <div class="similar_article">
                <h4></h4>
                <div class="similar_c" style="margin:20px 0px 0px 0px">
                    <div class="similar_c_t">
                      &nbsp;&nbsp;相关文章推荐
                    </div>
               
                    <div class="similar_wrap tracking-ad" data-mod="popu_36" style="max-height:250px">                       
                        <ul class="similar_list fl">    
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/wuhouz/article/details/51372481" title="Web 端 js 导出csv文件(使用a标签)" strategy="BlogCommendFromCsdn_0" target="_blank">Web 端 js 导出csv文件(使用a标签)</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/huiyiCourse/series_detail/54?utm_source=blog7" title="【直播】机器学习&amp;数据挖掘7周实训--韦玮" strategy="undefined" target="_blank">【直播】机器学习&amp;数据挖掘7周实训--韦玮</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://download.csdn.net/download/lhx222/3681587" title="java web struts,Spring,jstl,js,ajax,velocity,freemarker标签大全" strategy="BlogCommendFromCsdn_1" target="_blank">java web struts,Spring,jstl,js,ajax,velocity,freemarker标签大全</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/huiyiCourse/detail/501?utm_source=blog7" title="【直播】大中型UGC信息网站SEO分享--乔向阳" strategy="undefined" target="_blank">【直播】大中型UGC信息网站SEO分享--乔向阳</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://download.csdn.net/download/wangshuxuncom/7457173" title="演示web.xml文件中error-page标签的使用.zip" strategy="BlogCommendFromCsdn_2" target="_blank">演示web.xml文件中error-page标签的使用.zip</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/huiyiCourse/series_detail/60?utm_source=blog7" title="【直播】打通Linux脉络 进程、线程和调度--宋宝华" strategy="undefined" target="_blank">【直播】打通Linux脉络 进程、线程和调度--宋宝华</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/LoveTea99/article/details/52056390" title="Web端导出CSV" strategy="BlogCommendFromCsdn_3" target="_blank">Web端导出CSV</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/combo/detail/240?utm_source=blog7" title="【套餐】Java高级程序员专业学习路线--肖海鹏" strategy="undefined" target="_blank">【套餐】Java高级程序员专业学习路线--肖海鹏</a>
                               </li>
                        </ul>
                          <ul class="similar_list fr">      
                               <li>
                                   <em>•</em>
                                   <a href="http://download.csdn.net/download/johnny_k/3310023" title="web页面导入csv文件" strategy="BlogCommendFromCsdn_4" target="_blank">web页面导入csv文件</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/course/detail/474?utm_source=blog7" title="【课程】C++语言基础--贺利坚" strategy="undefined" target="_blank">【课程】C++语言基础--贺利坚</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/haoshidai/article/details/50809598" title="前端学习总结（七）Angular.js——以数据交互为核心的前端框架" strategy="BlogCommendFromCsdn_5" target="_blank">前端学习总结（七）Angular.js——以数据交互为核心的前端框架</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/course/detail/5222?utm_source=blog7" title="【课程】深度学习基础与TensorFlow实践--AI100" strategy="undefined" target="_blank">【课程】深度学习基础与TensorFlow实践--AI100</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://download.csdn.net/download/lemon_zhao/9711434" title="js生成csv文件下载" strategy="BlogCommendFromCsdn_6" target="_blank">js生成csv文件下载</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/Lpandeng/article/details/60317569" title="js 资源大全" strategy="BlogCommendFromCsdn_7" target="_blank">js 资源大全</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://download.csdn.net/download/w2140605827/9893586" title="可将HTML表格导出为Excel_csv_txt文件的jQuery插件" strategy="BlogCommendFromCsdn_8" target="_blank">可将HTML表格导出为Excel_csv_txt文件的jQuery插件</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/ljl_xyf/article/details/8206417" title="FusionCharts图表控件中文版使用手册" strategy="BlogCommendFromCsdn_9" target="_blank">FusionCharts图表控件中文版使用手册</a>
                               </li>
                        </ul>
                    </div>
                </div>
            </div>

更多文章请扫码关注公众号，有问题的小伙伴也可以在公众号上提出。
请添加图片描述

Denny辉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript前端导出csv文件
没有感情的代码机器的博客
11-19 808
JS前端利用a标签直接导出 导出的原理如下： a标签的datasource功能直接下载文件 a标签的download属性，用以声明下载的文件名 csv文件的BOM头，data:text/csv;charset=utf-8,\ufeff，特别指出 \ufeff是BOM头，可以让excel等识别出csv文件的编码。 注意：每一个表格中的数据用逗号相连，行与行之间需要添加换行符进行换行 结合代码...
UTF-8格式CSV文件的读取与导出
最新发布
LPClan的博客
07-10 256
读取UTF-8格式的CSV文件 opencsv。
前端表格导出数据 csv文件
m0_68782725的博客
09-27 166
中途 遇到过 前端导出csv文件时 数字过长 会被转出'E+'字样 或者 日期 为‘2023-09-11’ 转成‘2023-9-11’ 中日期0 没了 又或者说 遇到过 有的导出中有带编号的 前面有 0000012345 可能转出 12345 的 可用一个方法解决。//mainList 为表格所有数据 mainTitle 为表头字段 mainTitleForKey 为 表格的key值 filename 导出文件的名字。
使用a标签方式将json导出csv文件
m0_49668657的博客
01-11 175
【代码】使用a标签方式将json导出csv文件。
利用a标签导出csv文件
weixin_30470643的博客
07-12 455
原文 　　简书原文：https://www.jianshu.com/p/a8687610cda3 大纲 　　1、需求分析　　2、通过a标签实现文件导出　　3、实现方式 1、需求分析 　　导出文件，使用最多的方式还是服务器端来处理。比如jsp中使用response的方式。　　但是，有时候可能就想使用web前端是否也可以把页面上的内容导出来呢？比如说，导出页面的一个表格。　　这个需求肯定是有...
Python txt/csv文件的读取和写入
Teamo_mc的博客
04-23 2072
读取文件内容的方式 直接一次性读取文件内容 按行读取文件内容 将读取的文件内容形成一个列表 直接一次性读取文件内容 open() 需要手动释放资源，最后使用close() with open() as… 使用with … as…，则会自动释放资源，无需使用close() 按行读取文件内容 讲读取的文件内容形成一个列表 读取txt文件 spli...
csv.js导出csv格式文件
01-05
本篇文章将深入探讨如何使用`csv.js`来导出CSV格式的文件。 首先，`csv.js`库主要包含两个核心部分：`parse`和`stringify`。`parse`用于解析CSV字符串成JavaScript对象数组，而`stringify`则将JavaScript对象数组...
js 导出CSV
05-27
下面我们将详细探讨如何使用`filesaver.js`来导出CSV，以及这个过程中的关键知识点。 首先，理解CSV格式是非常重要的。CSV是一种通用的数据交换格式，它以纯文本形式存储表格数据，每行数据由一个或多个字段组成，...
thinkphp下 导入导出csv文件
03-23
标题"thinkphp下导入导出csv文件"涉及到的主要知识点包括： 1. CSV文件格式：CSV文件是以逗号分隔的纯文本文件，每个记录占据一行，每个字段之间由逗号分隔。这种格式使得数据可以轻松地在各种应用程序之间传递，如...
JS兼容浏览器的导出Excel（CSV）文件的方法
10-26
在现代的Web开发过程中，我们经常需要为用户提供将页面上的数据导出为Excel文件的功能。传统上，这样的处理一般是在服务器端完成，比如使用PHP、***等后端技术。然而，随着客户端JavaScript技术的成熟，越来越多的...
JavaScript将Web页面内容导出到Word及Excel的方法
10-24
在现代浏览器和跨平台环境下，通常会采用其他技术，如使用File API生成CSV文件（可以被Excel识别）或者使用服务器端的库（如Node.js的`exceljs`或PHP的`PHPExcel`）来实现导出功能。 此外，为了实现更广泛的浏览器...
excell 文件下载
weixin_45581741的博客
07-28 244
//excell 文件下载 function downtext(data, str, downname) { // str = `时间活跃数,活跃数,\n`; //增加\t为了不让表格显示科学计数法或者其他格式 for (let i = 0; i < data.length; i++) { for (let item in data[i]) { str += `${data[i][item] + '\t'},` }
js导出csv文件
qq_49464155的博客
01-21 3434
遇到的问题： 1. 含有逗号（,） 问题描述：因为csv是一种通用的、相对简单的逗号分隔值文件格式，含有, 的字符串导出会根据,分开，占据不同单元格 解决办法：我们可以把数据格式从 kakakak ,alakk 处理成 "kakakak ,alakk" 就好，用双引号包裹 2. 含有双引号（"） 问题描述：如果该字段中有双引号，csv解析会出问题 解决办法：该双引号前要再加一个双引号，然后把该字段使用双引号括起来。eg:（lalla"123=>"lalla""123"） 方法： co
CSV.js: 简单易用的JavaScript库，让CSV处理更轻松
gitblog_00074的博客
03-25 991
CSV.js: 简单易用的JavaScript库，让CSV处理更轻松 CSV.js项目地址:https://gitcode.com/gh_mirrors/csv/CSV.js CSV（Comma Separated Values）是一种常见的数据交换格式，广泛用于数据分析和导入导出。在Web开发中，处理CSV文件往往需要编写一些复杂代码。但有了，这一切变得简单许多。 项目简介 CSV.js 是一...
【JS】将表格数据下载为 .csv 文件
qq_45677671的博客
07-03 648
将表格数据下载保存为 .csv 文件到本地
CSV.js：高效、简洁的CSV处理库
gitblog_00030的博客
05-13 283
CSV.js：高效、简洁的CSV处理库 项目地址:https://gitcode.com/CyrusOfEden/CSV.js 1、项目介绍 CSV.js 是一个轻量级的JavaScript库，专门用于快速解析和编码符合RFC 4180标准的CSV数据。无论您是在浏览器环境（支持IE8以上）中，还是在AMD或Node.js环境中，都能无缝地使用它。 2、项目技术分析 CSV.js 提供了简单的AP...
JavaScript 实现导出 CSV 文件
VirgoYellow 的专栏
09-25 1797
通过接口拿到的数据结构如上所示，现在要通过 JavaScript 将数据导出： <script type="text/javascript" src="json2csv.js"></script> <script type="text/javascript"> var title = Object.keys...
JavaScript - 读取 CSV（Comma-Separated Values）文件
qq_29761395的博客
01-05 6240
文章目录示例效果代码参考 示例 效果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>读取 CSV（Comma-Separated Values）文件</title> </head> <body> <!-- https://www.iana.org/as
如何用java代码读取在MySQL导出的CSV文件并在VUE上面用高德地图表示出来
06-11
要用Java代码读取MySQL导出的CSV文件并在Vue上使用高德地图表示它们，您需要完成以下步骤： 1. 使用Java代码读取CSV文件并将其转换为Java对象。 2. 使用Java对象中的地理位置信息调用高德地图Web服务API，将其转换...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值