blob文件流前端显示pdf

首先请求需要修改
responseType: ‘blob’, 需要修改

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

三种方法：

1.直接处理，在新页面打开

const blob = new Blob([data],{type:'application/pdf'})let url = window.URL.createObjectURL(blob)window.open(url,'_blank')问题在于父页面关闭或者刷新后，文件页面获取不到文件流，刷新显示空白页。

2.在新页面用iframe接

<iframe :src='xxxxxx'>问题在于点击iframe中文件之后无法在iframe监听事件，ctrl+p 显示空白

3.使用pdf.js

到 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 = '/pdfjs2/web/viewer.html'// 生产环境下if (process.env.NODE_ENV === 'production') {  this.pdfurl = fileUrl + '?file=' + encodeURIComponent(path)} else {// 开发环境  this.pdfurl = fileUrl + '?file=' + encodeURIComponent(path)}修改清晰度    --注意清晰度越高，打印预览时 谷歌内核滚动条越卡this._printResolution = 450//printResolution || 150新版本的pdf.js viewer.js被改为mjs，上线时nginx需要修改另外还有个bug 在一个页面打印预览时，同源的其他页面无法点击

本文链接：https://www.kjpai.cn/news/2024-04-09/156157.html，文章来源：网络cs，作者：峨乐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！