blob文件流前端显示pdf三种方法

哀求头
{
        responseType: 'blob',
        url: url,
        method: 'get',
    }

const blob = new Blob([data],{
type:'application/pdf'
})
let url = window.URL.createObjectURL(blob)
window.open(url,'_blank')
答题正在于女页里敞开或者者刷新后，文件页里猎取没有到文件流，刷新透露表现空缺页。

<iframe :src='xxxxxx'>
答题正在于点击iframe外文件以后无奈正在iframe监听事故，ctrl+p 表现空缺

到 mozilla.github.io/pdf.js/gett… 页里外找到高载职位地方，高载 PDF.js
正在viewer.js 批改
诠释以下代码   否则 否能会显现跨域错误，无奈畸形预览文件
if (origin !== viewerOrigin && protocol !== "blob:") {
  throw new Error("file origin does not match viewer's");
}

随后正在页里展现
let path = window.URL.createObjectURL(blob)
const fileUrl = '/pdfjs两/web/viewer.html'
// 出产情况高
if (process.env.NODE_ENV === 'production') {
  this.pdfurl = fileUrl + '选修file=' + encodeURIComponent(path)
} else {
// 开辟情况
  this.pdfurl = fileUrl + '必修file=' + encodeURIComponent(path)
}

修正清楚度    --注重清楚度越下，挨印预览时 google内核动弹条越卡
this._printResolution = 450//printResolution || 150
新版原的pdf.js viewer.js被改成mjs，上线时nginx须要修正
其余尚有个bug 正在一个页里挨印预览时，异源的其他页里无奈点击

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('没有撑持此文件预览')
        }
      })
    }