pdfjs预览pdf报错

跳转之后的页面已经可以出来,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

你可能感兴趣的:(vue,pdfjs,html,javascript,html5)