資訊專欄INFORMATION COLUMN
摘要：下載附件，，，，，，應(yīng)該是實(shí)際工作中經(jīng)常遇到一個(gè)問題這里使用過幾種方式分享出來僅供參考初次寫可能存在問題有問題望指出主要了解的幾個(gè)知識(shí)點(diǎn)響應(yīng)頭設(shè)置這里只需要涉及跨域的時(shí)才使用，用于暴露中能夠獲取到響應(yīng)頭字段先來介紹常用方式這里下載文
下載附件（image，doc，docx， excel，zip，pdf），應(yīng)該是實(shí)際工作中經(jīng)常遇到一個(gè)問題；這里使用過幾種方式分享出來僅供參考; 初次寫可能存在問題,有問題望指出
? 主要了解的幾個(gè)知識(shí)點(diǎn)：
http 響應(yīng)頭設(shè)置
Content-Disposition
Access-Control-Expose-Headers 這里只需要涉及跨域的時(shí)才使用，用于暴露JavaScript中能夠獲取到響應(yīng)頭字段
Blob 、 FileReader
URL
先來介紹常用方式： 這里下載.doc文檔為例，其它都類似
利用 iframe 或 a 連接 服務(wù)端代碼// nodejs
const http = require("http");
const fs = require("fs");
const path = require("path");
http.createServer(function (req, res) {
let filename = encodeURIComponent("微信多開的步驟.doc");
// 下面兩個(gè)主要在跨域情況下，需要設(shè)置的
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
// 設(shè)置響應(yīng)頭
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 消息頭指示回復(fù)的內(nèi)容該以何種形式展示，是以內(nèi)聯(lián)的形式（即網(wǎng)頁(yè)或者頁(yè)面的一部分），還是以附件的形式下載并保存到本地。
? 大概流程：
? 1 下載時(shí)瀏覽器會(huì)嘗試去找下響應(yīng)頭中 Content-Disposition ；
? 2 如果不存在，首先嘗試去預(yù)覽方式打開該文件 ，如果能就直接顯示否則以附件的形式下載并保存；
? 注意：指定在下載文件名中文情況下，必須先進(jìn)行編碼；
JS// 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();
上述兩種方式僅僅就是發(fā)送一個(gè)請(qǐng)求，主要依賴后端的支持；對(duì)不需要精確知道文件下載的狀態(tài)，上面方式就能滿足下載；
大家可能有疑問，iframe 不是可以通過 onload 來捕獲加載的完成狀態(tài) ？
先來看看 load 適用哪些對(duì)象?
? W3C 對(duì) load 定義
| Type | load |
|---|---|
| Sync / Async | Async |
| Bubbles | No |
| Trusted Targets | Window, Document, Element |
適用對(duì)象：window，Document，Element 那么對(duì)于我們下載的文件并在其范圍；
如果需要捕獲文件下載的進(jìn)度以及文件下載完成的狀態(tài)，需要使用下面的方式；
XMLHttpRequestvar 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) {
// 獲取響應(yīng)頭主要獲取附件名稱
var contentDisposition = xhr.getResponseHeader("content-disposition");
// 獲取類型類型和編碼
var contentType = xhr.getResponseHeader("content-type");
// 構(gòu)造blob對(duì)象,具體看頭部提供的鏈接地址
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();
上述對(duì)比第一種方式，通過 onprogress 捕獲下載進(jìn)度（界面通過顯示進(jìn)度條來提升體驗(yàn)）；通過 readystatechange 監(jiān)聽下載完后并可以做其它的事情；
注意： 必須指定 responseType 類型,可以是arraybuffer 或 blob 否則會(huì)出現(xiàn)錯(cuò)誤問題 比如 zip,pdf文件下載之后打不開提示錯(cuò)誤的格式; .doc,.excel文件內(nèi)容亂碼等;
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100868.html
摘要：是的默認(rèn)模塊管理器，一個(gè)命令行下的軟件，用來安裝和管理模塊，同時(shí)也可以管理其他開放式的模塊代碼。的包管理器可以查看所有可使用的命令。發(fā)布記得在推之前先登錄要不然會(huì)報(bào)錯(cuò)。最后需要把文件里面的刪除掉要不然上傳時(shí)會(huì)忽略掉打包的文件。 本文主要介紹npm的常用命令，以及如何發(fā)布一些常用的js模塊化代碼到npm上面方便日后的使用，和舉例如何把一個(gè)vue組件打包發(fā)布到npm到最后下載到本地使用的過...
摘要：文件是當(dāng)前項(xiàng)目的首頁(yè)文件。以后可能還會(huì)有全局注冊(cè)組件等操作。在上面使用了這是一個(gè)預(yù)定義的路徑，代表目錄。而為了使用好這個(gè)實(shí)例，不要修改的，不然裝載完內(nèi)容后，對(duì)應(yīng)的管理區(qū)域會(huì)指向不明，而導(dǎo)致渲染失敗。目錄 上節(jié)內(nèi)容回顧： npm 介紹 安裝 常用命令： 補(bǔ)充： ...
摘要：是解釋性語(yǔ)言因服務(wù)端的應(yīng)用，而貫通了前后臺(tái)。關(guān)于和聲明的變量和聲明的變量整體，會(huì)被提升到當(dāng)前作用域的頂部。做后臺(tái)服務(wù)端，處理請(qǐng)求的代碼，得自己實(shí)現(xiàn)了。為提高下載速度，可通過來切換鏡像源。 JS是解釋性語(yǔ)言,因node服務(wù)端的應(yīng)用，而貫通了前后臺(tái)。 【ES6】 關(guān)于var和let var: 1.var聲明的變量和function聲明的變量整體，會(huì)被提升到當(dāng)前作用域的頂部。 2...
摘要：現(xiàn)在對(duì)的使用非常普遍，任何一個(gè)站點(diǎn)都會(huì)請(qǐng)求大量的腳本，而加載和執(zhí)行的方式也是各不相同，希望讀完這篇文章可以對(duì)常用的加載和執(zhí)行方式有一個(gè)整體的認(rèn)識(shí)。總結(jié)上文主要介紹了動(dòng)態(tài)創(chuàng)建腳本和的方式去創(chuàng)建異步加載和執(zhí)行腳本的方式。 在打開一個(gè)站點(diǎn)的時(shí)候，瀏覽器會(huì)去加載各種資源?，F(xiàn)在對(duì)JS的使用非常普遍，任何一個(gè)站點(diǎn)都會(huì)請(qǐng)求大量的JS腳本，而加載和執(zhí)行的方式也是各不相同，希望讀完這篇文章可以對(duì)常用的加...
閱讀 4002·2021-11-24 09:38
閱讀 1271·2021-10-19 11:42
閱讀 1859·2021-10-14 09:42
閱讀 2187·2019-08-30 15:44
閱讀 572·2019-08-30 14:04
閱讀 2922·2019-08-30 13:13
閱讀 1983·2019-08-30 12:51
閱讀 997·2019-08-30 11:22
