前端实现文件下载的解决方案

前端实现文件下载的解决方案

• a标签实现文件下载

  H5中的a标签加download属性可以实现文件的下载。download 属性定义了下载链接的地址，href 属性必须在a标签中指定。属性同样可以指定下载文件的名称。文件名称没有限定值，浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。该属性需要下载资源是同源的。

  <a href="/images/logo.png" download="/images/logo.png">
  

  a标签的方式对浏览器有局限性，可查看 https://www.runoob.com/tags/att-a-download.html 。

• 使用第三方库来实现：download.js

  • Github 地址：https://github.com/rndme/download

  • 本站下载地址：https://static.runoob.com/download/download-master.zip

  • CDN 库：https://cdn.staticfile.org/downloadjs/1.4.8/download.min.js

  • NPM 安装：npm install downloadjs

    download.js 库提供了 download() 函数用于下载文件。

    下载内容可以是 URL、字符串、Blob 或类型化的数据数组，或者通过将文件数据表示为 base64 或 url 编码字符串的 dataURL。

    无论输入格式如何，download() 都使用指定的文件名和 mime 信息以与使用 Content-Disposition HTTP 标头的服务器相同的方式保存文件。

    download(data, strFileName, strMimeType)
    

    实例

    • 文本

      // 将字符串存储到 dlText.txt 文件中并下载： 
      download("hello world", "dlText.txt", "text/plain");
      
      // dataURL 文本实例：
      download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain");
      
      // blob 文本实例：
      download(new Blob(["hello world"]), "dlTextBlob.txt", "text/plain");
      
      // url 实例：
      download("/robots.txt");
      
      // UInt8 文本数组实例：
      const str= "hello world";
      const arr= new Uint8Array(str.length);
      str.split("").forEach(function(a,b){
        arr[b]=a.charCodeAt();
      });
      
      download( arr, "textUInt8Array.txt", "text/plain" );
      

    • HTML

      // html 字符串实例：
      download(document.documentElement.outerHTML, "dlHTML.html", "text/html");
      
      // html Blob 实例：
      download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");
      

    • 二进制文件

      // 图片 URL：
      download("/diff6.png");
      

• 通过window.open/window.location.href的方式

  注意： 文件名称为中文时要使用 encodeURI 转码；下载文件格式为 图片 或 txt 时文件会直接打开

  // 根据文件名下载：
  window.location.href = `${url}/文件名.xlsx`;
  
  // 文件名有中文：
  window.location.href = `${url}/${encodeURI("文件名.xlsx")}`;
  

• let upload = function (res, defaultName, type) {
      let fileName = null,fileInfoBool = false;
      const content = res;
      const blob = new Blob([content]);
      const date=new Date();
      if (!fileInfoBool){
          fileName = defaultName+"."+type;
      }
      if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          window.open = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
      } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
      }
  }
  
  export default upload
  

  使用方式：

  import upload from './upload.js';
  
  upload(res, '模板', 'xls'); // res 是后台返回的文件流