出于安全考慮，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 csv csv文件內容* @params saveName 保存的文件名*/ function saveCSV(csv, saveName){var a = document.createElement('a');a.href = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(csv);a.download = saveName;a.click(); } 雖然我們用的是UTF-8編碼，下載后你會發現，用文本編輯器打開沒問題，但是用Excel打開亂碼：
原因就是少了一個ufeffBOM頭，所以在data里面添加一個\ufeff解決了

文字換行問題

文字換csv的最大問題就是如何處理換行，很簡單，使用`\n`,`\r`后再用encodeURIComponent編碼一下就可以了。

大部分瀏覽器可能都沒啥問題，但是一些比較老的Chrome可能下載的時候指定的download就是不生效，此時可以用blob來解決：（測試此方法測試在微軟Edge瀏覽器和IE11下都無法下載）

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

/*** 保存CSV文件* @params csv csv文件內容* @params saveName 保存的文件名*/ function saveCSV(csv, saveName) {var blob = new Blob(['\ufeff' + csv], {type: 'text/csv,charset=UTF-8'});openDownloadDialog(blob, saveName)； }

此方法測試在微軟Edge瀏覽器可以實現下載，但是在IE11下還是無法下載

封裝下載函數

const openDownloadDialog = (url, saveName) => {if (typeof url === 'object' && url instanceof Blob) {url = URL.createObjectURL(url); // 創建blob地址}const aLink = document.createElement('a');aLink.href = url;aLink.download = saveName;aLink.click(); };

txt文件

下載text文件只需要修改一下文件類型就行了

function saveTXT(csv, saveName) {var blob = new Blob(['\ufeff' + csv], {type: 'text/txt,charset=UTF-8'});openDownloadDialog(blob, saveName)； }

注意事項

保存文件的文件名后綴會影響打開方式，如果是.csv的文件名，默認打開為excel，.txt文件結尾的默認打開方式為text文件。所以這點需要注意

參考代碼

我自己在項目中的封裝

downLoadTools.js

const openDownloadDialog = (url, saveName) => {if (typeof url === 'object' && url instanceof Blob) {url = URL.createObjectURL(url); // 創建blob地址}const aLink = document.createElement('a');aLink.href = url;aLink.download = saveName;aLink.click(); }; export default {/*** 保存CSV文件* @params csv csv文件內容* @params saveName 保存的文件名*/saveCSV: (csv, saveName) => {const blob = new Blob(['\ufeff' + csv], {type: 'text/csv,charset=UTF-8'});openDownloadDialog(blob, `${saveName}.csv`);},saveTXT: (csv, saveName) => {// const href = 'data:text/txt;charset=utf-8,\ufeff' + encodeURIComponent(csv); // ie瀏覽器不支持const blob = new Blob(['\ufeff' + csv], {type: 'text/tet,charset=UTF-8'});openDownloadDialog(blob, `${saveName}.txt`);} };

頁面引用

import downLoadTools from '@/utils/downLoadTools'; // 引入downLoadTools.saveTXT(csv, '文件名'); // csv是一個字符串， 最終會下載一個 文件名.txt 的文件

總結

以上是生活随笔為你收集整理的js实现txt/excel文件下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。