使用pdf.js显示pdf文件

最新推荐文章于 2025-06-19 17:26:54 发布

转载最新推荐文章于 2025-06-19 17:26:54 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuzhenwei/p/4895499.html

文章标签：

#javascript #ViewUI

本文介绍如何使用PDF.js库将PDF文件加载到网页中，并通过自定义选项进行调整，如设置缩放比例和预览页面。通过示例代码演示了如何使用jQuery将PDF文件展示在网页上。

<script type="text/javascript" src="build/pdf.min.js"></script>
<script type="text/javascript">
PDFJS.workerSrc = 'build/pdf.worker.min.js';
</script>
<script type="text/javascript">
$.fn.showPDF = function(pdfUrl, opt){
	var options = $.extend({
			scale: 1,
			pageNum: 1
		}, opt || {});

	this.each(function(){
		var pdfDoc,
			canvas = document.createElement('canvas'),
			ctx = canvas.getContext('2d');
		$(this).append(canvas);

		function renderPage(num) {
			pdfDoc.getPage(num).then(function (page) {
				var viewport;
				if( typeof(options.width) == 'number' ){
					viewport = page.getViewport(1);
					options.scale = options.width / viewport.width;
				}
				viewport = page.getViewport(options.scale);
				canvas.height = viewport.height;
				canvas.width = viewport.width;
				var renderContext = {
					canvasContext: ctx,
					viewport: viewport
				};
				page.render(renderContext).promise.then(function () {
					if( $.isFunction(options.afterShow) ){
						options.afterShow();
					}
				});
			});
		}

		if( $.isFunction(options.beforeShow) ){
			options.beforeShow();
		}

		PDFJS.getDocument(pdfUrl).then(function (doc){
			pdfDoc = doc;
			renderPage(options.pageNum);
		});
	});
}

$(function(){
	$('.pdfView').showPDF('1.pdf', {width: $(window).width()});
});
</script>

PDF.js https://mozilla.github.io/pdf.js/

转载于:https://www.cnblogs.com/liuzhenwei/p/4895499.html