pdfjs-dist.js使用、Svg、默认canvase、uni会报错ps1、图像不清晰的问题、隐藏功能

前言：
因为canvas是一个画图，所以我在适应移动端和pc端的时候出现了清晰度的问题问题，百度搜索了一下，整理出来

Ps：

pdf-dist和pdf.js一样的，你下载官方pdf的demo，里面有pdf-dist，而且文件还小，我就采用了pdf-dist，有问题可以直接留言，大部分时间会看的(别问太难的，我也不会)

ps1：

uni中canvas的canvas.getContext(‘2d’)被禁掉了应该，我直接使用的pdfh5做的，你也可以考虑svg，但我没用过，超级链接，我下面copy一下他的代码

1、我的原因是dpi 的原因

如上所描述，pdf显示小，不够清晰。有一个重要的原因是默认dpi为96，然后网页一般使用dpi为72。
具体dpi ,

DPI（Dots Per Inch，每英寸点数）是一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。
DPI是打印机、鼠标等设备分辨率的度量单位。是衡量打印机打印精度的主要参数之一，一般来说，DPI值越高，表明打印机的打印精度越高。
DPI是指每英寸的像素，也就是扫描精度。DPI越低，扫描的清晰度越低，由于受网络传输速度的影响，web上使用的图片都是72dpi，但是冲洗照片不能使用这个参数，必须是300dpi或者更高350dpi。例如要冲洗4*6英寸的照片，扫描精度必须是300dpi，那么文件尺寸应该是(4*300)*(6*300)=1200像素*1800像素。

代码调整：

其他的可以参考一下这个博主：飞机地址

2、Pdf-dist使用：

这种写法是为了防止pdf和ofd冲突，我都用了

data里面的声明变量你们自己调一下

3、如果你使用了pdf.js的iframe，

你想隐藏掉其他功能，你有没有考虑过使用css去隐藏，直接修改html、太慢，而且容易报错！！！

4、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));
            }
            });