pdf.js清晰度提升办法

直接下载了pdfjs-dist依赖来展示pdf

解决方案

1.优先放大scale的参数，一般把1变为2，如果不够可以继续变大，大部分就能解决

这个方法缺点：如果展示pdf的位置不够大，scale越大，pdf中字体越细，锐度提高，如果展示pdf位置足够大，可以完美解决不够清楚的问题

2.在build/pdf.js文件，寻找DEFAULT_RANGE_CHUNK_SIZE配置项，并修改为65536*16

效果不明显，看不太出来

3.对canvas画布进行缩放 ，修改devicePixelRatio这个参数，将它扩大。

效果明显，如果屏幕分辨率100%情况展示正常，但是如果改变屏幕分辨率，会出现渲染不全的问题，一页只渲染出来一部分

    //渲染某一页PDF
    render(pageNum){
      const that = this;
      console.log(pageNum)
      this.pdfDoc.getPage(pageNum).then(function(page) {
        // 创建新的canvas
        const canvas = document.createElement(`canvas`);
        const context = canvas.getContext("2d");
        let devicePixelRatio = window.devicePixelRatio || 1;
        console.log(window.devicePixelRatio)
        let backingStoreRatio =
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio ||
          1
        that.pixelRatio = devicePixelRatio / backingStoreRatio;
        // console.log('devicePixelRatio:',devicePixelRatio,',backingStoreRatio:',backingStoreRatio,',pixelRatio:',that.pixelRatio);
        if (that.pixelRatio !== 1) that.transform = [that.pixelRatio, 0, 0, that.pixelRatio, 0, 0]
        var viewport = page.getViewport({ scale: that.scale, });
        canvas.width = viewport.width * that.pixelRatio;
        canvas.height = viewport.height * that.pixelRatio;
        canvas.style.width = viewport.width  + 'px';
        canvas.style.height = viewport.height + 'px';
        var renderContext = {
            canvasContext: context,
            viewport: viewport,
            transform: that.transform,
        };
        console.log(canvas)
        page.render(renderContext);
        
      });
      
    }

提高PDF预览的清晰度_jspdf分辨率_易de的博客-CSDN博客

4.DISABLE_AUTO_FETCH_LOADING_BAR_TIMEOUT的参数，将它扩大，pdf显示小，不够清晰。有一个重要的原因是默认dpi为96，然后网页一般使用dpi为72。

pc端改变不大

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

代码调整：

var CSS_UNITS = 96.0/ 72.0;

var renderContext = {
                transform: [CSS_UNITS, 0, 0, CSS_UNITS, 0, 0],
                canvasContext: ctx,
                viewport: viewport
            };

transform：就是和缩放相关的参数

function renderPage(num) {
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function(page) {
            var viewport = page.getViewport(scale);
            var CSS_UNITS = 96.0 / 72.0;
            canvas.height = Math.floor(viewport.height * CSS_UNITS);
            canvas.width = Math.floor(viewport.width * CSS_UNITS) ;

            // Render PDF page into canvas context
            var renderContext = {
                transform: [CSS_UNITS, 0, 0, CSS_UNITS, 0, 0],
                canvasContext: ctx,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);
        });
    }

pdf.js 入门使用指南2-显示篇_pdfjs getviewport_只看远方的博客-CSDN博客