js实现txt/excel文件下载

出于安全考虑，JS无法直接调用FileAPI写文件到磁盘，但是却可以通过下载来变相实现保存功能。
JS要实现下载功能，一般都是这么几个过程：生成下载的URL，动态创建一个A标签，并将其href指向生成的URL，然后触发A标签的单击事件，这样就会弹出下载对话框，从而实现了一个下载的功能。

HTML5的download属性

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

<a href="data:text/txt;charset=utf-8,测试下载纯文本" rel="external nofollow" rel="external nofollow" rel="external nofollow" download="测试.txt" >下载1</a>
<a href="data:text/txt;charset=utf-8,测试下载纯文本" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下载2</a>

可以发现，下载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...） 处理，但是这个插件体积比较大，也可以让后端帮忙处理