PDFJS使用上遇到的一些问题

最新推荐文章于 2024-02-24 14:18:46 发布
最新推荐文章于 2024-02-24 14:18:46 发布
阅读量2.8k 收藏 3
点赞数 2
分类专栏： 遇到的坑 文章标签： http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yukiahong/article/details/112862142
版权

PDFJS使用上遇到的一些问题

之前做项目的时候需要在移动端和PC上在线预览pdf文件，就使用了pdfjs，pdfjs是1.X的忘记了，由于项目要预览的pdf文件不大一直没有发现问题，现在遇到需要预览9M以上的pdf就会出现一个奇怪的问题，预览一直在转圈圈出不来，打开调试后发现有一个报错
在这里插入图片描述
在这里插入图片描述
多次刷新的话是可以正常加载出来，也不会报错。网上查询了一些方法：有的说是要把pdfjs设置成切片加载的方式，但是pdfjs在服务端支持的情况下默认就是切片加载了（我的服务端是Apache2.4的，是支持的，从截图上看已经是切片加载的方式了）。有的说可以把pdfjs设置成按需加载的方式看看，结果也是一样。就这个问题折腾了很久，重新下载了个pdfjs版本号是2.5.207的就正常了。也不用做任何设置，晕了。
pdfjs设置成按需加载，打开viewer.js
在这里插入图片描述
动态修改要加载的pdf文件
在这里插入图片描述
把值修改为自己定义的动态值就可以了，我自己定义的是DEFAULT_URL
在这里插入图片描述
要在显示pdf的页面上的title显示为自定义的名称（默认是显示pdf的标题加文件名的），filetitle是我自己定义的显示名称
在这里插入图片描述
在这里插入图片描述

yukiahong
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
pdf.js和pdf.worker.js
10-23
pdf.js框架的魅力所在，为其为HTML5实现的，无需任何本地支持，而且对浏览器的兼容性也是比较好，要求只有一个：浏览器支持HTML5就好了！
PDF.js介绍以及使用
热门推荐
php-yyds
12-23 1万+
总的来说，PDF.js提供了一种在Web浏览器中展示和操作PDF文件的解决方案，使用户能够直接在浏览器中浏览和使用PDF，而无需依赖外部的PDF阅读器插件或专门的PDF编辑工具。PDF.js是一个JavaScript库，可以在现代Web浏览器中渲染和显示PDF文件。同时，需要确保PDF.js和相关依赖的正确引入，以及正确指定PDF文件的路径和文件名。这段代码是使用PDF.js库在浏览器中显示PDF文件的示例。// 将PDF页面渲染到元素中。// 将元素添加到容器中。
SpringBoot+PDF.js实现按需分片加载预览（包含可运行示例源码）
后端开发
02-24 2165
本文的解决方案旨在解决大体积PDF在线浏览加载缓慢、影响用户体验的难题。通过利用分片加载技术，前端请求时附带range及读取大小信息，后端据此返回相应的PDF文件流。这种方式有效地减轻了服务器和浏览器的负担，提升了加载速度和用户体验。同时解决了首次加载全部分片导致浏览器内存不足的问题。技术栈：Spring Boot、Vue和pdf.js。
使用pdf.js插件展示pdf文件不能使用绝对路径的问题。
LZ_WuYanZu的博客
04-23 3435
使用pdf.js插件展示pdf文件不能使用绝对路径的问题。 下载pdf.js插件(官网地址) http://mozilla.github.io/pdf.js/ 下载解压以后的目录文件: 引入到你的项目里面: 由于我是嵌在web页面中的，所以我使用了iframe标签: 1 <iframe src="<c:url value="plugins/pdfjs/web/viewer.html...
使用PDF.js踩坑记~
AlaiaCodeingLife
07-09 4588
想要查看前面的笔记请翻阅我的CSDN博客，作者码字不易，喜欢的话点赞，加个关注吧，后期还有很多干货等着你！ 项目场景： 目前遇到需求，需要在pc端打开pdf预览 解决方案： 发现有许多成熟的方案，最终决定使用PDF.js进行开发 首先先在官网下载 http://mozilla.github.io/pdf.js/getting_started/#download 下载完成后目录结构是这样： 我们打开web后点击： 这里有一个坑，我怎么都打不开，结果最后发现是因为需要启动服务才能使用这里我使用的是li
PDF.js特殊字体、水印加载不出来问题解决
qq_42434923的博客
05-28 5728
问题描述：用PdfViewer在线阅读部分pdf文件时，部分文字加载不出来，浏览器network网络请求下locale.properties、GBK-EUC-H.bcmap这两个文件报404错误。 问题可能原因： 1.viewer.js文件内的PDFJS.cMapUrl这个字体文件路径配置错误 PDFJS.cMapUrl = '/Content/pdf.js/web/cmaps/'; PDFJS.cMapPacked = true; 2.IIS的MIME问题，像.bcmap、.svg、.woff、
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
weixin_43604585的博客
06-19 3283
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览，安卓不行，所以使用pdf.js来解决，之前项目用过该插件很好用，但是今天使用的时候发现根本没有访问到viewer.html 首先该项目为Vue Cli脚手架构建的项目所以没有常见的静态资源包static,所以我在src平级新建了static文件夹，但是发现并不能访问到viewer.html pdf.js下载地址：pdf.js下载地址 下载后解压复制到static 页面： <iframe :src="src" width="1
pdfjs src路径中文件标题带#无法访问
bozudaoren的博客
09-12 223
问题：用pdfjs进行pdf预览时，文件名中带#或其他字符时，无法显示。结论：先将#替换，在对其进行encode编码。其中uri为文件的url。
使用pdfviewer预览报错PDF.js v2.9.359 (build: e667c8cbc)信息：file origin does not match viewer‘s
m0_59157023的博客
10-07 1623
使用pdfviewer预览报错PDF.js v2.9.359 (build: e667c8cbc)信息：file origin does not match viewer's
关于低版本安卓（4.X版本），华为等手机下，vue.js页面失效的问题
hello world.
09-20 2294
关于低版本安卓（4.X版本），华为等手机下，vue.js页面失效的问题将页面在IE浏览器中打开 将页面在IE浏览器中打开 接着打开F12，把所有的报错解决即可，并且需要把页面内的ES6转换为ES5。 ...
pdf文件预览，有的文件显示空白
qq_45475602的博客
11-16 6390
vue-pdf文件预览踩坑 当时做的时候我就选用了比较简单的vue-pdf插件，因为我觉得pdfjs-dist太复杂，我是不喜欢麻烦的人，然后就有了接下来的坑 1、不显示签名问题： 控制台报：1：Warning: Error during font loading: Failed to execute ‘postMessage’ on ‘Worker’: ArrayBuffer at index 0 is already detached. 2：Warning: Unimplemented widget f
PDFJS使用的CMap字体文件
最新发布
04-25
适合人群：前端开发 应用场景：PDF文件使用了pdfjs不支持的字体文件，这时，需要额外为pdfjs提供字体文件
pdfjs可用版本pdfjs可用版本pdfjs可用版本
09-05
pdfjs可用版本pdfjs可用版本pdfjs可用版本
pdfjs快速使用入门
09-17
pdfjs快速使用入门
vue使用pdfjs显示PDF可复制的实现方法
10-17
主要介绍了vue使用pdfjs显示PDF可复制的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
pdfjs_1.1.159添加在指定页码使用关键词检索
09-16
pdfjs_1.1.159内添加在指定页码使用关键词进行在当前页面进行检索，并且可选所有关键词高亮
android webview PDF.js 打开sd卡中的pdf文件，在无数个坑中爬过。
清叶 的专栏
10-13 838
简单粗暴直接上代码 activity_showpdf.xml <ProgressBar android:id="@+id/pb_pdf" style="?android:attr/progressBarStyleHorizontal" android:layout_width="fill_parent" android:layout_height="8dip" android:indeterminateOnly="f
pdf.js 版本引发问题You may need an appropriate loader to handle this file type.
qq_34907249的博客
08-09 1859
说明pdf.js 版本不对。换成2.0.943版本。
pdf在html网页中打开是乱码,pdf.js浏览中文pdf乱码的问题解决
weixin_32445717的博客
06-15 3084
由于项目中需要支持移动设备在线浏览pdf，苹果还好，天生支持，但是安卓中就不行了，需要第三方组件的支持。这里就找到了pdf.js，由于pdf数据太多，开始的时候没法一一测试，所以随便测试打开了几篇没问题后就直接上线了。但是后面就悲剧了，偶然收到反馈，有些pdf无法正常浏览，此为写本文的原因。具体的现像查找问题过程一、用火狐(火狐解析pdf是用的pdf.js)来直接打开这篇pdf，发现居然是对的，那...
pdfjs2.3渲染首张图横向问题怎么解决
09-09
### 回答1： 您可以尝试在代码中添加以下语句来解决pdfjs2.3渲染首张图横向问题： PDFJS.getDocument(url).then(function(pdf) { pdf.getPage(1).then(function(page) { var viewport = page.getViewport({scale: 1}); var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if (viewport.width > viewport.height) { canvas.width = viewport.width; canvas.height = viewport.height; context.rotate(Math.PI / 2); context.translate(, -canvas.width); } else { canvas.width = viewport.width; canvas.height = viewport.height; } var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); 希望能帮到您。 ### 回答2： pdfjs 2.3是一款用于在网页上渲染PDF文件的JavaScript库。横向渲染首张图的问题可以通过以下几种方式解决。 1. 设置渲染方向：使用pdfjs库提供的API，可以设置渲染方向。通过将渲染方向设置为横向，可以解决渲染首张图横向的问题。 2. 调整页面布局：在网页中，可以通过调整页面布局来解决渲染首张图横向的问题。可以使用CSS样式将页面布局调整为纵向，并且限制首张图的宽度，以确保首张图按照正确的方向渲染。 3. 更新pdfjs版本：如果当前使用的是较早的版本，可能存在渲染首张图横向的问题。可以尝试升级到较新的版本，很可能已经修复了该问题。 4. 修改PDF文件：如果PDF文件本身存在问题导致渲染首张图横向，可以尝试使用PDF编辑软件对PDF文件进行修改。可以调整页面方向或旋转首张图，以解决横向渲染的问题。 总之，针对pdfjs 2.3渲染首张图横向的问题，可以通过设置渲染方向、调整页面布局、升级pdfjs版本或修改PDF文件等多种方式来解决。具体的解决方法可以根据具体情况选择。 ### 回答3： 要解决pdfjs2.3渲染首张图横向的问题，我们可以尝试以下方法： 1. 检查pdf文件的方向：首先，我们需要确认pdf文件的方向是否正确。可以使用其他pdf阅读器打开文件，检查是否显示为纵向。如果方向不正确，可以尝试使用pdf处理工具进行旋转操作，将文件方向调整为正确的纵向。 2. 调整页面布局：pdfjs2.3提供了页面布局调整的功能，可以通过更改页面的CSS样式来解决渲染横向问题。可以在调用pdfjs渲染页面的代码中，添加自定义的CSS样式，将页面布局调整为纵向。具体的方法是使用CSS中的transform属性，向页面添加适当的旋转角度。 3. 更新pdfjs版本：如果以上方法无效，可以尝试更新pdfjs的版本。可能新的版本已经修复了渲染首张图横向的问题。可以在pdfjs的官方网站或开发者社区中查找最新的版本，并更新到系统上使用。 需要注意的是，pdfjs是一个开源的项目，可能会存在一些bug或者限制。在遇到问题时，可以查阅官方文档、开发者论坛或者相关的技术资料，获取更多有关pdfjs渲染首张图横向问题解决方法的信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值