后端接口返回文件流格式、前端如何实现文件下载导出呢?

这篇具有很好参考价值的文章主要介绍了后端接口返回文件流格式、前端如何实现文件下载导出呢?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在项目开发过程中,难免会需要实现文件下载功能,记录下自己实际开发过程过程中遇到两种实现的方式。一种:后端直接返回加密url ,前端解密后直接使用 a标签下载就可以,这种方法相等比较简单,另一种:后端接口直接返回文件流,这种方式前端就需要单独封装对应的请求方法进行处理,因为这种方式使用不多,为了方便后续使用加深印象,将解决方法记录下来方便后续查阅。

完整代码

post请求
function postDownload(url, data, fileName) {
  return axios({
    // 用axios发送post请求
    url: preUrl + url, // 请求地址
    data, // 参数
    method: 'post',
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((res) => {
      // 处理返回的文件流
      // 获取http头部的文件名信息,若无需重命名文件,将下面这行删去
      if (!fileName) fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1])

      /* 兼容ie内核,360浏览器的兼容模式 */
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
      /* 兼容ie内核,360浏览器的兼容模式 */
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        /* 火狐谷歌的文件下载方式 */
        let url1 = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url1

        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
      }
      Message({
        message: '导出成功',
        type: 'success',
      })
      return Promise.resolve(res.data)
    })
    .catch((err) => {
      Message({
        message: err,
        type: 'error',
      })
      return Promise.resolve(err)
    })
}

get 请求
function getDownload(url, data, fileName) {
  return axios({
    // 用axios发送get请求
    url:url, // 请求地址
    params: data, // 参数
    method: 'get',
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((res) => {
      // 处理返回的文件流
      // 获取http头部的文件名信息,若无需重命名文件,将下面这行删去
      if (!fileName) fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1])

      /* 兼容ie内核,360浏览器的兼容模式 */
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
      /* 兼容ie内核,360浏览器的兼容模式 */
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        /* 火狐谷歌的文件下载方式 */
        let url1 = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url1
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
      }
      Message({
        message: '导出成功',
        type: 'success',
      })
      return Promise.resolve(res.data)
    })
    .catch((err) => {
      Message({
        message: err,
        type: 'error',
      })
      return Promise.resolve(err)
    })
}
responseType: ‘blob’ 说明

后端接收返回的二进制文件流,axios 本身不回去处理,但是接口返回的内容浏览器会接收对应的内容,但是接收到的内容是这样的:
后端接口返回文件流格式、前端如何实现文件下载导出呢?,前端,java,javascript
这样的文件无法看懂,因为axios 本身是不做二进制文件流处理的;

这里就需要给 axios 添加 responseType: ‘blob’,

 return axios({
    // 用axios发送get请求
    url:url, // 请求地址
    params: data, // 参数
    method: 'get',
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
    },
  })
获取保存文件名称
// 获取http头部的文件名信息,若无需重命名文件,将下面这行删去
if (!fileName) fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1])

可以传入要保存的文件名称,也可以直接获取接口返回的文件名称;

处理下载文件
 /* 兼容ie内核,360浏览器的兼容模式 */
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
      /* 兼容ie内核,360浏览器的兼容模式 */
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        /* 火狐谷歌的文件下载方式 */
        let url1 = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url1
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()

因为在测试过程种发现不同浏览从下载有问题,这里做了 ie 内核浏览器和 谷歌、 火狐、浏览器下载处理,实现方式其实也就是使用a 标签的下载数据, 给a标签设置 属性 download
自动执行点击下载,就实现了调用接口后将文件下载导出了!!!!!!!!!!!!!!文章来源地址https://www.toymoban.com/news/detail-560427.html

到了这里,关于后端接口返回文件流格式、前端如何实现文件下载导出呢?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端实现文件下载的方法;以及后端返回 blob 文件流,进行展示。

    前端下载一般分为两种情况,一种是后端直接给一个文件地址,通过浏览器打开就可以下载,另外一种则需要发送请求,后端返回二进制流数据,前端解析流数据,生成URL,实现下载。 通过a标签的download属性来实现文件下载,这种方式是最简单的,也是比较常用的方式,先来

    2024年02月06日
    浏览(56)
  • Java后端向前端返回文件流——实现下载功能!

    前端实现文件下载功能有多种方法,这里就不一一介绍,这里只介绍使用文件流下载的实现方法。 既然是文件流那就肯定需要给前端返回一堆二进制编码,作为后端就可以返回一个 OutPutStream 后端可以使用Java中servlet提供的 HttpServletResponse ,核心步骤是要设置响应的数据类型

    2024年02月08日
    浏览(47)
  • Java后端向前端返回文件流——实现下载功能

    前端实现文件下载功能有多种方法,这里就不一一介绍,这里只介绍使用文件流下载的实现方法。 既然是文件流那就肯定需要给前端返回一堆二进制编码,作为后端就可以返回一个 OutPutStream 后端可以使用Java中servlet提供的 HttpServletResponse ,核心步骤是要设置响应的数据类型

    2024年02月11日
    浏览(49)
  • java实现文件的上传和下载,将文件流转base64返回给前端

    上传代码 文件下载代码 后端通过json拿到文件流的返回,我采用将文件流转成base64返回给前台,实现代码如下:

    2024年02月13日
    浏览(59)
  • 后端返回文件流,前端怎么导出、下载(8种方法可实现)

    在前端导出和下载后端返回的文件流时,可以使用以下几种方法: 使用 window.open() 方法: 在前端使用 window.open() 方法打开一个新的窗口或标签页,并将后端返回的文件流作为URL传递给该方法。浏览器会自动下载该文件。 例如: window.open(\\\'http://example.com/download\\\', \\\'_blank\\\'); 使用

    2024年02月11日
    浏览(59)
  • 【前端下载文件流详解】前端实现多种类型文件(word,excel,pdf,rar,zip等)的下载,接口返回文件流形式(附源码)

    【 写在前面 】其实之前我也写了有关java实现文件的下载,但是当时是局限于excel文档,针对其他类型的并没有介绍,这次刚好有个客户现场反馈回来的,说我们系统确实能下载报告,但是甲方领导要看所有的报告,这不我每天得一个一个的点击下载,然后再打包给他们领导

    2023年04月24日
    浏览(55)
  • 后端接口返回文件流,前端实现docx/pdf/excel等类型文件的导出功能

    最近遇到一个需求,在后端返回文件流后前端需要实现导出docx类型的文件。在网上查看了一些资料总结了两种比较常用的方法。 1、封装接口 注意:接口需要添加 responseType: “blob”,否则会出现文件下载后无法打开或者损坏的情况。 2、转换数据格式 导出word文件,需要在创

    2024年01月21日
    浏览(47)
  • VUE: 将Json (后台返回的数据-list) 数据转换为Excel文件并实现前端下载

    1. 下载xlsx的包 2. vue中的写法 创建button的按钮,添加点击的函数 写函数 函数流程总体来说就是: 将json字符串书写写入文件,然后转换为blob的对象,之后通过文件流的方式传递给用户下载 其中的 jsonData 可以通过 axios 请求后端传递来的数据。

    2024年02月11日
    浏览(56)
  • 【vue2】前端实现下载后端返回的application/octet-stream文件流

    1、下载csv/txt时 此时无须修改接口的响应格式 2、下载Excel时,需要修改一下接口的响应格式为blob 另

    2024年02月11日
    浏览(56)
  • java下载指定文件并返回给前端返回流文件

    java下载返回文件流的实现 作为一名经验丰富的开发者,我将教会你如何实现Java下载返回文件流的功能。在这篇文章中,我将分为以下几个部分来详细介绍这个过程: 1.简介 2.实现步骤 3.代码示例 4.总结 在Java开发中,有时候我们需要实现文件下载功能,并且将文件以流的形

    2024年03月15日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包