pdf.js 报错

PDF.js 报错可能有多种原因，以下是一些常见的问题及其解决方法：

基础概念

PDF.js 是一个由 Mozilla 开发的用于解析和渲染 PDF 文件的 JavaScript 库。它可以在浏览器中直接显示 PDF 文件，而无需依赖任何插件。

常见报错及原因

CORS 错误：
- 原因：跨域资源共享（CORS）问题，浏览器阻止了从不同源加载的资源。
- 解决方法：确保服务器设置了正确的 CORS 头，允许跨域请求。
- 解决方法：确保服务器设置了正确的 CORS 头，允许跨域请求。

加载 PDF 文件失败：
- 原因：PDF 文件路径错误或文件不存在。
- 解决方法：检查 PDF 文件的 URL 是否正确，确保文件存在且可访问。
渲染错误：
- 原因：PDF 文件格式不正确或损坏。
- 解决方法：确保 PDF 文件格式正确且未损坏，可以尝试在其他 PDF 阅读器中打开文件。
内存不足：
- 原因：PDF 文件过大，导致浏览器内存不足。
- 解决方法：优化 PDF 文件大小，或使用分页加载等技术减少内存占用。
JavaScript 错误：
- 原因：PDF.js 库本身或用户代码中的 JavaScript 错误。
- 解决方法：检查浏览器控制台中的具体错误信息，调试相关代码。

示例代码

以下是一个简单的 PDF.js 使用示例：

<!DOCTYPE html>
<html>
<head>
  <title>PDF.js Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
</head>
<body>
  <canvas id="pdf-canvas"></canvas>
  <script>
    pdfjsLib.getDocument('example.pdf').promise.then(function(pdf) {
      return pdf.getPage(1);
    }).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({ scale: scale });
      var canvas = document.getElementById('pdf-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      page.render(renderContext);
    }).catch(function(error) {
      console.error('Error loading PDF:', error);
    });
  </script>
</body>
</html>