PDF.js 渲染 PDF 文件放大后显示不全的解决方案

使用 PDF.js 渲染 PDF 文件时，可以通过设置 viewport 的 scale 属性来进行放大或缩小操作。如果设置 scale 为 1.5 后导致显示不全，可能是因为 viewport 的尺寸没有适配到容器的大小。

解决方法如下：

确保容器的尺寸足够大，以适应放大后的 PDF 页面。可以通过设置容器的宽度和高度来实现。
在设置 viewport 的 scale 属性之前，先获取 PDF 文档的原始尺寸，然后根据容器的尺寸计算出适应容器的缩放比例。

以下是一个示例代码，演示如何根据容器尺寸自动调整 PDF 页面的缩放比例：

// 获取容器元素
var container = document.getElementById('pdf-container');

// 初始化 pdfjs 渲染器
pdfjsLib.getDocument('example.pdf').promise.then(function(pdf) {
  // 获取第一页
  return pdf.getPage(1);
}).then(function(page) {
  // 获取 PDF 页面的原始尺寸
  var viewport = page.getViewport({ scale: 1 });

  // 根据容器尺寸计算缩放比例
  var containerWidth = container.offsetWidth;
  var scale = containerWidth / viewport.width;

  // 设置 viewport 的 scale 属性
  viewport = page.getViewport({ scale: scale });

  // 创建 canvas 元素用于渲染 PDF 页面
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  container.appendChild(canvas);

  // 渲染 PDF 页面
  var renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  page.render(renderContext);
});

通过以上方法，可以根据容器的尺寸自动调整缩放比例，确保 PDF 页面在放大后能够完整显示在容器内。