使用pdfjs和pdf.worker展示PDF

Only了了

已于 2022-06-23 10:43:47 修改

阅读量3k

点赞数 2

分类专栏： JS、JQuery 文章标签： js javascript html 前端

于 2022-06-23 10:33:02 首次发布

本文链接：https://blog.csdn.net/qq_21504583/article/details/125420833

版权

JS、JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

因需求所以要在页面显示PDF，查了很多都是使用标签去展示，可参考：【HTML】如何直接在网页中显示PDF文件?

以下为使用pdf.js预览PDF，话不多说，代码奉上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <%-- 主要是使用IE去显示 --%>
	<meta name="renderer" content="ie-stand"/>
    <%-- 但可能使用其他浏览器 --%>
	<meta name="force-rendering" content="webkit"/>
    <%-- 使用浏览器的最新内核 --%>
	<meta http-equiv="X-UA-Compatible" content="IE=EDGE,chrome=1"/>
	<meta http-equiv="Content-Type" content="text/html; charset=Big5"/>
	<script type="text/javascript" src="../js/pdf.js"></script>
	<style type="text/css">
        .PDF_showUi {
            // 显示边框
			#border:1px solid black;
            padding: 0px;
            // 控制 PDF 左边的空白不显示在元素内
			margin-left: -60px;
		}
		canvas {
            // 显示边框
			#border:1px solid black;
            padding: 0px;
            // 控制 PDF 上边的空白不显示在元素内
			margin-top: -20px;
		}
	</style>
    <script type="text/javascript">
        // 检查文件是否存在
        function fileExists(url){
            var isExists;
            $.ajax({
    		    url:url, // PDF路径
        		async:false,
        		type:'HEAD',
        		timeout:2000,
    	    	error:function(){
        			isExists=0;
        		},
        		success:function(){
        			isExists=1;
        		}
        	});
        	return (isExists==1);
        }

        /* 
         * 追加 PDF 显示在 元素
         * showUi： 显示的元素位置
         * pdf_Path_file：PDF路径
         */ 
        function add_PDF(showUi, pdf_Path_file) {
            // 检查文件是否存在
            if (!fileExists(pdf_Path_file)){
            	// not found pdf_Path_file
            	return;
    		}
            //  pdf.worker.js
            PDFJS.workerSrc = basePath+'/js/pdf.worker.js';
            var loadingTask = PDFJS.getDocument({ url: pdf_Path_file });
            loadingTask.promise.then(function(pdf) {
                // pdfPages PDF总页数
                var pdfPages = pdf.numPages;
                for (var i = 0; i <= pdfPages; i++) {
                    // 获取PDF每1页去显示
                    pdf.getPage(i).then(function(page) {
                        // 获取PDF的当前页
                        var pageNum = page.pageNumber;
                        // 縮放，放大
                        var scale = 10;
                        // 像素比，越小顯示越大
                        var pixelRatio = 7.7;
                        var viewport = page.getViewport(scale);
                        // create canvas
                        var canvas=document.createElement('canvas');
                        canvas.align = "left";
                        canvas.id = "pageNum" + pageNum;
                        var context = canvas.getContext('2d');

                        var transform = [pixelRatio, 0, 0, pixelRatio, 0, 0];
                        var width = 730;
                        var height = 1080;
                        canvas.width = width * pixelRatio;
                        canvas.height = height * pixelRatio;
                        canvas.style.height = height+"px";
                        canvas.style.width = width+"px";
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport,
                            transform : transform
                        };
                        page.render(renderContext);
                        showUi.className = "PDF_showUi";
                        showUi.appendChild(canvas);
                    });
                }
            });
        }
        function onload(){
            var pdf_Path_file = '../pdf/xxx.pdf; //pdf addr
	        add_PDF(document.getElementById("PDF_example1"), pdf_Path_file);
        }
</script>
</head>
<body onLoad="onload();">
<div id="PDF_example1" align="left"></div>
</body>
</html>

以下为一些参考文章

另外有关显示时，不同浏览器兼容问题，可参考：【META 标签的 HTTP-EQUIV=“X-UA-COMPATIBLE“ 使用说明】

参考：IE11线上显示pdf文件以及pdf.js用法

pdfjs和pdf.worker 可以在参考文章中下载

另外需要一个来判断显示的PDF是否存在

参考：js判断文件是否存在的两种方法

另外PDF预览可能会模糊，注意 scale & pixelRatio 的使用

参考：提高PDF预览的清晰度

Only了了

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
使用pdfjs和pdf.worker展示PDF

使用pdfjs和pdf.worker展示PDF因需求所以要在页面显示PDF以下为一些参考文章参考：IE11线上显示pdf文件以及pdf.js用法 pdfjs和pdf.worker 可以在参考文章中下载另外需要一个来判断显示的PDF是否存在参考：js判断文件是否存在的两种方法另外PDF预览可能会模糊，注意 scale & pixelRatio 的使用参考：提高PDF预览的清晰度......
复制链接

扫一扫

专栏目录