web 前端导出excel

一.导出文件,使用web 前端,在firefox 和Chrome 中使用  a 标签(或者js)就可以实现,如下:其中,

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

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

<html>
<head>
</head>
<body>
<a id="test" download="download.txt" href="data:text/txt;charset=utf-8,My name is LiHuan">download</a>
</body>
</html>

 

 

 

二.

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

问题是: 如何分行, 分列?

理论上 : 分列使用 , 号分割, 分行用 \n .

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

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

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

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

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

加上一切都正常了,

————————————————

这里有两个改变

1. 页面的charset 需设置成gb2312

2. 加上 \ufeff BOM 头

<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="栏位1,col2,col3\nvalue1,value2,value3";
	str = encodeURIComponent(str);
	aLink.href="data:text/csv;charset=utf-8, \ufeff"+str;
	aLink.click();
}
</script>
</head>
<body>
<a id="test" download="download.csv" onclick="clickDownload(this)" href="#">download</a>
</body>
</html>

  

  

 

 

posted @ 2020-03-11 09:01  叶'子  阅读(821)  评论(0编辑  收藏  举报