个人博客纯手戳产物 vue3 nodejs mysql http://36.151.145.67:30000/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,如下图图一预览图片直接将window.URL.createObjectURL(res)转成的本地预览地址赋值给Img的src即可展示图片// vue中 // template el-image :srcimgUrl fitfill /el-image //methods handleViewPDF() { viewContractTypePdf(this.baseInfo.talentId).then(res { this.imgUrl window.URL.createObjectURL(res) }) } 后端返回二进制流，前端处理二进制文件流，实现预览图片以及PDF
个人博客纯手戳产物 vue3 nodejs mysql http://36.151.145.67:30000/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,如下图图一预览图片直接将window.URL.createObjectURL(res)转成的本地预览地址赋值给Img的src即可展示图片// vue中 // template el-image :srcimgUrl fitfill /el-image //methods handleViewPDF() { viewContractTypePdf(this.baseInfo.talentId).then(res { this.imgUrl window.URL.createObjectURL(res) }) } RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
