1、首先预览PDF需要后端将响应头Content-Type 设置为PDF类型application/pdf,不能预览,会直接下载
2、前端定义接口:并设置相应类型responseType为blob
// 合同预览Pdf
export function viewContractTypePdf(id) {
return request({
url: `/attract/talentApartment/exportContract/${id}`,
method: "get",
responseType: "blob"
})
}
请求数据:通过window.URL.createObjectURL(res)转成本地预览地址, 在通过window.open()方法打开转成本地预览地址即可预览PDF,如下图
![后端返回二进制文件流,js,vue2,javascript,vue.js,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2023/07/613148-1.png)
图一文章来源:https://www.toymoban.com/news/detail-613148.html
预览图片:直接将window.URL.createObjectURL(res)转成的本地预览地址赋值给Img的src即可展示图片文章来源地址https://www.toymoban.com/news/detail-613148.html
// vue中
// template
<el-image :src="imgUrl" fit="fill" ></el-image>
//methods
handleViewPDF() {
viewContractTypePdf(this.baseInfo.talentId).then(res => {
this.imgUrl = window.URL.createObjectURL(res)
})
}
到了这里,关于后端返回二进制流,前端处理二进制文件流,实现预览图片以及PDF的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!