pdf.js 调用内部方法手动渲染pdf

最新推荐文章于 2024-02-05 15:52:47 发布

祥二爷

最新推荐文章于 2024-02-05 15:52:47 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/jialexiaoxuan/article/details/82697420

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、整理的代码，可自己梳理


var url = '//cdn.mozilla.net/pdfjs/tracemonkey.pdf';


PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 0.8,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

/**
 * Get page info from document, resize canvas accordingly, and render page.
 * @param num Page number.
 */
 //渲染某页pdf内容
function renderPage(num) {
  pageRendering = true;

  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport(scale);
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);


    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });

  document.getElementById('page_num').textContent = num;
}

//渲染队列
function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {
    renderPage(num);
  }
}

//预览前一页
function onPrevPage() {
  if (pageNum <= 1) {
    return;
  }
  pageNum--;
  queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

//下一页
function onNextPage() {
  if (pageNum >= pdfDoc.numPages) {
    return;
  }
  pageNum++;
  queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);



PDFJS.getDocument(url).then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;

  renderPage(pageNum);
});




$('#nav').on('mousewheel', function(event, delta) {
var dir = delta > 0 ? 'Up' : 'Down';
if (dir == 'Up') {
alert("向上滚动， www.imiansha.com");
} else {
alert("向下滚动");
}
return false;
});


需要监听的事件  键盘向下滚动的键，鼠标向下滚动





        /*阅读区域，渲染阅读文档*/		  
        var getPdfData = function (uri){
        	uri = $szoa_fileServiceUrl + '/file/preview?file=' + uri;
            var PDFData = "";
            $.ajax({
                type:"post",
                async:false,  //
                mimeType: 'text/pdf;charset=x-user-defined',
                //文件服务器预览接口地址（10.248.71.211:7001）
                //url:"https://csfile.szoa.sz.gov.cn/file/preview"+uri,
                url:uri,
                success:function(data){
                    PDFData = data;
        
                }
            });
            var rawLength = PDFData.length;
            //转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
            var arrayBf = new ArrayBuffer(rawLength)
            var array = new Uint8Array(arrayBf);
            for(i = 0; i < rawLength; i++) {
                array[i] = PDFData.charCodeAt(i) & 0xff;
            }
           DEFAULT_URL = array;
        }
		
		        	  //  $("#attachmentsView").append('<div class="outlineItem"><a href="' + 'http://localhost:8080/pdfjs/web/viewer.html?file='+mdata.pdfList[i].filePath+'">'+mdata.pdfList[i].fileName+'</a></div>');
        	  // $("#attachmentsView").append('<div class="outlineItem"><a href="javascript:getPdfData(\''+mdata.pdfList[i].filePath+'\');">'+mdata.pdfList[i].fileName+'</a></div>');
			  
			  
			  
			  
			  
			  
			    `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `create_user_id` varchar(50) DEFAULT NULL,
  `last_modify_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  
  alter table hc_hotel modify column create_time timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP;
  alter table hc_hotel modify column modify_time timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP;
  
  timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP

2、demo2

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .lightbox{
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            z-index: 7;
            opacity: 0.3;
            display: block;
            background-color: rgb(0, 0, 0);
        }
        .pop{
            position: absolute;
            left: 50%;
            width: 894px;
            margin-left: -447px;
            z-index: 9;
        }
    </style>
    <script src="../build/pdf.js"></script>
    <script type="text/javascript">
        function showPdf() {
            var container = document.getElementById("container");
            container.style.display = "block";
            var url = 'compressed.tracemonkey-pldi-09.pdf';
            PDFJS.workerSrc = '../build/pdf.worker.js';
            PDFJS.getDocument(url).then(function (pdf) {
                pdf.getPage(2).then(function (page) {
                    var scale = 1;
                    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById('the-canvas');
                    console.log(canvas);
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            });
        }
    </script>
</head>
<body>
    <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>
    <div id="container" style="display: none;">
        <div class="lightbox"></div>
        <div id="pop" class="pop">
            <canvas id="the-canvas"></canvas>
        </div>
    </div>
</body>
</html>

祥二爷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
pdf.js 调用内部方法手动渲染pdf

1、整理的代码，可自己梳理var url = '//cdn.mozilla.net/pdfjs/tracemonkey.pdf';PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';var pdfDoc = null, pageNum = 1, pageRendering = fal...
复制链接

扫一扫