pdf.js使用经历

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

 

 

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

document.οncοntextmenu=new Function("return false");
document.getElementById('viewerContainer').οncοntextmenu=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的感觉

 

 
 
 

转载于:https://www.cnblogs.com/yangyuzhuo/p/11089253.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值