前端处理文件下载

最新推荐文章于 2024-09-02 12:33:51 发布
最新推荐文章于 2024-09-02 12:33:51 发布
阅读量835 收藏 5
点赞数 4
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lilylry/article/details/136345581
版权

前端处理文件下载

一、a标签下载

<body>

  <button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">a标签下载</button>

  <script>

    function downloadEvt(url, fileName = '未知文件') {

      const el = document.createElement('a');

      el.style.display = 'none';

      el.setAttribute('target', '_blank');

      fileName && el.setAttribute('download', fileName);

      el.href = url;

      console.log(el);

      document.body.appendChild(el);

      el.click();

      document.body.removeChild(el);

    }

  </script>

</body>

优点：

  • 可以下载txt、png、pdf等类型文件
  • download的属性是HTML5新增的属性
    href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式；所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)

缺点：

  • a标签只能做get请求，所有url有长度限制
  • 无法获取下载进度
  • 无法在header中携带token做鉴权操作
  • 跨域限制
  • 无法判断接口是否返回成功
  • IE兼容问题

二、form标签下载

<body>

  <button onclick="inputDownloadEvt('get', 'http://192.168.66.183:13666/download', 'name', 'HAP.pdf')">form标签下载</button>

  <script>

    /**

     * @param {String} method - 请求方法get/post

     * @param {String} url

     * @param {String} paramsKey - 请求参数名

     * @param {String} paramsValue - 请求参数值

    */

    function inputDownloadEvt(method, url, paramsKey, paramsValue) {

      const form = document.createElement('form');

      form.style.display = 'none';

      form.setAttribute('target', '_blank');

      form.setAttribute('method', method);

      form.setAttribute('action', url);

      const input = document.createElement('input');

      input.setAttribute('type','hidden');

      // 对于get请求 最终会拼成http://192.168.66.183:13666/download?name=HAP.pdf

      input.setAttribute('name', paramsKey);

      input.setAttribute('value', paramsValue);

      form.appendChild(input);

      document.body.appendChild(form);

      form.submit();

      document.body.removeChild(form);

    }

  </script>

</body>

优点

  • 兼容性好，不会出现URL长度限制问题
  • form标签get和post都可以

缺点

  • 无法获取下载进度
  • 无法在header中携带token做鉴权操作
  • 无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）
  • 无法判断接口是否返回成功

三、window.open下载

<body>

  <button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">window.open下载</button>

  <script>

    function downloadEvt(url) {

      window.open(url, '_self');

    }

  </script>

</body>

优点

  • 简单方便直接

缺点

  • 会出现URL长度限制问题
  • 需要注意url编码问题
  • 无法获取下载进度
  • 无法在header中携带token做鉴权操作
  • 无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）
  • 无法判断接口是否返回成功

四、iframe下载

<body>

  <button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">iframe下载</button>

  <script>

    // 批量下载时，动态创建a标签，会始终只下载一个文件，改为动态创建iframe标签

    function downloadEvt(url) {

      const iframe = document.createElement('iframe');

      iframe.style.display = 'none';

      iframe.src = url;

      document.body.appendChild(iframe);

      setTimeout(() => {

        document.body.removeChild(iframe);

      }, 200);

    }

  </script>

</body>

优点

  • 可以下载txt、png、pdf等类型文件

缺点

  • 无法获取下载进度
  • 无法在header中携带token做鉴权操作
  • 无法判断接口是否返回成功
  • 兼容、性能差

五、location.href下载

<body>

  <button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">location.href下载</button>

  <script>

    function downloadEvt(url) {

      window.location.href = url;

    }

  </script>

</body>

优点

  • 简单方便直接
  • 可以下载大文件(G以上)

缺点

  • 会出现URL长度限制问题
  • 需要注意url编码问题
  • 无法获取下载进度
  • 无法在header中携带token做鉴权操作
  • 无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）
  • 无法判断接口是否返回成功

六、ajax下载（Blob - 利用Blob对象生成Blob URL）

如果后端需要做token验证，那么a、form、iframe、window.open、location.href都无法在header中携带token，这时候可以使用ajax来实现。

<body>

  <button οnclick="downLoadAjaxEvt('get', 'http://192.168.66.183:13666/download?name=HAP.pdf')">ajax下载</button>

  <script>

    function downloadEvt(url, fileName = '未知文件') {

      const el = document.createElement('a');

      el.style.display = 'none';

      el.setAttribute('target', '_blank');

     /**

       * download的属性是HTML5新增的属性

       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。

       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式

       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)

       */

      fileName && el.setAttribute('download', fileName);

      el.href = url;

      console.log(el);

      document.body.appendChild(el);

      el.click();

      document.body.removeChild(el);

    };

    // 根据header里的contenteType转换请求参数

    function transformRequestData(contentType, requestData) {

      requestData = requestData || {};

      if (contentType.includes('application/x-www-form-urlencoded')) {

        // formData格式：key1=value1&key2=value2，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是对于数组参数的处理

        let str = '';

        for (const key in requestData) {

          if (Object.prototype.hasOwnProperty.call(requestData, key)) {

            str += `${key}=${requestData[key]}&`;

          }

        }

        return encodeURI(str.slice(0, str.length - 1));

      } else if (contentType.includes('multipart/form-data')) {

        const formData = new FormData();

        for (const key in requestData) {

          const files = requestData[key];

          // 判断是否是文件流

          const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;

          if (isFile) {

            for (let i = 0; i < files.length; i++) {

              formData.append(key, files[i]);

            }

          } else {

            formData.append(key, files);

          }

        }

        return formData;

      }

      // json字符串{key: value}

      return Object.keys(requestData).length ? JSON.stringify(requestData) : '';

    }

    /**

     * ajax实现文件下载、获取文件下载进度

     * @param {String} method - 请求方法get/post

     * @param {String} url

     * @param {Object} [params] - 请求参数，{name: '文件下载'}

     * @param {Object} [config] - 方法配置

     */

     function downLoadAjaxEvt(method = 'get', url, params, config) {

      const _method = method.toUpperCase();

      const _config = Object.assign({

        contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 请求头类型

        fileName: '未知文件',                                        // 下载文件名(必填，若为空，下载下来都是txt格式)

        async: true,                                                // 请求是否异步-true异步、false同步

        token: 'token'                                              // 用户token

      }, config);

      const queryParams = transformRequestData(_config.contentType, params);

      const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;

      const ajax = new XMLHttpRequest();

      ajax.open(_method, _url, _config.async);

      ajax.setRequestHeader('Authorization', _config.token);

      ajax.setRequestHeader('Content-Type', _config.contentType);

      // responseType若不设置，会导致下载的文件可能打不开

      ajax.responseType = 'blob';

      // 获取文件下载进度

      ajax.addEventListener('progress', (progress) => {

        const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);

        const msg = `下载进度 ${percentage}%...`;

        console.log(msg);

      });

      ajax.onload = function () {

        if (this.status === 200 || this.status === 304) {

          // 通过FileReader去判断接口返回是json还是文件流

          const fileReader = new FileReader();

          fileReader.onloadend = (e) => {

            if (this.getResponseHeader('content-type').includes('application/json')) {

              const result = JSON.parse(fileReader.result || '{message: 服务器出现问题，请联系管理员}');

              alert(result.message);

            } else {

              // 两种解码方式，区别自行百度: decodeURIComponent/decodeURI（主要获取后缀名，否则低版本浏览器会一律识别为txt，导致下载下来的都是txt）

              const _fileName = decodeURIComponent((this.getResponseHeader('content-disposition') || '; filename="未知文件"').split(';')[1].trim().slice(9));

              /**

              * Blob.type一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

              * 对于pdf：type为application/pdf  同时 a标签 不设置download属性, 可以直接预览

              */

              const blob = new Blob([this.response]);

              const href = URL.createObjectURL(blob);

              downloadEvt(href, _fileName);

              // 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象

              URL.revokeObjectURL(href);

            }

          };

          // 调用readAsText读取文件，少了readAsText将不会触发onloadend事件

          fileReader.readAsText(this.response);

        } else {

          alert('服务器出现问题，请联系管理员');

        }

      };

      // send(string): string：仅用于 POST 请求

      ajax.send(queryParams);

    }

  </script>

</body>

  • responseType
    responseType若不设置，会导致下载的文件可能打不开ajax.responseType = 'blob';
  • new FileReader()
    1.文件下载的接口存在返回失败的情况（例如：服务器连接不上、接口报错等），对于下载失败的情况我们需要在页面上弹出失败提示，而不是将失败信息写进文件里等用户打开，这时候可以使用FileReader去根据响应头里的content-type判断接口是否返回成功；
    2.如果content-type返回application/json表示文件流返回失败，此时直接在页面上弹出失败信息（图6-1）；如果是其他格式就认为文件流已经返回。

  • this.getResponseHeader('content-disposition')
    后端返回的文件名称，主要获取后缀名，否则某些浏览器会一律识别为txt，导致下载下来的都是txt
  • new Blob([this.response], {type: '文件类型'}) Application Type 对照表
    1.Blob.type一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串；
    2.对于pdf：type为application/pdf 同时 a标签 不设置download属性(图6-3), 可以直接预览（图6-4）
  • axios中其实已经提供了获取文件上传和下载进度的事件，这里我使用的是原生ajax（axios雷同，只需要修改请求方法）。

优点

  • 可以下载txt、png、pdf等类型文件
  • 可以在header中携带token做鉴权操作
  • 可以获取文件下载进度
  • 可以判断接口是否返回成功

缺点

  • 兼容性问题，IE10以下不可用，注意Safari浏览器,官网给出
    Safari has a serious issue with blobs that are of the type application/octet-stream
  • 将后端返回的文件流全部获取后才会下载

七、ajax下载（Data URL - base64编码后的url）

<body>

  <button οnclick="downLoadAjaxEvt('get', 'http://192.168.66.183:13666/download?name=HAP.pdf')">ajax下载(base64)</button>

  <script>

    function downloadEvt(url, fileName = '未知文件') {

      const el = document.createElement('a');

      el.style.display = 'none';

      el.setAttribute('target', '_blank');

      /**

       * download的属性是HTML5新增的属性

       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。

       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式

       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)

       */

      fileName && el.setAttribute('download', fileName);

      el.href = url;

      console.log(el);

      document.body.appendChild(el);

      el.click();

      document.body.removeChild(el);

    };

    // 根据header里的contenteType转换请求参数

    function transformRequestData(contentType, requestData) {

      requestData = requestData || {};

      if (contentType.includes('application/x-www-form-urlencoded')) {

        // formData格式：key1=value1&key2=value2，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是对于数组参数的处理

        let str = '';

        for (const key in requestData) {

          if (Object.prototype.hasOwnProperty.call(requestData, key)) {

            str += `${key}=${requestData[key]}&`;

          }

        }

        return encodeURI(str.slice(0, str.length - 1));

      } else if (contentType.includes('multipart/form-data')) {

        const formData = new FormData();

        for (const key in requestData) {

          const files = requestData[key];

          // 判断是否是文件流

          const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;

          if (isFile) {

            for (let i = 0; i < files.length; i++) {

              formData.append(key, files[i]);

            }

          } else {

            formData.append(key, files);

          }

        }

        return formData;

      }

      // json字符串{key: value}

      return Object.keys(requestData).length ? JSON.stringify(requestData) : '';

    }

    /**

     * ajax实现文件下载、获取文件下载进度

     * @param {String} method - 请求方法get/post

     * @param {String} url

     * @param {Object} [params] - 请求参数，{name: '文件下载'}

     * @param {Object} [config] - 方法配置

     */

     function downLoadAjaxEvt(method = 'get', url, params, config) {

      const _method = method.toUpperCase();

      const _config = Object.assign({

        contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 请求头类型

        fileName: '未知文件',                                       // 下载文件名(必填，若为空，下载下来都是txt格式)

        async: true,                                               // 请求是否异步-true异步、false同步

        token: 'token'                                             // 用户token

      }, config);

      const queryParams = transformRequestData(_config.contentType, params);

      const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;

      const ajax = new XMLHttpRequest();

      ajax.open(_method, _url, _config.async);

      ajax.setRequestHeader('Authorization', _config.token);

      ajax.setRequestHeader('Content-Type', _config.contentType);

      // responseType若不设置，会导致下载的文件可能打不开

      ajax.responseType = 'blob';

      // 获取文件下载进度

      ajax.addEventListener('progress', (progress) => {

        const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);

        const msg = `下载进度 ${percentage}%...`;

        console.log(msg);

      });

      ajax.onload = function () {

        if (this.status === 200 || this.status === 304) {

          // 通过FileReader去判断接口返回是json还是文件流

          const fileReader = new FileReader();

          fileReader.readAsDataURL(this.response);

          fileReader.onload = () => {

            if (this.getResponseHeader('content-type').includes('application/json')) {

              alert('服务器出现问题，请联系管理员');

            } else {

              // 两种解码方式，区别自行百度: decodeURIComponent/decodeURI（主要获取后缀名，否则某些浏览器会一律识别为txt，导致下载下来的都是txt）

              const _fileName = decodeURIComponent((this.getResponseHeader('content-disposition') || '; filename="未知文件"').split(';')[1].trim().slice(9));

              // 也可以用FileSaver（需提前引入https://github.com/eligrey/FileSaver.js）: saveAs(fileReader.result, _fileName);

              downloadEvt(fileReader.result, _fileName);

            }

          }

        } else {

          alert('服务器出现问题，请联系管理员');

        }

      };

      // send(string): string：仅用于 POST 请求

      ajax.send(queryParams);

    }

  </script>

</body>

  • fileSaver

优点

  • 可以下载txt、png、pdf等类型文件
  • 可以在header中携带token做鉴权操作
  • 可以获取文件下载进度
  • 可以判断接口是否返回成功

缺点

  • 兼容性问题，IE10以下不可用
  • 将后端返回的文件流全部获取后才会下载

八、大文件下载注意点

  • fileSaver
    批量下载时，总量不超过2G可以用这个，但是每个浏览器允许下载的最大文件不一样~
  • ajax下载
    如果后端需要对下载接口做token鉴权，此时需要使用ajax获取文件流（第六、七点），可以了解下ajax文件下载原理。
    简单来说，文件下载依赖浏览器特性。前端获取到服务器端生成的字节流，此时数据是存在于js的内存中的，是不可以直接保存在本地的，利用Blob对象和window.URL.createObjectURL对象生成一个虚拟的URL地址，然后在利用浏览器的特性进行下载。
    因此对于ajax下载大文件时，会出现浏览器崩溃情况，此时可以考虑使用链接直接下载或使用分片下载
  • 链接下载
    链接下载需要后端一边去下载要打包的文件，一边把打包好的东西写入这个链接。存在的问题是，如果文件很大，那么这个链接需要一直保持，相当于这个接口一直开着没有结束；而且一旦中间出了什么问题，已经下载的东西也全部废了，因此推荐使用分片下载。

反正我又不可爱
关注
vue js 前端同时下载多个文件，前端多文件下载
weixin_41346436的博客
08-22 640
【代码】vue js 前端同时下载多个文件，前端多文件下载。
离线前端开发文档
12-18
离线前端开发文档是针对那些在无网络环境下仍然需要进行前端开发工作的程序员设计的资源集合。这份文档通常包含了丰富的CSS3、HTML5、JavaScript和jQuery的知识点，旨在帮助开发者在无法连接互联网时也能查阅和学习...
html前端文件
01-25
压缩包包含了几个我自己用的html模板。都是规范格式的，可以拿来借鉴
前端用a标签实现静态资源文件(excel/word/pdf)下载
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-24 3842
介绍了前端如何使用a标签实现静态资源文件(excel/word/pdf)下载。
如何在HTML中使文件/结果可下载
最新发布
湖北太米网络科技有限公司
09-02 423
在 HTML 中，你可以使用a元素的download属性来指定文件/结果的下载行为。以下是一个示例：登录后复制 <a href="your_file.txt" download>下载文件</a>1.在上述示例中，href属性指定了要下载的文件的路径，download属性指定了下载的文件名。当用户点...
前端下载html
qq_42975676的博客
11-25 439
let str = `<h1>hello world</h1>`; const blob = new Blob([str], { type: 'text/html' }); let a = document.createElement('a'); a.setAttribute('download', 'a.html'); a.href = URL.createObjectURL(blob); document.body.appendChild(a);
前端利用a标签下载文件
qq_42931285的博客
03-24 523
后端返回url，前端利用a标签下载文件
HTML中的一些细节处理
jxmchou的博客
11-03 696
# 说明 参考资料:简书的 伴歌知行的JS下载图片和文件，防止浏览器直接打开 、夜半修仙,;CSDN的weixin_3791475的使用a标签下载文件不跳转;努力学习的汪：洪学习笔记 文章目录# 说明前端利用a标签实现文件[图片]下载文件下载常用方式总结分析Ⅰ-后端设置下载请求的响应头 `Content-Disposition` 强制下载Ⅱ-实现[HTMLCanvasElement]类型图片下载Ⅲ- a标签+download属性Ⅳ-通过接口跨域请求，动态创建a标签，以blob形式下载1、`fetch`请
flask前端客户端和服务端传输文件，在前端可以直接下载源文件
04-11
在使用Flask构建Web应用程序时，前后端交互是不可或缺的一部分，特别是涉及到文件的上传、下载和处理。Flask是一个轻量级的Python Web...在处理文件时，务必注意安全性，避免潜在的安全风险，例如防止文件注入攻击。
前端axios下载excel文件(二进制)的处理方法
10-18
在实际开发过程中，前端开发者经常需要处理文件下载的需求，使用axios下载二进制数据文件是一种简洁有效的方法。需要注意的是，文件的MIME类型需要正确设置，否则可能导致文件内容无法正确解析。此外，下载操作完成...
Javascript前端下载后台传来的文件流代码实例
10-14
在JavaScript前端开发中，有时需要从后台服务器获取文件并提供给用户下载。在这个场景下，文件通常以流的形式传输，即Blob对象。...理解这一流程有助于开发者更好地实现在前端处理文件下载的需求。
网站前端html
01-10
自用响应式网站前端开发代码，下载即用。一般公司主站的样式。
前端html文件下载，同源与异源下载
菜鸟-传奇
02-02 1425
属性说明 download 下载的资源的名称 target 打开该连接的方式( _self、_blank) href 资源的地址(本地、远程地址) a标签跳转 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>这是一个a标签下载页面&...
前端a标签实现文件下载
kang1011的博客
03-17 1万+
a标签实现文件下载 如果想通过纯前端技术实现文件下载， 下载的静态文件放项目路径下， A标签下载，herf指定项目路径，加上download属性。 a链接默认的是在同一页面打开，如果我们需要打开新的页面，就需要添加target=’blank’来设置。 <a target=’blank’ href="../../../static/images/Promise.pdf" download="下载Promise.pdf">点击下载</a> download也可以不给值，这样就会使
前端利用Blob对象实现下载html文件及踩坑记录
apple_2021的博客
04-27 1043
需要根据路径下载文件，之前只支持pdf，现在需要支持html文件下载
前端通过a标签实现文件下载
Sponge_bob_的博客
09-03 430
前端实现文件下载
前端文件下载的方式
m0_57307213的博客
07-11 763
方案：a标签可以携带cookie,所以可以有另一种解决方法，在下载文件前，发送一个请求获取一个临时token通过cookie进行携带，a标签下载是流式下载，会把服务器的文件像流水一样存储到本地磁盘，所以下载直接能看到下载，不会将文件缓存到浏览器。**如果文件小还行，文件大了就会出现点击了下载，但是没有反应，过了几分钟后才出现了下载，这种等待时间就是将服务器端的那个文件转成了blob（res.blob()花的时间特别长），才进行a标签的流式下载（这里页面才开始出现有下载的交互体现）
前端实现文件下载（a标签实现文件下载 避免直接打开问题)
热门推荐
良_123的专栏
01-26 3万+
先说结论 所有情况通用的方式： 后端设置下载请求的响应头 Content-Disposition: attachment; filename="filename.jpg" attachment 表示让浏览器强制下载 filename 用于设置下载弹出框里预填的文件名 非跨域情况下 给a标签加上 download 属性，如 <a href="url" download="xxx.png"></a> download 里写文件名 注意后缀 (值非必填) 通过请求
前端下载文件或者图片方式，window.open或者a标签形式
柑橘乌云_
11-27 9133
上面的方案这么多，其实最终还是落到a标签上，所以不管是通过浏览器的内置行为进行下载，还是通过ajax进行下载，文件下载的最终还是浏览器的行为。我项目中遇到的需求如下：首先window.open(URL)的这种方式和a标签方式一样对于pdf和图片都会打开文件，而并非直接下载，那么当然如果自动打开pdf或者图片，鼠标右击图片或者pdf右上角也会有下载入口。但是如果说需求是点击按钮直接下载文件，那么需要采取获取文件流然后拿到文件流通过a标签下载这种当时，当然获取文件流可以前端去做也可以后端做。
前端怎么处理下载pdf文档的接口
06-07
前端可以通过发送一个GET或POST请求，将需要下载的PDF文档的URL地址传递给后端接口。后端接口可以使用一些流式处理的方式，将PDF文件的二进制数据流返回给前端。前端可以使用Blob对象或者FileSaver.js等库来处理二进制数据流并生成文件，实现下载功能。以下是一个使用fetch API下载PDF文档的示例代码： ```javascript fetch('your-pdf-url') .then(response => response.blob()) .then(blob => { const url = window.URL.createObjectURL(new Blob([blob])); const a = document.createElement('a'); a.href = url; a.download = 'your-pdf-file-name'; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 0); }); ``` 其中，'your-pdf-url'是PDF文件的URL地址，'your-pdf-file-name'是将要下载的PDF文件的文件名。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值