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日

相关文章

  • js实现点击文本框显示日期选择器特效代码分享

    下面是详细的攻略: 1. 概述 日期选择器是网页开发中经常用到的功能,可以方便用户选择日期。在前端开发中,我们可以使用 JavaScript 实现一个点击文本框显示日期选择器的特效。下面将介绍具体的实现方法。 2. 实现步骤 2.1 HTML 结构 首先,在 HTML 中需要创建一个文本框和显示日期的容器。代码如下: <label for="…

    JavaScript 2023年5月27日
    00
  • 常用的JavaScript验证正则表达式汇总

    让我来详细讲解“常用的JavaScript验证正则表达式汇总”的完整攻略。 什么是正则表达式? 正则表达式(Regular Expression,简称Regex)是指用于描述字符模式的语法规则。在JavaScript中,我们可以使用正则表达式来匹配和验证字符串。 常用的JavaScript验证正则表达式 在前端开发中,我们经常需要对输入的文本进行验证,例如检…

    JavaScript 2023年6月10日
    00
  • jQuery基于cookie实现换肤功能实例

    下面我将详细讲解“jQuery基于cookie实现换肤功能实例”的完整攻略。 第一步:准备工作 在使用jQuery基于cookie实现换肤功能前,需要做一些准备工作,包括: 引入jQuery库:在网页的头部注入jQuery库,如果已经引入了,可以跳过这一步。 <script src="https://cdn.bootcdn.net/ajax/…

    JavaScript 2023年6月11日
    00
  • php中preg_replace正则替换用法分析【一次替换多个值】

    《PHP中preg_replace正则替换用法分析【一次替换多个值】》是一篇介绍PHP中正则替换的文章,主要介绍preg_replace函数中的一些使用技巧,可以一次替换多个值。 一、preg_replace函数 preg_replace是PHP中用于正则替换的函数。它的语法如下: preg_replace($pattern, $replacement, $…

    JavaScript 2023年6月10日
    00
  • JS正则(RegExp)判断文本框中是否包含特殊符号

    JS正则(RegExp)可以判断文本框中是否包含特殊符号,以下是具体的攻略: 创建正则表达式 在使用JS正则判断之前,需要先创建对应的正则表达式。可以使用RegExp构造函数或者简写方式来创建正则表达式。 例如,以下代码创建了一个匹配特殊字符的正则表达式: var pattern = /[~!@#$%^&*()_+`\-={}[\]\\|;:’&qu…

    JavaScript 2023年6月10日
    00
  • js中的setInterval和setTimeout使用实例

    JS中的setInterval和setTimeout使用实例 在JS中,setInterval和setTimeout是两个常用的计时器函数。它们可以根据指定的时间间隔或延迟来进行周期性的或单次的定时操作。下面,我们将详细讲解这两个函数的使用实例。 1. setInterval的使用实例 setInterval函数用于周期性地执行代码,它接收两个参数:第一个参…

    JavaScript 2023年6月11日
    00
  • JQuery记住用户名密码实现下次自动登录功能

    JQuery记住用户名密码实现下次自动登录功能 在一些需要登录的网站中,用户可能需要输入用户名和密码登录。如果用户勾选了“记住我”的功能,下次再登录时就可以实现自动登录的功能。本文将介绍如何使用 JQuery 实现这一功能。 1. 使用cookie记录用户名密码 要实现自动登录的功能,需要记录用户的用户名和密码。可以使用 cookie 来保存这些信息。 //…

    JavaScript 2023年6月11日
    00
  • 详解js的事件处理函数和动态创建html标记方法

    下面是详解”js的事件处理函数和动态创建HTML标记方法”的完整攻略。 1. 事件处理函数 1.1 什么是事件处理函数? 事件处理函数是在特定事件发生时被调用的函数。在JavaScript中,我们可以使用事件处理函数来处理各种事件,比如单击、鼠标悬停、按键等等事件。 1.2 如何使用事件处理函数? 我们可以使用addEventListener()方法将事件处…

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