为了安全起见，JS不能直接调用FileAPI将文件写入磁盘，但可以通过下载变相实现保存功能。在JS中实现下载功能，一般有几个过程：生成下载URL，动态创建一个A标签，并将其href指向生成的URL，然后触发A标签的点击事件，从而出现一个下载对话框会弹出框，从而实现下载功能。HTML5的下载属性非常重要。它可以指定下载文件名，并告诉浏览器目标链接是下载链接，而不是普通链接。我们可以通过查看以下代码来了解差异：下载1Download2可以找到，download1按钮可以实现下载，而当点击download2链接时，会直接在浏览器中打开文件内容。JS生成CSV文件并下载CSV是一种逗号分隔的表格文件格式，Excel可以很好的支持。由于其简单的文件格式，它通常用于简单的表格。最重要的是，它是一种纯文本格式，无需借助第三方库就可以用JS轻松生成。不考虑兼容性的保存CSV方法：/***保存CSV文件*@paramscontent文件内容*@paramsfileName保存的文件名*/functionsaveCSV(content,fileName){vara=document.createElement('a');a.href='data:text/csv;charset=utf-8,\ufeff'+encodeURIComponent(content);a.download=文件名；a.click();}虽然我们使用的是UTF-8编码，但是下载之后你会发现用文本编辑器打开是没有问题的，但是用Excel打开就是乱码：原因是一个ufeffBOMheader丢失，所以在data中添加一个\ufeff解决了文本换行的问题。textchangingcsv最大的问题就是如何处理换行符，很简单，用`\n`,`\r`然后用encodeURIComponent编码就可以了。大部分浏览器可能没有问题，但某些较旧的Chrome在下载指定下载时可能无法生效。这时候可以使用blob来解决：（测试此方法，在MicrosoftEdge浏览器和IE11中测试。下载）考虑兼容性的保存CSV方法：/***保存CSV文件*@paramscontentcsv文件内容*@paramssaveName保存的文件名*/functionsaveCSV(content,fileName){varblob=newBlob(['\ufeff'+content],{type:'text/csv,charset=UTF-8'});openDownloadDialog(blob,文件名);}该方法在MicrosoftEdge浏览器中可以下载，但在IE11下仍然无法下载DownloadpackagedownloadfunctionconstopenDownloadDialog=(url,fileName)=>{if(typeofurl==='object'&&urlinstanceofBlob){url=URL.createObjectURL(url);//创建blob地址}constaLink=document.createElement('a');aLink.href=url;aLink.download=文件名;aLink.click();};从txt文件下载文本文件，只需要修改文件类型functionsaveTXT(content,fileName){varblob=newBlob(['\ufeff'+content],{type:'text/txt,charset=UTF-8'});openDownloadDialog(blob,fileName);}注意保存文件的文件名后缀会影响打开如果是.csv文件名，默认打开方式是excel，.txt文件末尾默认打开方式是一个文本文件。所以这一点需要注意参考代码我自己包在项目downLoadTools.jsconstopenDownloadDialog=(url,fileName)=>{if(typeofurl==='object'&&urlinstanceofBlob){url=URL.创建对象URL（网址）；//创建blob地址}constaLink=document.createElement('a');aLink.href=url;aLink.download=文件名;aLink.click();};exportdefault{/***保存CSV文件*@paramscontentcsv文件内容*@paramsfileName保存的文件名*//**TODO:Excel在office中还是会乱码，wps显示是正常，后面可以通过插件js-xlsx(https://github.com/SheetJS/sheetjs)处理**/saveCSV:(content,fileName)=>{constblob=newBlob(['\ufeff'+内容],{type:'text/csv,charset=UTF-8'});openDownloadDialog(blob,`${fileName}.csv`);},saveTXT:(content,fileName)=>{//consthref='data:text/txt;charset=utf-8,\ufeff'+encodeURIComponent(content);//即浏览器不支持constblob=newBlob(['\ufeff'+content],{type:'text/tet,charset=UTF-8'});openDownloadDialog(blob,`${fileName}.txt`);}};页面引用importd来自“@/utils/downLoadTools”的ownLoadTools；//导入//导出txt文件downLoadTools.saveTXT('测试导出txt文件','文件名');//csv是一个字符串，最终会下载一个文件名。txt文件//导出excel文件office还是会乱码wps显示正常consttableHead=['id','username','联系方式'];consttableData=[['1','user1','133XXXX0001'],['2','User2','133XXXX0002'],['3','User3','133XXXX0003']]letheadText=tableHead.join(',');letbodyText='';tableData.forEach(item=>{bodyText=bodyText+'\n'+item.join(',');})consttext=headText+bodyText;down??loadTools.saveCSV(text,'上传用户排名');测试结果1.txt文件正常。2、excel在金山wps中显示正常，但在office中仍然会出现乱码。如果金山wpsoffice需要优化这个问题，建议使用第三方插件js-xlsx（https://github.com/SheetJS/sh...）处理，但是这个插件比较大，也可以由后端处理
