H5页面pdf预览插件pdf.js的使用及问题解决

// 引入PDF.js
import pdfjsLib from 'pdfjs-dist/build/pdf';
 
// 设置PDF.js的worker入口文件，这样可以避免跨域问题
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
 
// 创建一个用于预览的容器元素
const container = document.getElementById('pdf-container');
 
// 创建PDF.js的文档实例
let pdfDoc = null;
 
// 使用PDF.js加载PDF文件
function loadPDF(url) {
  pdfjsLib.getDocument(url).promise.then(
    (pdfDoc_) => {
      pdfDoc = pdfDoc_;
      renderPDFPage(1); // 渲染第一页
    },
    (reason) => {
      console.error('Error loading PDF: ', reason);
    }
  );
}
 
// 渲染PDF文档中的一页
function renderPDFPage(pageNumber) {
  pdfDoc.getPage(pageNumber).then(
    (page) => {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let viewport = page.getViewport({ scale: 1.5 }); // 可以调整scale来改变页面大小
 
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      container.appendChild(canvas);
 
      // 渲染页码
      let renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      page.render(renderContext).promise.then(
        () => {
          console.log('Page rendered');
        },
        (reason) => {
          console.error('Error rendering page: ', reason);
        }
      );
    },
    (reason) => {
      console.error('Error loading page: ', pageNumber, reason);
    }
  );
}
 
// 使用示例
loadPDF('path/to/your/pdf/file.pdf');

这段代码提供了一个简单的示例，展示了如何使用PDF.js来加载和渲染PDF文件的一页。代码中包含了基本的错误处理，以确保在遇到问题时有合适的反馈。在实际应用中，你可能需要根据自己的需求对这个示例进行扩展，比如添加页码导航、处理PDF文档的缩放和搜索功能等。