移动端在线预览pdf显示签名签章pdf显示多页

最新推荐文章于 2024-05-27 17:18:21 发布

老马不亏

最新推荐文章于 2024-05-27 17:18:21 发布

阅读量1.1w

点赞数

分类专栏： javascript 文章标签：在线预览pdf pdf.worker.js显示签章显示多页pdf

本文链接：https://blog.csdn.net/kdksz/article/details/79923725

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果如图，可显示多页pdf，可显示签章，在移动设备也一样

 <html>
  <head>
     <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
          .lightbox{
              position: fixed;
              top: 0px;
              left: 0px;
             height: 100%;
             width: 100%;
             z-index: 7;
             opacity: 0.3;
             display: block;
             background-color: rgb(0, 0, 0);
         }
         .pop{
             position: absolute;
             left: 50%;
             width: 894px;
             margin-left: -447px;
             z-index: 9;
         }
     </style>
     <script src="../build/pdf.js" type="text/javascript"></script>
      <script src="getUrlParam.js"  type="text/javascript"></script>
     <script type="text/javascript">
			function showPdf()
            {
		            var container = document.getElementById("container");
		            var url= UrlParm.parm("pdfpath");
		            PDFJS.workerSrc = '../build/pdf.worker.js';
		       
		            PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
		                for (var i = 1; i < pdf.numPages+1; i++) {
		                    pdf.getPage(i).then(function getPageHelloWorld(page) {
		                        var scale = 1.5;
		                        var viewport = page.getViewport(scale);
		                        var canvas = document.createElement('canvas');
		                        var context = canvas.getContext('2d');
		                        canvas.height = viewport.height;
		                        canvas.width = viewport.width;
		                        // 这里拿body当pdf容器
		                        document.body.appendChild(canvas);
		                        page.render({ canvasContext: context, viewport: viewport });
		                    });
		                }
		            });
			}
     </script>
 </head>
 <body οnlοad="showPdf()">
 </body>
 </html>

自己定了一个页面，这里用到了pdf.worker.js，网上的另一种方式是直接调用谷歌的viewer.html。但是没用用到pdf.worker.js所以你去编辑pdf.worker.js也没用，签章还是不会出来

var url= UrlParm.parm("pdfpath");

这里用了getUrlParam.js

所以调用页面的时候也跟viewer.html一样

localtion.href = 'pdfviewer.html?pdfpath=' + url就行了

附上pdf.js和已经修改好的pdf.worker.js

下图是pdf.worker.js显示签章部分

老马不亏

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
移动端在线预览pdf显示签名签章pdf显示多页

效果如图，可显示多页pdf，可显示签章，在移动设备也一样 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; .lightbox
复制链接

扫一扫