使用pdf.js显示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/

 

posted @ 2015-10-20 17:40  刘镇维  阅读(3171)  评论(0编辑  收藏  举报