首页 > Web开发 > 详细

使用pdf.js显示pdf文件

时间:2015-10-20 19:08:01      阅读:1425      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!