zoukankan      html  css  js  c++  java
  • 使用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', { $(window).width()});
    });
    </script>
    

      

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

  • 相关阅读:
    ajax传json
    JSON 转 VO
    字符串转数组
    "No 'Access-Control-Allow-Origin' header"跨域问题CROS
    jdbc连接SQLServer
    Jquery判断checkbox选中状态
    JSON与null
    点击劫持
    Eclipse 入手配置
    SQL练习(一)
  • 原文地址:https://www.cnblogs.com/liuzhenwei/p/4895499.html
Copyright © 2011-2022 走看看