如何解决PDF.js渲染PDF文档分辨率低、显示模糊的问题？

我之前在使用PDF.js渲染PDF时也碰到过类似的模糊问题，结合你提供的代码片段，给你几个实用的解决办法：

1. 适配高DPI屏幕（最常用的解决方案） #

现在很多设备都是高分辨率屏幕（比如Retina屏），固定缩放比例会导致渲染内容模糊。你可以根据设备的像素比动态调整缩放：

var url = "https://www.myFilePath/1Mpublic.pdf";
PDFJS.getDocument(url)
  .then(function(pdf) {
    return pdf.getPage(1);
  })
  .then(function(page) {
    // 获取设备像素比，适配高DPI屏幕
    const deviceRatio = window.devicePixelRatio || 1;
    // 基础缩放+设备像素比，可根据需求调整基础值
    const scale = 1.2 * deviceRatio;
    
    var viewport = page.getViewport({ scale: scale });
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    
    // 设置canvas实际像素尺寸（匹配渲染分辨率）
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    // 设置canvas显示尺寸，避免页面布局变形
    canvas.style.width = (viewport.width / deviceRatio) + 'px';
    canvas.style.height = (viewport.height / deviceRatio) + 'px';
    
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });

2. 直接提高固定缩放比例 #

如果不需要适配多设备，也可以直接调高缩放值，但注意不要过大（比如超过2.0），避免性能损耗：

// 把缩放比例从1.2调整到2.0，提升渲染分辨率
var viewport = page.getViewport({ scale: 2.0 });

3. 启用高质量渲染配置 #

在渲染时添加额外参数，强制开启抗锯齿和高性能渲染：

var renderContext = {
  canvasContext: context,
  viewport: viewport,
  antialias: true, // 启用抗锯齿，减少边缘模糊
  enableWebGL: true // 支持WebGL的设备会用硬件加速，提升渲染质量
};
page.render(renderContext);

4. 检查PDF源文件分辨率 #

如果以上方法都没改善，可能是PDF文档本身的分辨率就很低。可以尝试用专业PDF工具重新导出高分辨率版本后再渲染。

内容的提问来源于stack exchange，提问作者jamesMcKey