如何修改pdf.js脚本，提升大尺寸PDF的最大渲染分辨率至100%？

核心原因 #

你的PDF页面尺寸（2766.8×2531.8mm）换算为像素后，在40%缩放比例下的像素总量触达了PDF.js默认的最大画布像素限制，导致超过该比例时不再渲染高清内容，转而拉伸低分辨率缓存图。

修改步骤 #

1. 调整PDF.js的最大画布像素限制

   • 打开pdf.js核心文件，搜索maxCanvasPixels变量（默认值通常为16384 * 16384 = 268435456）。
   • 根据你的PDF尺寸计算所需像素：按96DPI换算，2766.8mm≈10500px，2531.8mm≈9600px，总像素约100800000。将maxCanvasPixels设为大于该值的数，例如：

     const maxCanvasPixels = 500000000; // 5亿像素，足够覆盖你的PDF高清渲染需求
     

2. 修改Viewer的缩放上限

   • 打开viewer.js，搜索控制最大缩放的变量（如MAX_SCALE或DEFAULT_MAX_SCALE，默认值通常为4即400%）。
   • 将其调整为更大的值，确保缩放控件支持到100%以上：

     const MAX_SCALE = 10; // 允许最高1000%缩放
     

3. 禁用低分辨率缓存（可选）

   • 若仍存在拉伸问题，可在Viewer初始化时添加渲染配置，强制每次缩放都重新生成高清内容：
     在viewer.js中找到PDFViewer初始化的代码块，添加rendererOptions参数：

     const viewer = new PDFViewer({
       container: container,
       rendererOptions: {
         disableAutoFetch: false,
         disableStream: false,
         maxCanvasPixels: 500000000 // 与pdf.js中设置的值保持一致
       }
     });
     

验证 #

修改后重新部署代码，加载你的超大PDF，尝试缩放至100%及以上，此时页面会重新渲染对应比例的高清内容，而非拉伸低分辨率图。

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