欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

用js导出数据的两种方法教程

程序员文章站 2022-06-21 08:35:06
前言 导出文件，使用最多的方式还是服务器端来处理。比如 中使用response 的方式。 但是，有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说，导出页...

前言

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

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

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

在ie中使用activexobject 实现，在firefox 和chrome 中使用 a 标签(或者js)就可以实现了。 这里主要讲一下其他浏览器中的实现。

方式一：使用 a 标签实现

直接上例子：

<!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 进行编码/

  <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; 
    }  
  </script>   
  </head>  
  <body>  
    <a id="test" onclick="clickdownload(this)" download="downlaod.csv" href="#">download</a>  
  </body>  
</html>

带中文问题的csv 导出

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

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

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

加上一切都正常了，

   <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;  
    }  
  </script>   
  </head>  
  <body>  
    <a id="test" onclick="clickdownload(this)" download="downlaod.csv" href="#">download</a>      
  </body>  
</html>

这里有两个改变

1. 页面的charset 需设置成gb2312

2. 加上 \ufeff bom 头

chrome下载的文件名

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

下载名是 "下载" 或是 "download".

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

直接贴解决方案：

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 头

具体的代码类似：

data = "\ufeff"+data;  
var blob = new blob([data], { type: 'text/csv,charset=utf-8'});

方式二：window.open(url) 实现导出数据

eg：window.open('/api/v6/room/list?id=3434%df23%df32&name=jim')

search 部分(‘?’之后的部分)最好用 encodeuricomponent(string) 编码一下。

导出的文件名，导出内容的编码格式由后台决定。

上一篇： 为什么乾隆时期的清朝会被称为世界第一大国 当时的满清到底有多强大

下一篇： 殷商时期皇位继承“兄终弟及”，诡异的是后世几个王朝带“殷”的也都承了这一制度！

推荐阅读