首页 > 代码库 > 导出文件的功能

导出文件的功能

2024-10-20 02:36:39   210人阅读

　　首先是导出文本

<!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 . 这个逗号后面的就是保存在文件中的内容了。

 

 

 

 




导出表格（）

<!doctype html>
<html lang="en">
<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" onclick="clickDownload(this)" download="downlaod.csv" href="http://www.mamicode.com/#">download</a>
</body>
</html>



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

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

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

1. 页面的charset 需设置成gb2312

2. 加上 \ufeff BOM 头

 

 

 

 

 

 

 

以上方法谷歌会有bug  不太兼容a的down  需要替换成

 

	　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 var blob = new Blob([data], { type: ‘text/csv‘ }); //new way
							 var csvUrl = URL.createObjectURL(blob);
							 document.getElementById("mylink").href = http://www.mamicode.com/csvUrl;



导出文件的功能


联系
我们