后端返回二进制流,前端处理二进制文件流,实现预览图片以及PDF

04-13 阅读 0评论

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"
  })
}

  1. 请求数据:通过window.URL.createObjectURL(res)转成本地预览地址, 在通过window.open()方法打开转成本地预览地址即可预览PDF,如下图

后端返回二进制流,前端处理二进制文件流,实现预览图片以及PDF

图一

  1. 预览图片:直接将window.URL.createObjectURL(res)转成的本地预览地址赋值给Img的src即可展示图片

// vue中
// template

//methods
handleViewPDF() {
   viewContractTypePdf(this.baseInfo.talentId).then(res => {
     this.imgUrl = window.URL.createObjectURL(res)
   })
}


免责声明
本网站所收集的部分公开资料来源于AI生成和互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,人围观)

还没有评论,来说两句吧...

目录[+]