在Vue中利用Blob对象实现下载文件的超详细教程

您所在的位置：网站首页 › saver下载 › 在Vue中利用Blob对象实现下载文件的超详细教程

在Vue中利用Blob对象实现下载文件的超详细教程

#在Vue中利用Blob对象实现下载文件的超详细教程| 来源: 网络整理| 查看: 265

知识点1：Blob（Binary Large Object）：二进制大数据对象

注意：如果下载文件是文本类型的(如: .txt, .js之类的), 那么用responseType: 'text'也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer或blob，更多详情请查看MDN

知识点2：从Blob中读取内容的方法我采用的是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取：

知识点3：这里采用的是a标签来打开下载页面，其实通过a标签下载的方式，同window.open()是一样的，唯一的优点是可以自定义下载后的文件名，a标签里有download属性可以自定义文件名

方法一：

发请求获取到文件数据new FileReader()解析获取到的数据，JSON.Parse查看是否可反序列化无法反序列化代表是blob格式数据，随即建立a标签实现在页面download uploadFile () { $http request({ url: "/bondParser/api/getParser", method: "post", headers: { "Content-Type": "application/x-www-form-urlencoded" }, responseType: "blob", }) .then(res => { //读取文件 // 1.创建 FileReader 对象 const fileReader = new FileReader() // 2.开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。 fileReader.readAsText(res.data) // 3.以字符串的形式读取出来 fileReader.onload = () => { // 4.该事件在读取操作完成时触发。注意：此时this指向fileReader let result = JSON.parse(this.result) //获取的结果根据后端返回的数据类型选用json.parse if (result.code !== 0) { //如果读取失败进行响应的操作或提示 return this.$message.error('文件读取失败') } } //导出文件 // 通过a标签打开新页面下载文件 const a = document.createElement('a') // 构造一个blob对象来处理数据 const blob = new Blob[res.data] if (res.headers['content-disposition']) { // 拿到用户上传的文件名 let fileName = res.headers['content-dispositon'].splice('filename=')[1] fileName = decodeURI(encodeURI(fileName)) // URL.createObjectURL()会产生一个url字符串，可以像使用普通 URL 那样使用它，比如用在 img.src 上 a.href = URL.createObjectURL(blob) // a标签里有download属性可以自定义文件名 a.setAttribute( 'download', fileName ) document.body.appendChild(a) a.click(); document.body.removeChild(a) } }) }

方法二：

发请求获取数据使用数据的.text()方法并JSON.parse返序列化查看是否为blob格式数据验证为blob后借助file-saver插件的saveAS方法下载对应格式文件 import { saveAs } from "file-saver"; uploadFile () { $http request({ url: "/bondParser/api/getParser", method: "post", headers: { "Content-Type": "application/x-www-form-urlencoded" }, responseType: "blob", }) .then(async (res) => { const text = await res.data.text(); try { const errMsg = JSON.parse(text).message || "文件读取失败!"; this.$message.error(errMsg); } catch { const fileName = res.headers["content-disposition"] .split(";")[2] .split("''")[1]; saveAs(new Blob([res.data]), fileName); } }) .catch(() => { this.$message.error("下载文件出现错误，请联系管理员！"); }) };

【本文地址】

在Vue中利用Blob对象实现下载文件的超详细教程

在Vue中利用Blob对象实现下载文件的超详细教程

今日新闻

推荐新闻