Blob流在线预览PDF文件、图片

发布时间 2023-10-10 15:56:53作者: 知九

这个要注意格式,要加上responseType: 'arraybuffer'

import axios from 'axios'
const fileTypeList = ['application/pdf', 'image/png', 'image/gif', 'image/jpeg', 'txt/plain']
invoicePreview () {
      axios({
        method: 'get',
        url: '/acc_test/index/test_pdf',
        baseURL: process.env.HOSTURL,
        responseType: 'arraybuffer'
      }).then(res => {
        let fileType = res.headers['content-type']
        const binaryData = []

        if (fileType && fileTypeList.includes(fileType)) {
          binaryData.push(res.data)
          let URL = window.URL.createObjectURL(new Blob(binaryData, { type: fileType, charset: 'utf-8' }))
          window.open(URL)
        } else {
          this.$Message.error('不支持此文件预览')
        }
      })
    }

参考: 《在线预览PDF文件、图片,并且预览地址不显示文件或图片的真实路径。》