pdf.js使用经历

Posted 2022-02-13 yangyuzhuo

----之前用的插件是pdfObject.js,但因为需求要禁止右键保存，即使把页面的右键禁止，插件的右键依然存在，并且在火狐浏览器上得下载后才能查看，所以改用pdf.js;

 

 

第一种方法:从官网下载pdf.js放到项目中后,用viewer.html显示正常;如果想要禁止右键操作并把头部工具栏也去掉

document.oncontextmenu=new Function("return false");
document.getElementById(‘viewerContainer‘).oncontextmenu=new Function("return false");
document.getElementById(‘viewerContainer‘).style.top=‘0‘;
document.getElementById(‘toolbarContainer‘).style.display=‘none‘;
我是直接在viewer.html里面加的
然后引用的页面

$("#showDoc").html(‘<iframe  id="txtTextarea" style="width: 100%;height:calc(100% - 3px);border: 0;overflow: auto" src="vens/pdfjs/web/viewer.html"></iframe>‘);document.getElementById("txtTextarea").contentWindow.file=url; //直接在页面后传路径作为参数的话会报错

 

第二种方法:页面中调用方法实现,这样就可以把web文件夹整个删除不需要了,只需要build里面的文件,方法是网上找的,但要加一句PDFJS.disableWorker = true;,不然会报错PDFJS is notdefined

var url =data.url; // pdf文件路径
$("#showDoc").html(‘<div id="the-canvas" style="text-align: center;"></div>‘);
//这句很重要,网上找的例子直接用会报错PDFJS is not defined,加上这句PDFJS.disableWorker = true;就可以了;
// 并且引用的pdfjs插件不是最新版本,最新版本引用后用官网的方法不显示,报错找不到原因
PDFJS.disableWorker = true;
PDFJS.workerSrc = ‘vens/pdfjs/build/pdf.worker.js‘;// /vens
window.onload = function () 
  //创建canvas方法
  function createPdfContainer(id, className) 
    var pdfContainer = document.getElementById(‘the-canvas‘);
    var canvasNew = document.createElement(‘canvas‘);
    canvasNew.id = id;
    canvasNew.className = className;
    pdfContainer.appendChild(canvasNew);
  ;

  //渲染pdf
  function renderPDF(pdf, i, id) 
    pdf.getPage(i).then(function (page) 
      //默认设置文档的显示大小
      var scale = 1.5;
      var viewport = page.getViewport(scale);
      //  准备用于渲染的 canvas 元素
      var canvas = document.getElementById(id);
      var context = canvas.getContext(‘2d‘);
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      // 将 PDF 页面渲染到 canvas 上下文中
      var renderContext = 
        canvasContext: context,
        viewport: viewport
      ;
      page.render(renderContext);
    );
  ;
  //创建和pdf页数等同的canvas数
  function createSeriesCanvas(num, template) 
    var id = ‘‘;
    for (var j = 1; j <= num; j++) 
      id = template + j;
      createPdfContainer(id, ‘pdfClass‘);
    
  
  //读取pdf文件，并加载到页面中
  function loadPDF(fileURL) 
    PDFJS.getDocument(fileURL).then(function (pdf) 
      //用 promise 获取页面
      var id = ‘‘;
      var idTemplate = ‘cw-pdf-‘;
      var pageNum = pdf.numPages;
      //根据页码创建画布
      createSeriesCanvas(pageNum, idTemplate);
      //将pdf渲染到画布上去
      for (var i = 1; i <= pageNum; i++) 
        id = idTemplate + i;
        renderPDF(pdf, i, id);
      
    );
  
  //启动
  loadPDF(url);
;
//把页面背景设为灰色,更有看pdf的感觉