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

pdfjs预览pdf报错相关推荐

下载、预览PDF报错问题排查
PC端解决方案 // 检查请求的请求头类型 // 后端检查接口返回类型'content-type': 'application/json' 移动端解决方案先检查请求头类型,如果是使用的uniapp, ...
Vue中使用pdfJs预览PDF、图片
Vue中使用pdfJs预览PDF.图片 pdf.js是一个使用HTML5构建的可移植文档格式库.它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能. 实现步骤如下: 1.下载pdfJ ...
润乾报表预览信息报错
记录一下碰到的小问题,最近开始接触报表,用的润乾,刚开始就出现头疼的问题,预览界面一直报错打不开,报错如上图所示. 经过多次尝试发现是我的数据集名字有问题,我这里写的是afc-cc,应该是不能用短横杠 ...
若依后端实现pdfjs预览PDF文件
PDF.js用于解析和呈现PDF 的通用.基于 Web 标准的平台. 官网地址:http://mozilla.github.io/pdf.js/ 目录一.下载pdfjs安装包 (1)官网下载 (2) ...
【图文详解】kkFileView文件文档在线预览启动报错：启动office组件失败，请检查office组件是否可用
错误内容: _ _ ______ _ _ __ __ _ | | | | | ____| (_) | | \ \ / / (_) | | __ | | __ | |__ _ | | ___ \ \ / ...
springboot使用pdfjs预览office文件
由于springboot使用aspose预览office文件可以实现文件预览,但部分浏览器却不兼容,所以使用pdfjs预览office文件,兼容浏览器. 在springboot使用aspose预览of ...
前端预览 PDF 文件几种方式汇总（使用PDFJS）
哈喽大家好啊.前半年还挺忙的,一直也没有发文章,有老哥想我了嘛.这两天发现老有人私信问我 PDF 相关的内容. 那么好,为了我能安心摸鱼,我准备出一篇文章来介绍一下如何使用 PDFJS . PDF.j ...
android 在线预览pdf文件（目前最全）
android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 一.andorid原生自带的pdf管理库,主要提供 ...
vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...

pdfjs预览pdf报错

pdfjs预览pdf报错相关推荐

最新文章

热门文章