JS彈出下載對話框以及實現常見文件類型的下載

1.寫在前面

JS 要實現下載功能，一般都是這麼幾個過程：生成下載的 URL，動態創建一個 A 標籤，並將其 href 指向生成的 URL，然後觸發 A 標籤的單擊事件，這樣就會彈出下載對話框，從而實現了一個下載的功能。

這裡所說的下載，有時候也可以理解為保存。出於安全考慮，JS 肯定無法直接調用 FileAPI 寫文件到磁碟，但是卻可以通過下載來變相實現保存功能。

2.幾個備用知識點

2.1. JS 觸發單擊事件

既然是用 A 標籤模擬，那麼肯定要知道 JS 如何主動觸發單擊事件。

最簡單的觸發單擊事件肯定是，平時在不需要考慮兼容性的場合我都是這麼乾的，但是畢竟這個方法有兼容性（具體兼容性如何沒做過測試），所以還是要掌握一個通用的方法。

以下代碼是網上比較容易找到的一段代碼，我在前面加了一段的判斷：

2.2. HTML5 的 download 屬性

補充說明：

模式下貌似不生效；

鏈接指向一些第三方鏈接時也不會生效，具體有待研究；

2.3. JS 彈出下載對話框

假如給我們的不是一個下載地址而是一個 blob 對象，我們可以通過來給對象生成臨時 URL，並且可以利用 HTML5 的屬性來指定下載的文件名，好傢夥，有了這 2 個東西我們就可以實現一個 「萬能」 的彈出下載對話框方法了。

綜上所述，我又在的基礎上繼續簡單封裝了一個方法，使用如下：

openDownloadDialog(url, saveName)

openDownloadDialog(blob, saveName)

代碼如下：

3.JS 實現常見文件類型的下載

3.1. JS 生成 CSV 文件並下載

csv 是一種逗號分隔的表格文件格式，可以很好的被 Excel 支持，由於其文件格式簡單，所以經常用在簡單的表格上面。最重要的是它是一種純文本格式，可以很輕鬆地用 JS 來生成而不藉助第三方庫。

3.1.1. CSV 格式示例

如下：

excel 打開效果如下：

3.1.2. 初次嘗試

首先想到的是使用來實現，先看一下下載純文本：

以上代碼沒毛病，然後再換成 csv。換 csv 的最大問題就是如何處理換行，很簡單，用編碼一下就可以了：

3.1.3. 解決 CSV 亂碼問題

雖然我們用的是 UTF-8 編碼，下載後你會發現，用文本編輯器打開沒問題，但是用 Excel 打開亂碼：

別急，原因就是少了一個BOM 頭，改成這樣就沒問題了：

3.1.4. 繼續解決下載文件名的問題

大部分瀏覽器可能都沒啥問題，但是一些比較老的 Chrome 可能下載的時候指定的 download 就是不生效，此時可以用 blob 來解決：

建議一般情況下都用這種方法，穩妥一點。

3.1.5. 最後總結

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

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

3.2. JS 實現純文本的下載保存

掌握了 csv，再去下載純文本基本上就沒啥問題了，就是換一下文件類型而已：

3.3. JS 實現圖片的下載保存

網頁上一般要保存圖片都是從 canvas 裡面拿到的圖片數據，通過轉換為 base64 數據：

4.擴展

關於文件保存，不嫌麻煩的話，GitHub 上面有個比較出名的庫：https://github.com/eligrey/FileSaver.js/

demo：https://eligrey.com/demos/FileSaver.js/

作者：我是小茗同學

原文：http://www.cnblogs.com/liuxianan/p/js-download.html

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！