1. 程式人生 > >這應該是你見過的最全前端下載總結

這應該是你見過的最全前端下載總結

不讓 tac 耐心 地址欄 關於 console 可用 預覽圖 ner

這應該是你見過的最全前端下載總結

frontend-download-sample

自己整理的一些項目中遇到過的關於上傳和下載的一些Demo,大前端系列(也就是純前端 + node端完成的下載,只要獲取到數據下載工作全是前端來做),僅供給位看官參考,避免踩坑,即插即用,歡迎fork和star??,為這個倉庫添磚加瓦~(P.S. 個人認為如果沒寫過上傳下載其實還是挺麻煩的,這個基本能覆蓋大部分場景了~)

包括內容

  • 純前端下載
    • 基於a標簽
    • location && iframe
    • FileSaver ---> [推薦]
  • node端下載
    • 先下載到本地,再下載到瀏覽器
    • 直接流向瀏覽器下載 [推薦]

=======> frontend-download-sample

在這裏怕大家沒有耐心看下去,放一個強烈推薦的filesaver的Demo動態圖

技術分享圖片

寫在前面

上傳和下載個人認為在前端開發時稍微復雜一丟丟,需要額外處理一些事情而不是直接獲取數據渲染頁面,所以想著把平時遇到過的一些場景整理一下分享出來,大牛繞過,不喜勿噴~我平時在項目中接觸的也就是一些上傳圖片,上傳安裝包,下載圖片,下載安裝包以及整理數據生成excel文件下載下來。暫時還沒有接觸過其他類型的,所以本項目可能有一定的局限性,只是給大家提供一種思路或者方案,有其他想法歡迎評論~

純前端下載形式

顧名思義,純前端實現,也就是不依賴於任何後端。不過這種方式有一定的局限性,比如下載類型,寫法,數據形式等等。但是既然不依賴與後端,在可接受範圍之內還是很推薦使用的,畢竟簡單啊~

基於a標簽下載

說到簡單,那麽最簡單的就是這個了。那就是基於<a>標簽的下載文件方式,真的是超級簡單。使用方法如下:

href: 文件的絕對/相對地址
download: 文件名(可省略,省略後瀏覽器自動識別源文件名)
<a href=‘xxx.jpg‘ download=‘file.jpg‘>下載jpg圖片</a>
復制代碼

那麽既然這麽簡單,那肯定是存在問題的。

技術分享圖片上面這張圖片是官方提供的兼容性,目前只有FireFox和Chrome支持download屬性。至少這兩個對於開發者來說不陌生,占有量也很大,所以也還可以吧,但是接下來我又嘗試了一下這兩個瀏覽器的兼容性情況。技術分享圖片上面這張,是FireFox瀏覽器最新版,可以看到點擊下載文件會彈出一個對話框,之後點擊保存文件才可以進行下載,同時只能下載不能被瀏覽器打開的文件類型,如圖片、文本文件、html文件這種可以被打開的文件,是無法被下載的直接在瀏覽器進行預覽。技術分享圖片上面這張,是Chrome最新版,與FireFox相同,對於圖片文件和文本文件這種可以被瀏覽器打開的文件不會被下載,而excel和安裝包這種文件是可以被直接下載的,無需進行任何二次確認操作。

那麽能不能不讓瀏覽器預覽圖片(或pdf或txt文件)?

肯定能啊~為什麽呢?其實a標簽的href屬性還可以接受除了相對和絕對路徑之外的其他形式Url,比如下面我們要用到的DataUrl和BlobUrl。我們使用這種形式,就可以讓瀏覽器不預覽而直接下載圖片了,當然了操作起來更麻煩一些了就。

  • DataUrl
 // 首先,圖片轉base64
 // ./util.js
 
 // html頁面,將a標簽href屬性動態賦值為dataUrl
 <a id=‘downloadDataUrl‘ class="button is-dark">下載data:Url圖片</a>
 ...
 <script>
  const image = new Image();
  image.setAttribute("crossOrigin",‘Anonymous‘);
  image.src = ‘../files/test-download.png‘ + ‘?‘ + new Date().getTime();
  image.onload = function() {  
    const imageDataUrl = image2base64(image);  
    const downloadDataUrlDom = document.getElementById(‘downloadDataUrl‘);
    downloadDataUrlDom.setAttribute(‘href‘, imageDataUrl);
    downloadDataUrlDom.setAttribute(‘download‘, ‘download-data-url.png‘);
    downloadDataUrlDom.addEventListener(‘click‘, () => {
      console.log(‘下載文件‘);
    });
  }  
</script>
復制代碼

如下圖,可以看到不再是預覽文件,而是直接下載文件了。這裏面有一些坑,比如canvas.toDataUrl的一些問題以及解決辦法,我就不多說了,大家自己去看看。

技術分享圖片

  • BlobUrl 整體邏輯更復雜了,首先 文件 -> base64(dataUrl) -> blob -> blobUrl
 // 第一步:首先需要將文件轉換成base64,方法上面一樣
 // 第二步:將base64轉換成blob數據
 // DataUrl 轉 Blob數據
    function dataUrl2Blob(dataUrl) {
      var arr = dataUrl.split(‘,‘),
          mime = arr[0].match(/:(.*?);/)[1],
          bStr = atob(arr[1]),
          n = bStr.length,
          unit8Array = new Uint8Array(n);
      while (n--) {
        unit8Array[n] = bStr.charCodeAt(n);
      }
      return new Blob([unit8Array], { type: mime });
    } 
 // 第三步: 將blob數據轉換成BlobUrl
 URL.createObjectURL(imageBlobData);
 
 // 完整代碼
  <a id=‘downloadBlobUrl‘ class="button is-danger">下載blobUrl圖片</a>
  ...
  const image2 = new Image();  
  image2.setAttribute("crossOrigin",‘Anonymous‘);
  image2.src = ‘../files/test-download.png‘ + ‘?‘ + new Date().getTime();
  image2.onload = function() {  
    const imageDataUrl = image2base64(image2);
    const imageBlobData = dataUrl2Blob(imageDataUrl);
    const downloadDataUrlDom = document.getElementById(‘downloadBlobUrl‘);
    downloadDataUrlDom.setAttribute(‘href‘, URL.createObjectURL(imageBlobData));
    downloadDataUrlDom.setAttribute(‘download‘, ‘download-data-url.png‘);
    downloadDataUrlDom.addEventListener(‘click‘, () => {
      console.log(‘下載文件‘);
    });
  }
復制代碼

【總結】: Chrome在兼容性上更勝一籌,但是二者總體來說都存在一些問題,不能直接下載圖片和文本文件,但是畢竟這麽簡潔,你沒進行任何多余的操作,存在問題合情合理。同時,上面的幾種方式也看到了,dataUrl適合圖片的下載,而blobUrl雖然要麻煩一些,但是對於文本文件的下載還是非常有用的,你可以直接把要下載的內容轉換成blob數據,然後轉換成blobUrl進行下載,適用於.txt,.json等文件類型。

【建議】: 如果下載的需求是特殊文件類型,如安裝包,excel文件,並且可以存放在CDN又一個可訪問的url鏈接。那麽這種方式非常完美,當然,如果你可以接受上面所說的兼容性問題。同時如果你采用dataUrl或者blobUrl的時候,由於存在很多問題,比如cors之類的事情,建議可以使用這種方法,但是需要配合後端,也就是後端幫你轉換好,你直接拿轉換好的url來下載就行了。

location.href 和 iframe下載

上面這兩種非常好理解,就是在另一個窗口或者當前地址欄地址指向下載鏈接,下載鏈接要求是dataUrl或者blobUrl。只不過,iframe是更高級一些,也就是可以幫助我們做到無閃下載,作為開發者大家應該都懂,我就不多BB了。

技術分享圖片從上面這個動圖,可以看出來,這個方法其實還不如<a>標簽下載,為什麽這麽說呢,會因為a標簽方法雖然會預覽瀏覽器可以預覽的文件,但是如果進行適當轉化,還是能進行下載的。但是location這種方法無論是dataUrl還是blobUrl,只要是圖片、文本文件以及pdf等所有瀏覽器可以打開的文件,都會直接給你預覽,只能下載那些瀏覽器不支持預覽的那些文件。所以Just so so了。

iframe封裝無閃現下載方法

本質很簡單,就是不讓當前瀏覽器窗口執行下載操作,而是另開一個iframe進行文件的下載。但是這個iframe是用戶不可見的~
這裏需要註意,如果是純前端,建議不要進行圖片等瀏覽器可打開的文件下載,因為隱藏iframe裏打開你也看不到,也就是他的問題還是上面那些。可以進行excel、zip以及各種資源文件的下載。

// 無閃現下載excel
function download(url) {
  const iframe = document.createElement(‘iframe‘);
  iframe.style.display = ‘none‘;
  function iframeLoad() {
    console.log(‘iframe onload‘);
    const win = iframe.contentWindow;
    const doc = win.document;
    if (win.location.href === url) {
      if (doc.body.childNodes.length > 0) {
        // response is error
      }
      iframe.parentNode.removeChild(iframe);
    }
  }
  if (‘onload‘ in iframe) {
    iframe.onload = iframeLoad;
  } else if (iframe.attachEvent) {
    iframe.attachEvent(‘onload‘, iframeLoad);
  } else {
    iframe.onreadystatechange = function onreadystatechange() {
      if (iframe.readyState === ‘complete‘) {
        iframeLoad;
      }
    };
  }
  iframe.src = ‘‘;
  document.body.appendChild(iframe);

  setTimeout(function loadUrl() {
    iframe.contentWindow.location.href = url;
  }, 50);
}
復制代碼

如果你在項目裏需要進行無閃現下載,什麽都不用做,只需要調用 download(url),即可進行無閃現下載~親測可用

使用FileSaver強大的前端下載插件 -> 【強烈推薦】

FileSaver的下載方式完全是前端(Client-Side)的下載方式,它是基於Blob進行下載的,當然因為是基於前端下載,所以瀏覽器下載會有一定的限制,也就是Blob數據的大小不能過大,看看官網給的相關參數:

技術分享圖片

可以看到,基本對於支持的瀏覽器來說,大小可以達到 500MB+,應該已經可以滿足大部分需求了。如果文件確實很大,官網給出了替代方案StreamSaver,沒去研究過這個,不過作者既然推薦可能也很好,感興趣的可以去看看。

前面講到了,FileSaver是基於Blob的,其實並不準確,可以看一下官網:

技術分享圖片其實它支持Blob、File和Url進行下載,但是如果基於url了我也沒必要用FileSaver了,那個<a>標簽也挺好的是不?然後基於File一般都是特定場景,比如上傳的時候,才會用到FileReader之類的API,說實話我也沒怎麽用過,都是封裝的,所以這裏也不做介紹。開頭也說過了,希望小夥伴可以給這個倉庫添加東西啊,可以增加自己的下載Demo到這裏,非常歡迎

所以我這篇文章討論的下載,就是基於Blob。首要工作就是將文件轉換成Blob數據。下面幾個例子都是這樣:

FileSaver ---- 下載canvas

  • 依賴 - canvas-to-blob

這個Demo簡單點的話其實可以直接用canvas畫一個image在頁面上,然後再進行下載,但是那樣還不如直接下載圖片了,所以麻煩一些,寫一個canvas白板,然後下載我們自己繪制的內容並且起名字進行下載。

技術分享圖片

 // 生成下載的文件名 
 function generateFilename(id, mime) {
    const filename = document.getElementById(id).value || document.getElementById(id).placeholder;
    return filename + mime;
  }
  const canvasDownloadDom = document.getElementById(‘download-canvas‘);
  canvasDownloadDom.addEventListener(‘click‘, () => {
    const canvas = document.getElementById(‘canvas‘);
    const filename = generateFilename(‘canvasName‘, ‘.png‘);
    if (canvas.toBlob) {
      // 調用方法將canvas轉換成blob數據
      canvas.toBlob(
          function (blob) {
            // 調用FileSaver方法下載
            saveAs(blob, filename);
          },
          ‘image/png‘
      );
    }   
  });
復制代碼

代碼非常簡單,感興趣的小夥伴可以去看看每個插件內部的代碼。我這裏就是應用級別的示例了。

FileSaver ---- 直接下載圖片

直接下載圖片就是將圖片轉換成Blob數據,然後進行下載。

技術分享圖片

// FileSaver 下載文件
  const image = new Image();  
  image.setAttribute("crossOrigin",‘Anonymous‘);
  image.src = ‘../files/test-download.png‘ + ‘?‘ + new Date().getTime();
  image.onload = function() {  
    const imageDataUrl = image2base64(image);
    const imageBlobData = dataUrl2Blob(imageDataUrl);
    const downloadImageDom = document.getElementById(‘download-image‘);
    downloadImageDom.addEventListener(‘click‘, () => {
      saveAs(imageBlobData, ‘test-download.png‘);
    });
  }
復制代碼

這代碼就更簡單了,就是前面<a>標簽下載Blob數據的代碼,數據轉換是一樣的,只不過下載使用的是FileSaver。

FileSaver ---- 下載文本文件

下載文本文件就更容易了,因為JavaScript支持直接將字符串構造成Blob對象。

const textBlob = new Blob(["your target string"], {type: "text/plain;charset=utf-8"});
復制代碼

技術分享圖片下載下來的txt文件長這樣:技術分享圖片

 // FileSaver 下載文本文件
  const txtDownloadDom = document.getElementById(‘download-txt‘);
  txtDownloadDom.addEventListener(‘click‘, () => {
    const textarea = document.getElementById(‘textarea‘);
    const filename = generateFilename(‘textareaName‘, ‘.txt‘);
    const textBlob = new Blob([textarea.value], {type: "text/plain;charset=utf-8"});
    saveAs(textBlob, filename);
  });
復制代碼

FileSaver ---- 下載Excel文件(搭配js-xlsx)

前面的都相對簡單一些,但是其實除了下載圖片,可能平時也沒什麽業務場景需要到。接下來要說的可是所有商務系統幾乎都能遇到的了,那就是 —— 下載報表,也就是Excel文件。這裏面就使用FileSaver配合js-xlsx來進行excel的純前端下載工作~

技術分享圖片下載下來的文件長這樣:

技術分享圖片

// 下載excel文件
  const excelDownloadDom = document.getElementById(‘download-excel‘);
  excelDownloadDom.addEventListener(‘click‘, () => {
    // 找到table節點調用方法轉化數據
    const wb = XLSX.utils.table_to_book(document.querySelector(‘#table-excel‘));
    // 生成excel數據
    const wbout = XLSX.write(wb, { bookType: ‘xlsx‘, bookSST: true, type: ‘array‘ });
    try {
      // 下載excel文件
      saveAs(new Blob([wbout], { type: ‘application/octet-stream‘ }), ‘table-excel.xlsx‘);
    } catch (e) {
      if (typeof console !== ‘undefined‘) console.log(e, wbout)
    }
  });
復制代碼

這裏面我只是介紹如何用FileSaver在前端下載excel文件,至於js-xlsx如何將數據轉化成excel的這裏不做介紹。我只是簡單的調用了js-xlsx的將table轉成excel的方法, js-xlsx還有很多高級功能,有這方面需求的去看看官方文檔js-xlsx就好了~

node端配合下載(大前端)

帶後端支持的下載就要輕松很多了,為什麽呢,因為上面所有純前端下載都可以與後端進行配合使用,也就是後端生成對應的下載鏈接下載數據返回給前端,前端根據設計方案按需使用上面幾種方式下載,肯定能下載成功。
那麽node端配合下載肯定是要下載點不一樣的東西了——那就是文件流。

有很多場景,那就是大文件不是存在於CDN,而是以文件流的形式存放在內存。那麽就沒有對應的下載鏈接,下載對應文件的時候,後端返回的就是文件流。而node裏為我們提供Stream支持各種流操縱。所以我們可以在node端直接進行文件的下載。

先下載到本地在從瀏覽器下載

  • fs下載Excel技術分享圖片下載下來的Excel文件:技術分享圖片
// 第一步:構造數據
const data = [
  [1, 2, 3],
  [true, false, null, ‘sheetjs‘],
  [‘foo‘, ‘bar‘, new Date(‘2014-02-19T14:30Z‘), ‘0.3‘],
  [‘baz‘, null, ‘qux‘],
];
// 第二步:生成excel的Buffer數據
const buffer = xlsx.build([{ name: ‘mySheetName‘, data }]);

// 第三步:寫文件到本地
const tmpExcel = `filename.xlsx`;

fs.writeFileSync(
  tmpExcel,
  buffer,
  {
    encoding: ‘utf8‘,
  },
  err => {
    if (err) throw new Error(err);
  },
);
// 第四步:從本地讀取文件下載到瀏覽器
res.setHeader(‘Content-disposition‘, `attachment; filename="${tmpExcel}"`);
res.setHeader(‘Content-Type‘, ‘application/octet-stream‘);
// pipe generated file to the response
fs.createReadStream(tmpExcel).pipe(res);
// 下載完成後刪除文件
fs.unlinkSync(tmpExcel);
復制代碼

下載excel在node端我使用的不是js-xlsx而是node-xlsx,因為它構造數據非常簡單,功能也很強大,十分推薦大家使用~

  • fs下載文件

這裏場景不是很容易描述,因為Demo我都是將文件放到本地目錄的,所以我讀取本地文件再下載到本地再下載到瀏覽器,我這不是有病嗎。。。一般場景是文件以文件流的形式存在內存裏,然後我們通過接口下載到本地再從本地下載到瀏覽器。或者是上傳文件保存到本地,然後在從本地進行相關操作,這裏就不寫示例代碼了。

node端直接流向瀏覽器下載【推薦】

node端,我使用的是express框架(其他的框架也都一樣),如果你是文件流直接過來的,那麽直接調用res.attachment()下載文件流,如果是文件path,那麽可以直接res.download(filepath)。具體見demo

  • 直接下載Excel

上面過程其實多經歷了一步,為什麽呢?因為拿到buffer之後我們其實就可以直接將buffer流向瀏覽器下載了~這裏我用的是Express框架,直接使用res.attachment()方法就可以了。

技術分享圖片下載下來的文件與上面一模一樣我就不展示了。

按照我的理解,第二種明顯要比第一種好很多為什麽還要列出第一種呢?我個人覺得,第一種雖然一定會犧牲一定的性能,但是先下載到本地就可以對文件進行一些校驗,比如文件是否完整,文件名之類的是否合法,還有些時候的場景可能。畢竟不是所有的下載場景都像Demo這樣簡單。存在即合理,所以還是都羅列出來。

// 第一步:構造數據
const data = [
  [1, 2, 3],
  [true, false, null, ‘sheetjs‘],
  [‘foo‘, ‘bar‘, new Date(‘2014-02-19T14:30Z‘), ‘0.3‘],
  [‘baz‘, null, ‘qux‘],
];
// 第二步:生成buffer
const buffer = xlsx.build([{ name: ‘mySheetName‘, data }]);
// 第三步:直接下載
res.status(200)
  .attachment(‘bufferExcel.xlsx‘)
  .send(buffer);
復制代碼
// 上面下載代碼等同於下面這段代碼(nodejs原生代碼)
res.setHeader(‘Content-disposition‘, `attachment; filename="${tmpExcel}"`);
res.setHeader(‘Content-Type‘, ‘application/octet-stream‘);
res.end(buffer);
復制代碼
  • 直接下載文件流

這裏我把文件安裝包放在本地了,然後我先讀取文件內容同時下載到瀏覽器~

// 第一種,已知文件路徑直接下載
try {
  const packagePath = ‘static/download/iTerm2-3_2_5.zip‘;
  res.download(path.join(rootDir, packagePath));
} catch (e) {
  console.error(e);
}
復制代碼
// 第二種,讀取本地文件流向瀏覽器
res.setHeader(‘Content-disposition‘, `attachment; filename="download-package.zip"`);
res.setHeader(‘Content-Type‘, ‘application/octet-stream‘);
fs.createReadStream(path.join(rootDir, packagePath), ‘utf-8‘).pipe(res);
復制代碼

request

最後給大家安利一個將Stream API使用到極致的Http(Https)請求庫 —— request。

// 不加這一行下載下來的文件沒有後綴
res.setHeader(‘Content-disposition‘, ‘attachment; filename=node-v8.14.0-linux-x64.tar.gz‘);
request(‘https://npm.taobao.org/mirrors/node/v8.14.0/node-v8.14.0-linux-x64.tar.gz‘)
  .pipe(res);
復制代碼

這裏我為了省時間,就用了自己以前搭過的一個腳手架Next-Antd-Scafflod,直接在這裏寫的Demo。你可以理解我在打廣告,你點進去給個star我也不介意??。

總結

看到這裏無論怎麽樣都十分感謝了,總結的不怎麽樣,可以理解為自我總結文章吧。如果對大家能有那麽一點點啟發那就更好了。最後如果有興趣或者有疑問,可以留言或者直接去倉庫裏提~

Star??地址:frontend-download-sample

這應該是你見過的最全前端下載總結