【前端文件下载的几种方式】

前端文件下载的几种方式

• • • 具体实现
    • • 1、window.open(url, target)
      • 2、location.href
      • 3、超链接下载
      • 4、使用 form 表单下载
      • 5、二进制流数据下载
      • 6、file-saver 下载
      • 7、本地下载（el-upload 文件未上传到服务器）
      • 8、使用 canvas 进行图片下载

        前端实现文件下载通常分为两种情形：

        • 一种是后端直接提供了文件地址，通过浏览器打开就可以实现下载。
        • 另外一种是需要发送请求，后端返回二进制流数据，前端解析二进制流数据，生成 URL，实现下载。

          具体实现

          1、window.open(url, target)

          • 第一个参数 url 就是文件地址；
          • 第二个参数 target，指定加载资源的位置，参数值主要有四种分别是：
            • _self：当前页面加载。
            • _blank：通常在新标签页面打开，但用户可以通过配置选择在新窗口打开，默认值。
            • _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与_self相同 。
            • _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。

              文件下载不太推荐使用_blank，因为使用该关键字，当前窗口会闪现出一个无标题的新窗口，虽然下载完成后，新窗口会消失，但是比较影响用户体验感，不推荐。

              代码如下：

              function download(url) {
                // window.open(url)
                // window.open(url, "_blank");
                window.open(url, "_self");
                // window.open(url, "_parent");
                // window.open(url, "_top")
              }
              

              2、location.href

              代码如下：

              function download(url) {
                location.href = url;
              }
              

              3、超链接下载

              代码如下：

              function download(url) {
                let a = document.createElement("a");
                // 指定下载链接
                a.href = url;
                // 指定文件名称
                a.download = fileName;
                a.click();
                a.remove();
              }
              

              注意：

              • 如果下载链接是由后端直接提供的地址，前端指定的文件名称一般不会生效，默认是后端指定的文件名称，如：接口的响应头中的content-disposition字段指定attachment;filename=xxx.xls;
              • 文件下载/打开过程中出现的各种警告：
                • 文件打开过程中提示文件损坏（代码性错误）：一般是指定的文件名称和文件本身的文件名不一致
                • Edge 浏览器提示无法安全下载：下载链接和当前系统的协议不一致，如果是下载链接的协议是 http，需要改成 https。

                  4、使用 form 表单下载

                  function download(url) {
                    let form = document.createElement("form");
                    form.setAttribute("action", url);
                    document.querySelector("body").appendChild(form);
                    console.log(form);
                    form.submit();
                  }
                  

                  需要注意的是，该 url 请求只能是 get 请求

                  5、二进制流数据下载

                  代码如下：

                  function download(url, data, fileName, type) {
                    // 加载状态
                    loading = true;
                    // 文件下载接口请求一般需要指定responseType为"blob"，否则可能出现文件损坏甚至无法打开的问题
                    axios
                      .post(url, data, {
                        responseType: "blob",
                      })
                      .then((res) => {
                        loading = false;
                        let blob = new Blob([res.data], {
                          // 如果后端没有返回下载文件类型，则需要手动设置
                          type: res.headers["content-type"] || type,
                        });
                        let URL = window.URL || window.webkitURL; //兼容IE
                        let href = URL.createObjectURL(blob); //创建下载的链接
                        let a = document.createElement("a");
                        a.href = href;
                        // 指定文件名称有效
                        a.download = fileName;
                        a.click();
                        a.remove(); // 删除临时元素
                        URL.revokeObjectURL(a.href); //清空内存
                      })
                      .catch((e) => {
                        loading = false;
                      });
                  }
                  

                  6、file-saver 下载

                  import { saveAs } from "file-saver"
                  download(url, data, fileName, type) {
                    // 加载状态
                    this.loading = true;
                    // 文件下载接口请求一般需要指定responseType为"blob"，否则可能出现文件损坏甚至无法打开的问题
                    axios
                      .post(url, data, {
                        responseType: "blob",
                      })
                      .then((res) => {
                        this.loading = false;
                        let blob = new Blob([res.data], {
                          // 如果后端没有返回下载文件类型，则需要手动设置
                          type: res.headers["content-type"] || type,
                        });
                        saveAs(blob, fileName);
                      })
                      .catch((e) => {
                        this.loading = false;
                      });
                  }
                  

                  7、本地下载（el-upload 文件未上传到服务器）

                  handlePreview(file){
                    this.loading = true;
                    // el-upload组件中文件没有上传到服务器，文件状态显示为ready
                    try{
                      if(file.status == "ready"){
                        // 第一种
                        // let blob = new Blob([file.raw], {type: file.raw.type });
                        // // saveAs(blob, fileName);
                        // 第二种
                        // let blob = new Blob([file.raw], {type: file.raw.type })
                        // let URL = window.URL || window.webkitURL;
                        // let url = URL.createObjectURL(blob);
                        // let a = document.createElement("a");
                        // a.href = url;
                        // a.download = file.name;
                        // a.click();
                        // URL.revokeObjectURL(a.href); //清理内存
                        // a.remove(); // 删除临时元素
                        // 第三种
                        saveAs(file.raw, file.name);
                        this.loading = false;
                        return;
                      }
                    }catch(){
                      this.loading = false;
                    }
                  }
                  

                  8、使用 canvas 进行图片下载

                  • 为什么：防止浏览器自动打开图片
                  • 处理 canvas 绘制图片模糊的问题：引入 hidpi-canvas-polyfill 插件

                    function donwloadIMG() {
                      let img = document.querySelector("img");
                      // 创建一个画布
                      let canvas = document.createElement("canvas");
                      // 设置画布的展示
                      let context = canvas.getContext("2d");
                      canvas.width = img.width;
                      canvas.height = img.height;
                      canvas.style.width = img.width + "px";
                      canvas.style.height = img.height + "px";
                      // 处理canvas绘制图片模糊的问题-引入hidpi-canvas-polyfill插件
                      let ratio = getPixelRatio(context);
                      context.drawImage(img, 0, 0, img.width * ratio, img.height * ratio);
                      const url = canvas.toDataURL("image/jpeg", 1);
                      // 添加到body标签上进行展示下载的图片
                      document.body.appendChild(canvas);
                      // 此处是下载代码
                      let a = document.createElement("a");
                      a.href = url;
                      a.download = "1.jpeg";
                      a.click();
                    }
                    function getPixelRatio(ctx) {
                      let backingStore =
                        ctx.backingStorePixelRatio ||
                        ctx.webkitBackingStorePixelRatio ||
                        ctx.mozBackingStorePixelRatio ||
                        ctx.msBackingStorePixelRatio ||
                        ctx.oBackingStorePixelRatio ||
                        1;
                      let ratio = (window.devicePixelRatio || 1) / backingStore;
                      return ratio;
                    }
                    

                    
                    （图片来源网络，侵删）
                    
                    （图片来源网络，侵删）
                    
                    （图片来源网络，侵删）