💡在线预览PDF文件功能实现
📊前端
🍁HTML
<a @click="previewPdf(record.REPORT_NAME,record.REPORT_PATH)">预览</a>
⛄JS
请求方法的封装,request 是 axios.create()的实例对象,根据文件地址路径,请求到文件数据,并且返回接收类型是Blob对象
export function downloadFile (params) {
return request({
url: api.downloadFile,
method: 'post',
data: params,
responseType: 'blob' //重点部分:返回格式必须是 blob
})
}
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
previewPdf (fileName, filePath) {
downloadFile({ filePath: filePath }).then(res => {
// console.log(res)
var blob = new Blob([res], { type: 'application/pdf' })
const url = URL.createObjectURL(blob)
window.open(url)
}).catch(req => {
this.$message.error('预览失败,无法找到文件')
console.log('失败原因', req)
})
}