pdfjs简单用法

已于 2023-09-15 15:50:31 修改
阅读量351 收藏
点赞数
文章标签： 前端 vue.js
于 2023-09-15 15:47:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24191395/article/details/132905138
版权

pdfjs

  1. GitHub : https://github.com/mozilla/pdf.js

  2. 官网 : https://mozilla.github.io/pdf.js/

  3. demo: https://mozilla.github.io/pdf.js/web/viewer.html

  4. 兼容ie的最新版 : 2.7.570

  5. 解压后放在 static/pdf目录下，使用iframe方式引入

    <iframe
    :src="`./static/pdf/web/viewer.html?file=${pdfUrl}`"
    class="pdf-window"
    width="100%"
    height="100%"
    frameborder="0"
></iframe>

  6. 解决电子签章不显示的问题

    • 2.5.207 : 批注掉build/pdf.worker.js文件中_this3.setFlags(_util.AnnotationFlag.HIDDEN);
    • 2.9.359之后的版本: 已经支持了现显示电子签章，直接使用

  7. 隐藏界面上的一些按钮 : 修改 web/viewer.js文件中webViewerInitialized方法 在前面添加

    appConfig.toolbar.presentationModeButton.hidden = true;
appConfig.toolbar.openFile.hidden = true;
appConfig.secondaryToolbar.openFileButton.hidden = true;
appConfig.toolbar.print.hidden = true;
appConfig.secondaryToolbar.printButton.hidden = true;
appConfig.toolbar.download.hidden = true;
appConfig.secondaryToolbar.downloadButton.hidden = true;
appConfig.toolbar.viewBookmark.hidden = true;
appConfig.secondaryToolbar.viewBookmarkButton.hidden = true;
appConfig.secondaryToolbar.toggleButton.hidden = true;
appConfig.findBar.toggleButton.hidden = true;
.....
NaClO_SYX
关注
pdfjs-2.9.359-dist.zip
08-03
H5和PC端都可用，只要设置一个iframe的src="'/static/pdf/web/viewer.html?file='文件地址#page=' 页码默认1就行"就可以了
pdfjs-2.15.349
最新发布
04-22
pdfjs-2.15.349
[前端]PDF预览PDFJS支持IE.zip
07-28
pdf预览，ie中pdf预览，下载，打印；浏览器中预览pdf，支持ie，基于pdf.js开发的demo，下载即用。
PDF.js的简单使用
小刘的博客
12-05 434
1.后端返回文件流，可在浏览器访问显示pdf的请求路径。 例如：http://localhost:8081/showFile?path=C:/Users/lhl/Desktop/files/pdf/b3c39656ea744095bd9eb52d48c51803.pdf这个可以在浏览器显示pdf.... 直接的话是调用的window的pdf。我想要隐藏下载和打印。做不到。 后端代...
pdfjs兼容ie浏览器
你好呀
04-25 986
将pdf文件路径重新编码 <script type="text/javascript"> $(function() { $("#pdfIframe").attr("src","localhost:8080/pdf/web/viewer.html?file="+encodeURIComponent("${pdfPath}")); }); //pdfPath是项目路径pdf文件路径 </script> <iframe width="100%" height="1
使用pdf.js显示PDF文件（兼容IE）
小轩的学习日志
08-25 3237
这里是2.x版本 注意如果包是以静态资源引入的 需要使用低版本的pdfjs包 低版本手动实现了Promise 2.x版本用了Es6语法。
web前端，pdf预览功能兼容火狐,IE,谷歌等浏览器，pdf.js
12-27
1. 解压 PDF前端预览功能.zip 压缩包，复制到网站开发目录； 2. 调用方式：window.open("Scripts/lib/PDF/web/viewer.html?file=" + window.location.protocol + "//" + window.location.host + "/test.pdf"); 3. 能支持多种浏览，火狐、IE、谷歌、360等，能支持本地文件直接浏览。
pdfjs解决ie浏览器预览pdf问题
TinaSlowDown的博客
09-12 3072
针对这个报错，一查发现是因为浏览器设置的默认文档模式是7，导致虽然我的浏览器是ie11，但实际是按照ie7来解析网页，而我的网页是不兼容ie7地，这可不就会报错嘛。要注意把viewer.js中的defaultUrl清空（这个变量的名称可能不同版本不一样，我当时的变量名是DEFAULT_URL，DEFAULT_URL = ‘compressed.tracemonkey-pldi-09.pdf’）。数据请求的问题完成了。官网已经不提供ie的下载渠道，搜索了一圈，发现用edge模拟是一个比较好的选择。
pdf.js pdf在线预览组件，支持IE,chrome
12-11
pdf.js pdf在线预览组件，支持IE,chrome多个浏览器，支持下载、打印功能。
浏览器显示PDF插件，pdfjs.zip，支持ie11和其他浏览器，傻瓜操作，不改代码
08-09
该写法适用于pdf流文件加载，一般情况下不需要修改，如果一定要动，其他部分不用改，只需要修改viewer.js中第4355-4380行代码，，最后var defaultUrl = array;保证defaultUrl中得到值就行了。 最后网页端传入写法：一个viewer.html？file1=+流文件地址即可
pdf.js最新版本
11-02
pdf.js上github最新代码，可以正常运行无问题，详见github
pdfjs最新稳定版
02-20
pdf.js 最新版本 pdf.js上github最新代码，可以正常运行无问题，详见github 为截至上传时间，当前的稳定版，官方的下载超级慢， 现分享出来。 其中build目录是PDF.js的核心文件。 web目录是PDF.js的配置与显示文件。 viewer.html是负责显示PDF的， viewer.js是负责配置的文件。 pdf.js-master 目录是源码 目录里的examples文件下的mobile-viewer对手机端开发是很好的例子
js插件方式打开pdf文件(浏览器pdf插件分享)
12-12
两种方案：一种直接链接，把pdf文件当作img文件,类似这种形式，这样链接： 代码如下:<frame src=”pdf文件的地址”></frame>另一种：使用js插件哈。其中实现阅读pdf文件的js插件很多，比如：pdf.js：是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持；jsPDF：是一个使用Javascript语言生成PDF的开源库（IE暂不支持）；比较简单易上手的js插件：PDFObject.js，是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档。效果如下： PDFObject.js目前已经升级到1.
js判断是否为ie的方法小结
12-11
下面第三种亲测可用 第一种： 代码如下:if(window.addEventListener){ alert(“not ie”); }else if(window.attachEvent){ alert(“is ie”); }else{ alert(“这种情况发生在不支持DHTML的老版本浏览器（现在一般都支持）”) } 第二种： 代码如下:if(document.all){ alert(“IE6”); }else{ alert(“not ie”); } 第三种： 代码如下:var navigatorName = “Microsoft Internet Explorer”; var isIE
pdf.js打包文件
11-16
pdf.js的源码通过gulp generic打包生成后，直接可以在web项目中使用的文件。
PDF预览 (引入pdf.js)
J_M_S_H_T的博客
10-22 1718
pdf.js是一款开源的pdf文档读取解析插件，据说在HTML5下诞生的，对于主流的浏览器基本都支持。 pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析 程序的结构翻译 build/ pdf.js                      display layer，显示层采用核心层并且暴露了一个更容易使用的API来渲染...
IE11线上显示pdf文件以及pdf.js用法
weixin_38992765的博客
06-03 2902
最近公司要求能够在ie上线上预览pdf插件 vue有vue-pdf插件可以用 但是js虽然有pdfjs等 但是新版本只支持谷歌浏览器（语法有箭头函数），所以在github找到了老版本的pdfjs，发现可用 代码为 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>'Hello, world!' example</title> <sty
pdf.js
houdabiao的博客
04-13 1058
http://blog.csdn.net/xiangcns/article/details/420[js学习笔记]PDF.js专题标签： javascriptpdf.js2014-12-22 23:01 56513人阅读 评论(77) 收藏 举报 分类： js（7）   C#（16）   ASP.NET（18）  版权声明：本文为博主原创文章，未经博主允许不得转载。目录(?)[+]前言    英文...
PDF.js使用
fighting的博客
12-01 501
PDF.js是一个由HTML5建立的PDF阅读器。依托开源社区驱动和Mozilla实验室的技术支持。目标是建立一个通用的，基于web的解析和渲染PDF文件的平台。 官网：http://mozilla.github.io/pdf.js/ (PDF.js(适配es5)) Mozilla原版fork版：https://github.com/ChineseDron/pdf.js# 原版链接：https://github.com/mozilla/pdf.js demo：http://mozilla.github.i
uniapp使用pdfjs-dist具体使用方法
06-07
好的，下面我来简单介绍一下使用pdfjs-dist在uniapp中显示PDF文件的具体步骤。 1. 安装pdfjs-dist库 在命令行中输入以下命令安装pdfjs-dist库： ``` npm install pdfjs-dist ``` 2. 引入pdfjs-dist库 在你的uniapp项目中找到需要使用pdfjs-dist库的页面，添加以下代码： ```javascript import pdfjsLib from 'pdfjs-dist'; ``` 3. 加载PDF文件 使用pdfjsLib.getDocument方法加载PDF文件并返回一个promise对象。具体代码如下： ```javascript pdfjsLib.getDocument(url).promise.then(function(pdf) { // Do something with the PDF file }); ``` 其中，url是PDF文件的URL地址。 4. 渲染PDF页面 获取PDF文件后，可以使用pdfjsLib对象中的getPage方法获取PDF文件的某一页，并使用canvas将其渲染到页面中。具体代码如下： ```javascript pdf.getPage(pageNumber).then(function(page) { var scale = 1.5; var viewport = page.getViewport({scale: scale}); // Prepare canvas using PDF page dimensions var canvas = document.getElementById('pdf-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); ``` 其中，pageNumber是需要渲染的PDF页面的页码，canvas是用于渲染PDF页面的canvas元素。在上面的代码中，我们使用scale来控制PDF页面的缩放比例，viewport用于计算PDF页面的大小，renderContext用于渲染PDF页面到canvas上。 5. 完整示例代码 ```vue <template> <canvas id="pdf-canvas"></canvas> </template> <script> import pdfjsLib from 'pdfjs-dist'; export default { mounted() { this.loadPdf(); }, methods: { loadPdf() { const url = 'https://example.com/sample.pdf'; // PDF文件的URL地址 pdfjsLib.getDocument(url).promise.then(function(pdf) { pdf.getPage(1).then(function(page) { var scale = 1.5; var viewport = page.getViewport({scale: scale}); // Prepare canvas using PDF page dimensions var canvas = document.getElementById('pdf-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); } } } </script> ``` 以上是在uniapp中使用pdfjs-dist库显示PDF文件的基本步骤和示例代码。希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值