blob文件流前端显示pdf

首先请求需要修改

responseType: 'blob', 需要修改

js 复制代码
请求头
{
        responseType: 'blob',
        url: url,
        method: 'get',
    }

三种方法:

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

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

2.在新页面用iframe接

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

3.使用pdf.js

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 在一个页面打印预览时,同源的其他页面无法点击
相关推荐
遂心_9 分钟前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit10 分钟前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天16 分钟前
ts中的函数重载
前端
卓伊凡31 分钟前
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
前端
前端Hardy31 分钟前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy34 分钟前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼1 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍1 小时前
🔹🔹🔹 vue 通信方式 eventBus
前端
一个不爱写代码的瘦子1 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院1 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc