Pdfjs-dist 填坑日记

第一版

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/[email protected]/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/[email protected]/cmaps/’,
cMapPacked: true
}

第二版

第一版开开心心的写好了，交给了产品经理。
突然问题又来了，原来的版本是基于canvas的 ，如果使用pdf缩放功能（自己实现）。那么就需要对canvas进行重绘。这样会导致ui出现闪烁的情况，用户体验非常不好。那么怎么办呢？
找了半天毫无头绪，看看pdfjs-dist 源码发现有svg的实现。发现 可以这么用

            let vm = this;
            PDFJS.getDocument({data: 
                    atob(Base64Str),
                    cMapUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/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