pdf.js使用经历

Posted yangyuzhuo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了pdf.js使用经历相关的知识,希望对你有一定的参考价值。

----之前用的插件是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的感觉

 


 

以上是关于pdf.js使用经历的主要内容,如果未能解决你的问题,请参考以下文章

利用psd.js实现pdf文件在web端和移动端均可阅读

pdf.js使用小结

在线查看PDF文件,pdf.js使用方法

使用 PDF.js 生成 pdf 的缩略图

pdf.js 使用实例

离子v1使用inappbrowser和pdf.js打开pdf