在线预览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)
      })
    }