教你做文案的网站推荐,有限公司和股份有限公司的区别,合肥室内设计公司有哪些,基层建设网站前言 在实际开发中我们经常会遇见下载文件的场景#xff0c;比如下载合同#xff0c;下载文件 下载文件有2种方式#xff0c;一种是后端返回二进制流#xff0c;前端通过blob对象接受根据不同类型下载 还有一种把地址直接在浏览器新窗口打开浏览器打开pdf可以预览和下载比如下载合同下载文件 下载文件有2种方式一种是后端返回二进制流前端通过blob对象接受根据不同类型下载 还有一种把地址直接在浏览器新窗口打开浏览器打开pdf可以预览和下载其他文件直接下载 但不管是那种方式原理都是一样的只是取决于谁来执行转化代码
代码实现
1.封装api-根据直接后端接口而定注意要在请求时标明是二进制文件流
// 文件-图片下载
export function downloadfile (data) {return request({url: /download/file,method: post,data,// 指定请求类型为二进制流// 不写可能会造成下载成功的图片和文件是看不到和没有内容的responseType: blob})
}
2.下载不同文件和图片在项目中可能经常使用-可以封装成一个方法。
2.1在utils下创建download.js文件
export default {// 下载 Excel 方法excel (data, fileName) {this.download(data, fileName, application/vnd.ms-excel)},// 下载 Word 方法word (data, fileName) {this.download(data, fileName, application/msword)},// 下载 Zip 方法zip (data, fileName) {this.download(data, fileName, application/zip)},// 下载 Html 方法html (data, fileName) {this.download(data, fileName, text/html)},// 下载 Markdown 方法markdown (data, fileName) {this.download(data, fileName, text/markdown)},// 下载 pdf 方法pdf (data, fileName) {console.log(data, data)console.log(fileName, fileName)this.download(data, fileName, application/pdf)},// 下载 图片方法png (data, fileName) {this.download(data, fileName, application/png)},// 兼容写法stream (data, fileName) {this.download(data, fileName, application/octet-stream)},download (data, fileName, mineType) {// 创建 blob对象let blob new Blob([data], { type: mineType })// 浏览器api 有的不支持-二种都写window.URL window.URL || window.webkitURL// 获取链接地址-(内容赋值到临时链接)let href URL.createObjectURL(blob)// 创建a标签let downA document.createElement(a)// 把链接赋值给a标签downA.href href// 赋值文件名称downA.download fileName// 点击下载downA.click()// 销毁超连接window.URL.revokeObjectURL(href)}}
3.在页面中使用
// html
el-button typeinfo clickaddclose下载/el-button
// data
datafile: {url: 文件或者图片地址}// 引入方法
import download from /utils/download
// 方法
// 下载async addclose () {const res await downloadfile(this.datafile)
// 下载图片// 针对性的类型-名称带不带.png都不会受影响// download.png (res,测试图片)// 带后缀// download.png (res,测试图片.png)
// 下载pdf文件// 针对性的类型-名称带不带.pdf都不会受影响// download.pdf (res,pdf文件)// 带后缀download.pdf (res,pdf文件.pdf)
// 公共方法// application/octet-stream 相当于公共类型-需要在名称带上指定的后缀-不然下载下来的文件没有后缀名打不开// download.stream (res,公共方法.png)// download.stream (res,公共方法.pdf)}
注意 首先排查下载下来的文件格式是否正确不正确检查blob对象类型名称也有关系是否带后缀名 如果发现下载下来的文件格式后缀正确内容图片为空看不见排查后端是否把内容转成流前端在封装api时是否设置responseType: blob 总结
经过这一趟流程下来相信你也对 vue 后端返回二进制流-前端通过blob对象下载文件-图片 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 什么不足的地方请大家指出谢谢 -- 風过无痕
