excel文件下载下来损坏 js_js实现txt/excel文件下载

出于安全考虑，JS无法直接调用FileAPI写文件到磁盘，但是却可以通过下载来变相实现保存功能。

JS要实现下载功能，一般都是这么几个过程：生成下载的URL，动态创建一个A标签，并将其href指向生成的URL，然后触发A标签的单击事件，这样就会弹出下载对话框，从而实现了一个下载的功能。

HTML5的download属性

这个属性很重要，它可以指定下载文件名，并且可以告诉浏览器目标链接是一个下载链接，不是一个普通链接，我们看下面代码就能看出区别了：

下载1

下载2

可以发现，下载1按钮能够实现下载，点击下载2链接时直接在浏览器打开文件内容了。

JS生成CSV文件并下载

csv是一种逗号分隔的表格文件格式，可以很好的被Excel支持，由于其文件格式简单，所以经常用在简单的表格上面。最重要的是它是一种纯文本格式，可以很轻松地用JS来生成而不借助第三方库。

不考虑兼容性的保存CSV方法：

/**

* 保存CSV文件

* @params content 文件内容

* @params fileName 保存的文件名

*/

function saveCSV(content, fileName){

var a = document.createElement('a');

a.href = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(content);

a.download = fileName;

a.click();

}

虽然我们用的是UTF-8编码，下载后你会发现，用文本编辑器打开没问题，但是用Excel打开乱码：

原因就是少了一个ufeffBOM头，所以在data里面添加一个\ufeff解决了

文字换行问题

文字换csv的最大问题就是如何处理换行，很简单，使用`\n`,`\r`后再用encodeURIComponent编码一下就可以了。

大部分浏览器可能都没啥问题，但是一些比较老的Chrome可能下载的时候指定的download就是不生效，此时可以用blob来解决：(测试此方法测试在微软Edge浏览器和IE11下都无法下载)

考虑兼容性的保存CSV方法：

/**

* 保存CSV文件

* @params content csv文件内容

* @params saveName 保存的文件名

*/

function saveCSV(content, fileName)

{

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

openDownloadDialog(blob, fileName)；

}

此方法测试在微软Edge浏览器可以实现下载，但是在IE11下还是无法下载

封装下载函数

const openDownloadDialog = (url, fileName) => {

if (typeof url === 'object' && url instanceof Blob) {

url = URL.createObjectURL(url); // 创建blob地址

}

const aLink = document.createElement('a');

aLink.href = url;

aLink.download = fileName;

aLink.click();

};

txt文件

下载text文件只需要修改一下文件类型就行了

function saveTXT(content, fileName)

{

var blob = new Blob(['\ufeff' + content], {type: 'text/txt,charset=UTF-8'});

openDownloadDialog(blob, fileName)；

}

注意事项

保存文件的文件名后缀会影响打开方式，如果是.csv的文件名，默认打开为excel，.txt文件结尾的默认打开方式为text文件。所以这点需要注意

参考代码

我自己在项目中的封装

downLoadTools.js

const openDownloadDialog = (url, fileName) => {

if (typeof url === 'object' && url instanceof Blob) {

url = URL.createObjectURL(url); // 创建blob地址

}

const aLink = document.createElement('a');

aLink.href = url;

aLink.download = fileName;

aLink.click();

};

export default {

/**

* 保存CSV文件

* @params content csv文件内容

* @params fileName 保存的文件名

*/

/** TODO: excel在 office下还是会乱码， wps显示正常 后期可通过插件js-xlsx(https://github.com/SheetJS/sheetjs) 处理**/

saveCSV: (content, fileName) => {

const blob = new Blob(['\ufeff' + content], {type: 'text/csv,charset=UTF-8'});

openDownloadDialog(blob, `${fileName}.csv`);

},

saveTXT: (content, fileName) => {

// const href = 'data:text/txt;charset=utf-8,\ufeff' + encodeURIComponent(content); // ie浏览器不支持

const blob = new Blob(['\ufeff' + content], {type: 'text/tet,charset=UTF-8'});

openDownloadDialog(blob, `${fileName}.txt`);

}

};

页面引用

import downLoadTools from '@/utils/downLoadTools'; // 引入

// 导出txt文件

downLoadTools.saveTXT('测试导出txt文件', '文件名'); // csv是一个字符串， 最终会下载一个 文件名.txt 的文件

// 导出excel文件 office还是会乱码 wps显示正常

const tableHead = ['id','用户名', '联系方式'];

const tableData = [

['1','用户1','133XXXX0001'],

['2','用户2','133XXXX0002'],

['3','用户3','133XXXX0003']

]

let headText = tableHead.join(',');

let bodyText = '';

tableData.forEach(item => {

bodyText = bodyText + '\n'+ item.join(',');

})

const text = headText + bodyText;

downloadTools.saveCSV( text, '上传用户排名');

测试结果

1.txt 文件正常

2.excel在金山wps显示正常，在office中还是会存在乱码的问题

金山wps

office

如果需要优化这个问题建议使用第三方插件js-xlsx(https://github.com/SheetJS/sh...) 处理，但是这个插件体积比较大，也可以让后端帮忙处理