码迷,mamicode.com
首页 > Web开发 > 详细

使用pdf.js显示pdf文件

时间:2015-10-20 19:09:08      阅读:378      评论:0      收藏:0      [点我收藏+]

标签:

<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/

 

使用pdf.js显示pdf文件

标签:

原文地址:http://www.cnblogs.com/liuzhenwei/p/4895499.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!