有時候，網頁上需要提供將當前頁面上的數據導出為本地文件的功能，例如將頁面上的一個表格導出為csv文件。這個功能看似簡單，實際上卻沒有什么直接的方法。由于導出文件的操作（比如瀏覽文件目錄，創建本地文件等）已經超出了瀏覽器內JS解釋器的職責范圍，需要和操作系統交互了，所以如果沒有瀏覽器提供接口支持，是沒法導出文件的。
但是，有一個巧妙的辦法，就是使用<a>元素（https://stackoverflow.com/questions/13405129/javascript-create-and-save-file ）。 這個辦法巧妙結合了兩個小技巧：1. http鏈接可以以下載文件的方式打開 2. 通過URL.createObjectURL(object)可以為一個JS File/Blob對象創建一個 URL。

代碼如下：

function download(text, name, type) {var a = document.getElementById("a");var file = new Blob([text], {type: type});a.href = URL.createObjectURL(file);a.download = name;a.dispatchEvent(new MouseEvent('click', {'bubbles': false, 'cancelable': true})); }<a href="" id="a">click here to download your file</a> <button οnclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>

?代碼實現的功能包括：

頁面上放一個隱藏的 <a>元素

當用戶要導出文件時（比如點擊了導出按鈕），根據導出內容創建一個Blob對象并產生對應的url

將 a 元素的href設置為上述url， 并設置 download屬性

最后觸發一個a元素的點擊事件，就會彈出保存文件的窗口。

轉載于:https://www.cnblogs.com/a-distant-bright-star/p/7286782.html

總結

以上是生活随笔為你收集整理的如何将前端数据保存到文件的全部內容，希望文章能夠幫你解決所遇到的問題。

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