pdfjs预览pdf报错

最新推荐文章于 2025-06-10 17:55:06 发布

写程序的吗喽

最新推荐文章于 2025-06-10 17:55:06 发布

阅读量7.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue pdfjs 文章标签： html javascript html5

本文链接：https://blog.csdn.net/Yana1225/article/details/119817568

vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

pdfjs

1 篇文章

订阅专栏

跳转之后的页面已经可以出来，blob生成的链接也是有返回的，但是预览是空白，并且控制台警告：Warning: Invalid stream: “FormatError: Bad FCHECK in flate stream: 120, 239”

跟到源码里面看警告的原因，应该还是解析出了问题。

解决方案：

axios请求文档流时候的responseType改为blob

responseType如果不修改，axios中默认的是json，链接：https://www.cnblogs.com/zhusf/p/11123464.html

xhr中如果设置为空，默认是text，链接：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType

// 原本这里写的是this.$axios.get(`/api/preview?id=${id}`)
// 后来发现问题就在这里，$axios是封装的axios，没有设置requestType，而我只对照了返回来的数据是文档流之后就忽略了这个问题！
// $request是把axios直接抛了出来
this.$request({
    methods: 'GET',
    url: `/api/preview?id=${id}`,
    responseType: 'blob'
})
.then(res => {
    console.log(res)
    var blob = new Blob([res.data], {
        type: 'application/pdf;chartset=UTF-8'
    })
    const fileURL = URL.createObjectURL(blob)
    window.open(`${path}pdf/web/viewer.html?file=${fileURL}`)
})
.catch(err => {
    console.log(err)
})

补充！！！！！

这个功能是上线到移动端的，PC端直接open新页面完全没问题，但是到移动端，页面打开还是无响应。

在PC上改为window.location.href直接替换地址，复现了移动端的情况。

推测是因为打开新的页面把原来页面刷新，而pdfjs本身用的地址就是虚拟地址放的文件流，所以猜是因为请求不到原来的文件流了。

移动端方案：本页内添加了个iframe，全屏展示 ( •̀ ω •́ )y