前端遭遇一个坑，pdfjs-dist getViewport 获取不到宽高，学着就这样办

2023-01-30 04:43:15

H5移动端PDF预览：解决Viewport获取不到宽高和翻转问题

问题：Viewport获取不到宽高

在使用PDF.js渲染PDF文档时，可能会遇到getViewport方法获取不到文档宽高的bug。原因在于，在调用getViewport之前，需要先使用render方法渲染文档。

解决方案：

const pdfDoc = await PDFJS.getDocument(pdfUrl);
await pdfDoc.getPage(1).render();
const viewport = pdfDoc.getPage(1).getViewport({ scale: 1 });

问题：PDF文档翻转

在移动端预览PDF时，有时文档会被翻转90度。这是因为PDF元数据中的"Orientation"字段标记为"Landscape"，表示文档为横向。

解决方案：

const pdfDoc = await PDFJS.getDocument(pdfUrl);
const pdfInfo = await pdfDoc.getInfo();
if (pdfInfo.Orientation === "Landscape") {
  pdfDoc.metadata.Orientation = "Portrait";
}

其他注意事项

除了上述问题外，在使用PDF.js进行PDF预览时，还需注意以下几点：

使用CDN加载PDF.js库以确保快速加载和稳定性。
在移动端使用事件监听器监控页面滚动和缩放事件，以动态调整Canvas大小。
在页面销毁时释放PDF.js文档，以释放内存。

示例代码

import PDFJS from "pdfjs-dist/build/pdf";

// 加载PDF文档
const loadPDF = async (pdfUrl) => {
  const pdfDoc = await PDFJS.getDocument(pdfUrl);

  // 初始化Canvas
  const canvas = document.getElementById("pdf-canvas");
  const ctx = canvas.getContext("2d");

  // 设置初始页码和缩放比例
  const pageNumber = 1;
  const scale = 1;

  // 渲染页面
  const page = await pdfDoc.getPage(pageNumber);
  await page.render({ canvasContext: ctx, viewport: page.getViewport({ scale }) });
};

// 监控页面滚动和缩放事件
window.addEventListener("scroll", () => {
  // 调整Canvas大小
});

window.addEventListener("resize", () => {
  // 调整Canvas大小
});

// 页面销毁时释放PDF文档
window.addEventListener("unload", () => {
  pdfDoc.destroy();
});