下载文件，是一个常见的业务需求。主要是依靠 <a href='' download> 下载 </a>。

1. 介绍

• 语法

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

• 属性

2. JS 实现 download

• 整体思路

  手动生成 <a> 标签，为它添加href和download属性，触发 click 事件。从而实现下载。

• 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 流的获取，目前我接触到的，应该是两种形式吧：
  1> 从服务器端获取，在将它转为 blob 流；

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

  2> 从具体的 base64 转为 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;
  };