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

PDF.js 是一个由 Mozilla 开发的开源 JavaScript 库,用于在 Web 上预览 PDF 文档。你可以使用以下步骤来预览 PDF 文档: 1. 首先,下载并引入 PDF.js 库。你可以在官方网站(https://mozilla.github.io/pdf.js/)上找到最新版本的库文件,并将其添加到你的项目中。 2. 在 HTML 页面中创建一个容器元素,用于显示 PDF 文档的预览。例如,你可以使用一个 `<div>` 元素,并为其指定一个唯一的 ID。 3. 使用 JavaScript 代码初始化 PDF.js 并加载 PDF 文档。以下是一个简单示例: ```javascript // 获取容器元素 const container = document.getElementById('pdf-container'); // 初始化 PDF.js pdfjsLib.getDocument('path/to/your/pdf.pdf').promise .then(pdf => { // 加载第一页 return pdf.getPage(1); }) .then(page => { // 创建一个用于显示页面内容的 canvas 元素 const canvas = document.createElement('canvas'); // 设置 canvas 尺寸与页面尺寸匹配 const viewport = page.getViewport({ scale: 1 }); canvas.width = viewport.width; canvas.height = viewport.height; // 将 canvas 添加到容器中 container.appendChild(canvas); // 渲染页面内容到 canvas 上 const renderContext = { canvasContext: canvas.getContext('2d'), viewport: viewport }; return page.render(renderContext); }) .catch(error => { console.error('Failed to load PDF:', error); }); ``` 在上述代码中,你需要将 `path/to/your/pdf.pdf` 替换为你要预览的实际 PDF 文件的路径。 这样,当你在浏览器中运行该代码时,就可以在指定的容器中看到 PDF 文档的预览了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值