网页里的下载、导出功能

网页中的下载、导出功能，使用最多的方式是服务端来处理。

首先，我来介绍一下如果通过服务端来处理，我们前端要怎么做？

答案很简单，就是请求服务端下载、导出功能的 api 就行了，然后传递需要的参数过去。

前端请求服务端下载、导出，以下三种方式都可以：

方式一：<a> 标签

方式二：Get 请求

location.href = location.origin + '/downloadApi?name=jim&age=22'

方式三：Post 请求

正常的 post 请求。

// 以下这段代码可看可不看，提供了一种 json 转 formData 参数形式的一种方法

function download ({url, params}) {
    params = params || {};    
    let form = document.createElement('form');
    form.action = url;
    form.method = 'post';
    form.style.display = 'none';
    for (let key in params) {
        let opt = document.createElement('textarea');
        opt.name = key;
        opt.value = params[key];
        form.appendChild(opt);
    }
    document.body.appendChild(form);
    form.submit();
    form.remove();
}

以下方法纯属娱乐

不经过服务器，完全前端层面的下载、导出方法

这种方法对于各浏览器处理会稍微不一样。(主要是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 头

网页里的下载、导出功能

以下方法纯属娱乐

猜你喜欢