操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

通過下載文件到本地的方法（單文件）

更新時間：2019年03月17日 14:44:11 作者：小閑

這篇文章主要介紹了通過下載文件到本地的方法（單文件），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

最近在做一個文件下載的功能，這里把做的過程中用的技術和坑簡要總結下。

1. 單文件下載(a標簽)

同源單文件

針對單文件的情況下，同源的文件，可以通過 < a> 標簽的 屬性下載文件

js;">
 const elt = document.createElement('a');
 elt.setAttribute('href', url);
 elt.setAttribute('download', 'file.png');
 elt.style.display = 'none';
 document.body.appendChild(elt);
 elt.click();
 document.body.removeChild(elt);

但是這個方案并不適用于非同源的資源，此時它相當于普通的超鏈接，點擊會跳轉到資源頁面，而不是下載。

非同源圖片

如果不存在CORS問題, 可以借助Blob實現下載(構造xhr請求文件地址, 以Blob的形式接收)：

function downloadWithBlob(url) {
 fetch(url).then(res => res.blob().then(blob => {
  var a = document.createElement('a');
  var url = window.URL.createObjectURL(blob);
  var filename = 'file.png';
  a.href = url;
  a.download = filename;
  a.click();
  window.URL.revokeObjectURL(url);
 }));

}

如果存在CORS問題，可以考慮使用 將圖片轉換成 編碼之后再通過 標簽的 屬性下載

function downloadPic(url) {
 const img = new Image;
 const canvas = document.createElement('canvas');
 const ctx = canvas.getContext('2d');
 img.onload = function() {
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(this, 0, 0);
  const elt = document.createElement('a');
  elt.setAttribute('href', canvas.toDataURL('image/png'));

  elt.setAttribute('download', 'file.png');
  elt.style.display = 'none';
  document.body.appendChild(elt);
  elt.click();
  document.body.removeChild(elt);
 };
 img.crossOrigin = 'anonymous';
 img.src = url;
}

2. 單文件下載()

方式是在頁面內隱藏, 然后將下載地址加載到中, 從而觸發瀏覽器的下載行為

 const iframe = document.createElement('iframe');

 iframe.src = url;
 iframe.style.display = 'none';
 document.body.appendChild(iframe);

但是這里發現js保存文件流到本地js保存文件流到本地，即使是同域的圖片，也無法完成下載，這是為啥呢？

這里就有個上面的a鏈接下載沒有提到的問題：什么樣的鏈接才能觸發瀏覽器的下載:

url如何觸發瀏覽器自動下載

一個url能否觸發瀏覽器自動下載，主要看該請求響應頭 是否滿足，一般是看-和-Type這兩個消息頭：

只要url滿足上述觸發的要求，那么都可以通過的形式來下載

3. 代理服務處理下載

如果后端自己也能控制的話，或者后端能配合的話，可以寫一個代理服務，在后端去請求文件數據，然后設置好相應的 ， 然后前端請求代理服務來做下載。

前端(假設代理服務接口是)：

 const downloadUrl = 'http://exampale.com/download?url=' + encodeURIComponent(url) + '&name=xxx';
 const elt = document.createElement('a');

 elt.setAttribute('href', downloadUrl);
 elt.setAttribute('download', 'file.png');
 ... 

后端

const url = decodeURIComponent(req.query.url);
http.get(url, (response) => {
 res.setHeader('Content-disposition', 'attachment;filename=' + req.query.name);
 res.setHeader('Content-type', 'application/octet-stream');
 response.pipe(res);
});

單文件的處理先寫到這里，多文件的下載下篇在寫。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。