JS下載文件常用的方式

alaege 發布于2019-08-23 14:37 / 2991人閱讀

摘要：下載附件，，，，，，應該是實際工作中經常遇到一個問題這里使用過幾種方式分享出來僅供參考初次寫可能存在問題有問題望指出主要了解的幾個知識點響應頭設置這里只需要涉及跨域的時才使用，用于暴露中能夠獲取到響應頭字段先來介紹常用方式這里下載文

下載附件（image，doc，docx， excel，zip，pdf），應該是實際工作中經常遇到一個問題；這里使用過幾種方式分享出來僅供參考; 初次寫可能存在問題,有問題望指出

? 主要了解的幾個知識點：

http 響應頭設置

Content-Disposition

Access-Control-Expose-Headers 這里只需要涉及跨域的時才使用，用于暴露JavaScript中能夠獲取到響應頭字段

Blob 、 FileReader

URL

先來介紹常用方式：這里下載.doc文檔為例，其它都類似

利用 iframe 或 a 連接 服務端代碼

// nodejs
const http = require("http");
const fs = require("fs");
const path = require("path");
http.createServer(function (req, res) { 
    let filename = encodeURIComponent("微信多開的步驟.doc");
    // 下面兩個主要在跨域情況下，需要設置的
    res.setHeader("Access-Control-Allow-Origin", "*");
     res.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
    
    // 設置響應頭
    res.setHeader("Content-Type", "application/zip;charset=UTF-8");
    res.setHeader("Content-Disposition", `attachment; filename=${filename}`);
    let fs.readFile(path.resolve(__dirname, `./微信多開的步驟.doc`), function (err, data) {
      if (err) throw err;
      res.end(data);});
}).listen(3000);

? Content-Disposition 消息頭指示回復的內容該以何種形式展示，是以內聯的形式（即網頁或者頁面的一部分），還是以附件的形式下載并保存到本地。

? 大概流程：
? 1 下載時瀏覽器會嘗試去找下響應頭中 Content-Disposition ；
? 2 如果不存在，首先嘗試去預覽方式打開該文件，如果能就直接顯示否則以附件的形式下載并保存；

? 注意：指定在下載文件名中文情況下，必須先進行編碼；

// iframe 
var downloadFileUrl = "http://localhost:3000"
var elemIF = document.createElement("iframe");
elemIF.src = downloadFileUrl;
elemIF.style.display = "none";
document.body.appendChild(elemIF);

// a 
var a = document.createElement("a");
a.href = downloadFileUrl;
a.click();

上述兩種方式僅僅就是發送一個請求，主要依賴后端的支持；對不需要精確知道文件下載的狀態，上面方式就能滿足下載；

大家可能有疑問，iframe 不是可以通過 onload 來捕獲加載的完成狀態？
先來看看 load 適用哪些對象?

load

? W3C 對 load 定義



Type
load



Sync / Async
Async


Bubbles
No


Trusted Targets

Window, Document, Element

Type	load
Sync / Async	Async
Bubbles	No
Trusted Targets	Window, Document, Element

適用對象：window，Document，Element 那么對于我們下載的文件并在其范圍；

如果需要捕獲文件下載的進度以及文件下載完成的狀態，需要使用下面的方式；

XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onprogress = function (event) {
    console.log(Math.round(event.loaded / event.total * 100) + "%");
};
xhr.responseType = "arraybuffer";
xhr.addEventListener("readystatechange", function (event) {
    if (xhr.status === 200 && xhr.readyState === 4) {
        // 獲取響應頭主要獲取附件名稱
        var contentDisposition = xhr.getResponseHeader("content-disposition");
        // 獲取類型類型和編碼  
        var contentType = xhr.getResponseHeader("content-type");
        // 構造blob對象,具體看頭部提供的鏈接地址
        var blob = new Blob([xhr.response], {
            type: contentType
        });
        var url = window.URL.createObjectURL(blob);
        // 獲取文件夾名
        var regex = /filename=[^;]*/;
        var matchs = contentDisposition.match(regex);
        if (matchs) {
            filename = decodeURIComponent(matchs[0].split("=")[1]);
        } else {
            filename = +Date.now() + ".doc";
        }
        var a = document.createElement("a");
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
        // dosomething
    }
})
xhr.send();

上述對比第一種方式，通過 onprogress 捕獲下載進度（界面通過顯示進度條來提升體驗）；通過 readystatechange 監聽下載完后并可以做其它的事情；

注意： 必須指定 responseType 類型,可以是arraybuffer 或 blob 否則會出現錯誤問題比如 zip,pdf文件下載之后打不開提示錯誤的格式; .doc,.excel文件內容亂碼等;

GPU云服務器云服務器服務器上傳文件的方式 js讀語音文件下載 js下載服務器文件 js繼承的幾種方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100868.html

NPM — JavaScript 的包管理器

摘要：是的默認模塊管理器，一個命令行下的軟件，用來安裝和管理模塊，同時也可以管理其他開放式的模塊代碼。的包管理器可以查看所有可使用的命令。發布記得在推之前先登錄要不然會報錯。最后需要把文件里面的刪除掉要不然上傳時會忽略掉打包的文件。本文主要介紹npm的常用命令，以及如何發布一些常用的js模塊化代碼到npm上面方便日后的使用，和舉例如何把一個vue組件打包發布到npm到最后下載到本地使用的過...

ZweiZhao 2019-08-21 17:49 評論0 收藏0
后端開發者的Vue學習之路（四）

摘要：文件是當前項目的首頁文件。以后可能還會有全局注冊組件等操作。在上面使用了這是一個預定義的路徑，代表目錄。而為了使用好這個實例，不要修改的，不然裝載完內容后，對應的管理區域會指向不明，而導致渲染失敗。目錄上節內容回顧： npm 介紹安裝常用命令：補充： ...

番茄西紅柿 2019-04-23 11:51 評論0 收藏0
ES6常用語法到Node淺談

摘要：是解釋性語言因服務端的應用，而貫通了前后臺。關于和聲明的變量和聲明的變量整體，會被提升到當前作用域的頂部。做后臺服務端，處理請求的代碼，得自己實現了。為提高下載速度，可通過來切換鏡像源。 JS是解釋性語言,因node服務端的應用，而貫通了前后臺。【ES6】關于var和let var: 1.var聲明的變量和function聲明的變量整體，會被提升到當前作用域的頂部。 2...

weizx 2019-08-21 17:07 評論0 收藏0
腳本的加載和執行

摘要：現在對的使用非常普遍，任何一個站點都會請求大量的腳本，而加載和執行的方式也是各不相同，希望讀完這篇文章可以對常用的加載和執行方式有一個整體的認識。總結上文主要介紹了動態創建腳本和的方式去創建異步加載和執行腳本的方式。在打開一個站點的時候，瀏覽器會去加載各種資源。現在對JS的使用非常普遍，任何一個站點都會請求大量的JS腳本，而加載和執行的方式也是各不相同，希望讀完這篇文章可以對常用的加...

TANKING 2019-08-26 11:42 評論0 收藏0