Pdfjs-dist 填坑日记
Pdfjs-dist 填坑日记第一版优点缺点第一版第二版第一版vue mobile 项目中一个需求是预览pdf,需要能加水印,可以缩放,另外需要无污染零添加。找到了pdfjs-dist。优点H5实现,功能比较强大。缺点文档真的一般。第一版网上找了个例子,写上,发现好用。let vm = this;let url = xxxxx;var canvas = document.ge...
第一版
vue mobile 项目中一个需求是预览pdf,需要能加水印,可以缩放,另外需要无污染零添加。找到了pdfjs-dist。
优点
H5实现,功能比较强大。
缺点
文档真的一般。
第一版
网上找了个例子,写上,发现好用。
let vm = this;
let url = xxxxx;
var canvas = document.getElementById('the-canvas');
PDFJS.getDocument(
url
).then(function (pdf) {
pdf.getPage(num).then(function (page) {
if (vm.initFlag) {
vm.scale = document.body.getBoundingClientRect().width / page.view[2];
vm.minScale = vm.scale;
}
var viewport = page.getViewport(vm.scale);
var context = canvas.getContext('2d');
vm.initFlag = false;
canvas.height = viewport.height;
canvas.width = viewport.width;
context.globalCompositeOperation='source-over';
context.globalAlpha=0.2;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
document.querySelector('.scroll-content-info').style.width = document.querySelector('#the-canvas').getBoundingClientRect().width + 'px';
vm.$refs.scroll.refresh();
Util.setLoading(!1);
!vm.pdfWaterMark && Util.getUserInfo(vm.addWaterMarker);
});
});
PDFJS.getDocument({data:
atob(this.pdfData),
cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/',
cMapPacked: true
}).then(function (pdfDoc_) { //初始化pdf
vm.pdfDoc = pdfDoc_;
vm.pageTotal = vm.pdfDoc.numPages;
!vm.pdfWaterMark && Util.getUserInfo(vm.addWaterMarker);
}).catch(function (err) {
if (err) {
console.log(err)
vm.throwerr(vm.pdfurl)
}
})
第一个坑来了:
1、后端战友的接口之前定的是返回base64,可这里的参数是个url。那么去网上找发现参数可以直接传data。
2、中文字符不显示。发现可以加cMapUrl解决
修改如下:‘
url 替换成
{data:
atob(base64Str),
cMapUrl: ‘https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/’,
cMapPacked: true
}
第二版
第一版开开心心的写好了,交给了产品经理。
突然问题又来了,原来的版本是基于canvas的 ,如果使用pdf缩放功能(自己实现)。那么就需要对canvas进行重绘。这样会导致ui出现闪烁的情况,用户体验非常不好。那么怎么办呢?
找了半天毫无头绪,看看pdfjs-dist 源码发现有svg的实现。发现 可以这么用
let vm = this;
PDFJS.getDocument({data:
atob(Base64Str),
cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/',
cMapPacked: true
}).then(function(pdf) {
var numPages = pdf.numPages;
var MAX_NUM_PAGES = 5;
var ii = Math.min(MAX_NUM_PAGES, numPages);
var promise = Promise.resolve();
for (var i = 1; i <= ii; i++) {
if(document.querySelector('[name="page='+i+'"]')){
let container = document.querySelector('[name="page='+i+'"]').children[0];
var viewport = vm.pdfPage.getViewport(vm.scale);
document.querySelector('.pageContainer').children[0].width.baseVal.value = viewport.width;
document.querySelector('.pageContainer').children[0].height.baseVal.value = viewport.height;
container.style.width = viewport.width + 'px';
container.style.height = viewport.height + 'px';
document.querySelector('.scroll-content-info').style.width = document.querySelector('.pageContainer').getBoundingClientRect().width + 'px';
return;
}
var anchor = document.createElement('a');
anchor.setAttribute('name', 'page=' + i);
anchor.setAttribute('class', 'pdfATag');
anchor.setAttribute('title', 'Page ' + i);
document.getElementsByClassName("scroll-content-info")[0].appendChild(anchor);
// Using promise to fetch and render the next page
promise = promise.then(function (pageNum, anchor) {
return pdf.getPage(pageNum).then(function (page) {
vm.pdfPage = page;
var viewport = page.getViewport(vm.scale);
var container = document.createElement('div');
container.id = 'pageContainer' + pageNum;
container.className = 'pageContainer';
container.style.width = viewport.width + 'px';
container.style.height = viewport.height + 'px';
anchor.appendChild(container);
return page.getOperatorList().then(function (opList) {
var svgGfx = new PDFJS.SVGGraphics(page.commonObjs, page.objs);
return svgGfx.getSVG(opList, viewport).then(function (svg) {
container.appendChild(svg);
document.querySelector('.scroll-content-info').style.width = document.querySelector('.pageContainer').getBoundingClientRect().width + 'px';
vm.$refs.scroll.refresh();
Util.setLoading(!1);
!vm.pdfWaterMark && Util.getUserInfo(vm.addWaterMarker);
});
});
});
}.bind(null, i, anchor));
}
});
开不开心~~
Pdfjs-dist相关文档:
https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions
https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
https://github.com/mozilla/pdf.js/tree/master/examples/mobile-viewer
https://blog.csdn.net/niedewang/article/details/80136635
更多推荐
所有评论(0)