下載文件也榄，是一個常見的業(yè)務(wù)需求。主要是依靠 <a href='' download> 下載 </a>。

1. 介紹

• 語法

    <a href="demo.txt" download="filename">下載</a>
  

• 屬性

2. JS 實(shí)現(xiàn) download

• 整體思路

  手動生成 <a> 標(biāo)簽犁功，為它添加href和download屬性，觸發(fā) click 事件婚夫。從而實(shí)現(xiàn)下載浸卦。

• download 代碼示例

  const dowmloadWithBlob = (blob) => {
    const fileName = 'demo.xml';
    const msSaveBlob = _.get(window, 'navigator.msSaveBlob');
    if (msSaveBlob) {
      // compatible with IE
      msSaveBlob(blob, fileName);
    } else {
      // compatible with Chrome & FireFox
      const linkElement = document.createElement('a');
      linkElement.download = fileName;
      linkElement.href = window.URL.createObjectURL(blob);
      linkElement.click();
      window.URL.revokeObjectURL(linkElement.href);
    }
  };
  

• blob 流

  至于這個 blob 流的獲取，目前我接觸到的请敦，應(yīng)該是兩種形式吧：
  1> 從服務(wù)器端獲取镐躲，在將它轉(zhuǎn)為 blob 流；

   fetch('//api.demo')
     .then((res) => res.blob())
     .then((blob) => {
       dowmloadWithBlob(blob);
     });
  

  2> 從具體的 base64 轉(zhuǎn)為 blob 流侍筛；

    interface IProps {
      base64Data: string;
      contentType?: string;
      sliceSize?: number;
    }
   export default (props: IProps) => {
    const { base64Data, contentType = '', sliceSize = 512 } = props;
  
    const byteCharacters = atob(base64Data);
    const byteArrays = [];
  
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);
      const byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
  
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
    }
    
    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
  };