【vue】vue中下载文件的方法(vue下载安装)

【vue】vue中下载文件的方法 文章目录1. 下载后端返回文件1.1 后端为post请求返回二进制流文件URL.createObjectURLFileReader1.2 后端直接返回get请求文件2. 下载本地文件1. 下载后端返回文件1.1 后端为post请求返回二进制流文件

推荐整理分享【vue】vue中下载文件的方法(vue下载安装)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue 下载功能,vue下载方法,vue下载安装,vue下载方法,vue下载方法,vue 下载,vue 下载,vue 下载,内容如对您有帮助，希望把文章链接给更多的朋友！

Blob

Blob对象标识一个不可变、原始数据的类文件对象。Blob表示的不一定是JavaScript原生格式的数据

responseType

responseType它表示服务器响应的数据类型，由于后台返回来的是二进制数据，所以要把它设为‘blob’

通过设置responseType为blob，可以直接拿到二进制文件转化为Blob，两种使用 Blob 实现文件下载的方式

URL.createObjectURL

在浏览器端，实现直接下载文件，就是使用a标签来只想文件的下载地址。window.location.href的本质也是这样，因此在拿到二进制文件对应的Blob对象后，需要为这个Blob对象创建一个指向它的下载地址的URL

URL.createObjectURL 方法则可以实现接收 File 或 Blob 对象，创建一个 DOMString，包含了对应的 URL，指向 Blob 或 File 对象，它看起来会是这样：

“blob:http://localhost:8080/a48aa254-866e-4c66-ba79-ae71cf5c1cb3”

完整使用：

export const downloadFile = (fileStream, name, extension, type = "") => { const blob = new Blob([fileStream], {type}); const fileName = `${name}.${extension}`; if ("download" in document.createElement("a")) { const elink = document.createElement("a"); elink.download = fileName; elink.style.display = "none"; elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href); document.body.removeChild(elink); } else { navigator.msSaveBlob(blob, fileName); }};FileReader

FileReader 对象也可以使得我们对 Blob 对象生成一个下载地址 URL，它和 URL.createObject 一样可以接收 File 或 Blob 对象。 这个过程，主要由两个函数完成readAsDataURL和onload，前者用于将Blob或File对象转为对应的URL，后者用于接收前者完成后的URL，它会在e.target.result上 完整使用：

const readBlob2Url = (blob, type) =>{ return new Promise(resolve => { const reader = new FileReader() reader.onload = (e) => { resolve(e.target.result) } reader.readAsDataURL(blob) })}1.2 后端直接返回get请求文件

<a href=‘get请求返回的地址’></a>

2. 下载本地文件

前端项目中下载某个地址的文件模块，文件不想放到后端去下载，在文件大小不太大的情况下，可以把文件放在前端项目中，无论开发环境还是生产环境，都能在同样路径下找到那个文件 1.在vue-cli3.x的版本中，将需要下载的文件放到public文件夹中 2.下载文件

<script>downloadUrl: `${process.env.BASE_URL}file/xxx_template.xlsx`, // 模板下载文件地址</script><template><a :href="downloadUrl">点击下载</a></template>

参考： 详解，从后端导出文件到前端（Blob）下载过程