vue后台返回格式为二进制流进行文件的下载方式

当我们在处理后台返回的文件下载数据时,有时候会遇到后台返回数据格式为二进制流的情况。这种格式的数据在前端界面上无法直接显示,需要通过特殊的处理方式进行文件下载。下面是完整攻略。

1. 后台设置content-type

第一步是需要后台在返回数据时设置content-type为“application/octet-stream”,这个content-type是二进制流格式的标准类型。

下面是Java后台的示例代码:

// 设置响应头Content-Type
response.setContentType("application/octet-stream");
// 设置响应头打开方式为attachment,表示需要进行文件下载
response.setHeader("Content-Disposition", "attachment;filename=" + file.getName());

2. 前端通过axios接收数据

接下来,前端通过axios接收后台返回的二进制流数据。在发送axios请求时需要设置responseType为‘blob’,表示返回的数据为二进制流。

axios({
  method: 'get',
  url: '/fileDownload',
  responseType: 'blob', // 告诉axios需要返回二进制流数据
  params: {
    fileName: 'example.doc'
  }
}).then(response => {
  const blob = new Blob([response.data])
  const fileName = response.headers['content-disposition'].split('=')[1] // 获取文件名
  // 创建一个a标签,利用浏览器内置下载功能进行文件下载
  const downloadLink = document.createElement('a')
  downloadLink.href = URL.createObjectURL(blob)
  downloadLink.download = fileName
  document.body.appendChild(downloadLink)
  downloadLink.click()
  document.body.removeChild(downloadLink)
})

在axios获取数据后,需要将获取到的数据转换成blob对象。之后,我们需要从response header里获取content-disposition变量,来获取文件名。接着,我们创建一个a标签,设置href属性为blob链接,download属性为文件名,然后调用click方法来触发下载。

示例一:下载图片

假设后台返回一张图片,我们先通过axios获取数据,然后将获取到的blob数据转换成URL,将URL赋值给一个img元素的src属性,在页面上渲染该图片。

axios({
  method: 'get',
  url: '/imageDownload',
  responseType: 'blob',
}).then(response => {
  const blob = new Blob([response.data])
  const imgUrl = URL.createObjectURL(blob)
  const img = document.createElement('img')
  img.src = imgUrl
  document.body.appendChild(img)
})

示例二:下载PDF文件

假设后台返回一个PDF文件,我们先通过axios获取数据,然后将获取到的数据转换成blob对象,最后通过设置a标签的href来触发下载。

axios({
  method: 'get',
  url: '/pdfDownload',
  responseType: 'blob',
}).then(response => {
  const blob = new Blob([response.data], {type: 'application/pdf'})
  const fileName = response.headers['content-disposition'].split('=')[1]
  const downloadLink = document.createElement('a')
  downloadLink.href = URL.createObjectURL(blob)
  downloadLink.download = fileName
  document.body.appendChild(downloadLink)
  downloadLink.click()
  document.body.removeChild(downloadLink)
})

以上就是使用Vue进行文件下载的完整攻略,注意,在实际使用过程中还需要进行细节处理,比如服务器响应时间较长时的loading问题、异常处理等。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue后台返回格式为二进制流进行文件的下载方式 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • javascript打印输出json实例

    让我来详细讲解一下“JavaScript 打印输出 JSON 实例”的完整攻略。 首先,我们需要了解 JSON 是什么。JSON 是一种轻量级的数据格式,其特点是易于阅读和编写。在 Web 开发中,常常使用 JSON 来传输数据。在 JavaScript 中,可以将一个 JSON 对象转换成字符串,也可以将一个字符串转换成 JSON 对象。 接着,我们需要了…

    JavaScript 2023年5月27日
    00
  • 关于javascript模块加载技术的一些思考

    关于 JavaScript 模块加载技术的一些思考 什么是模块加载技术? JavaScript 作为一门基于对象的语言,可以使用函数和对象等抽象概念来组织代码。在应用程序越来越庞大的情况下,我们需要将代码分割成多个模块,这样既方便代码管理,也有利于代码的可重用性。模块加载技术就是将模块引入到应用程序中,以便让应用程序能够使用模块提供的功能。 JavaScri…

    JavaScript 2023年6月11日
    00
  • JavaScript事件委托

    JavaScript 事件委托是一种常用的编程技巧,它可以避免为每个元素添加事件监听器。事件委托背后的思想是,将事件监听器添加到其父元素上,而不是为每个子元素添加监听器。当事件触发时,事件将从子元素冒泡到其父元素,由父元素的事件监听器处理。这种技巧可以减少代码量,提高性能。 以下是一个完整的 JavaScript 事件委托攻略: 1. 理解事件冒泡和捕获 事…

    Web开发基础 2023年3月30日
    00
  • JavaScript中的Document文档对象

    JavaScript中的Document文档对象是指代表整个HTML文档的对象,它包含了HTML文档的所有内容,如标签、文本、属性等等。它是所有网页DOM的顶级容器,JavaScript可以通过该对象来获取和修改所有的HTML元素以及其内容和属性。 Document对象的常用属性与方法 常用属性 document.title:表示HTML页面的标题。 例子:…

    JavaScript 2023年5月27日
    00
  • JavaScript this指向相关原理及实例解析

    JavaScript this指向相关原理及实例解析 JavaScript 中的 this 关键字是一个引起很多初学者困惑的概念。它被用来引用运行时上下文中的当前对象,但是在不同的语法结构和调用方式下,其指向的对象也会发生改变。本文将详细讲解 JavaScript 中 this 的指向原理及实例解析。 什么是 this? 在 JavaScript 中,thi…

    JavaScript 2023年6月11日
    00
  • JavaScript使用readAsDataURL读取图像文件

    JavaScript中提供了FileReader对象,该对象可以实现对文件内容的读取。其中,readAsDataURL()方法可以将文件读取为Data URL格式,该格式可以将图片转换为Base64编码的字符串。 以下是读取图像文件并在页面中展示的代码示例: HTML代码: <input type="file" id="f…

    JavaScript 2023年5月27日
    00
  • 解析前端面试题2019年小米工程师面试题(附答案)

    这里给出详细讲解“解析前端面试题2019年小米工程师面试题(附答案)”的完整攻略。 前言 本文将对2019年小米工程师面试题进行分析和解答,其中涉及到的知识点基本全面,包括ES6、CSS、HTTP等内容。本文旨在帮助读者更深入理解前端知识,提高应对面试的能力。 攻略 下面按照题目出现顺序,逐个进行解答。 1. 给出题目vue的几种优化 该题目主要考察了对Vu…

    JavaScript 2023年5月19日
    00
  • 分析web应用内引用依赖的占比

    背景 针对目前团队自己开发的组件库,对当前系统内引用组件库占比进行统计分析,以实现对当前进度的总结以及后续的覆盖度目标制定。 主要思路 目前找到的webpack分析插件,基本都是针对打包之后的分析打包之后的chunk进行分析,但是我希望的是分析每个页面中的import数,对比一下在所有页面中的import数中有多少是使用了组件库的。所以就在网上看了一些相关资…

    JavaScript 2023年4月17日
    00
合作推广
合作推广
分享本页
返回顶部