pdfjs-dist展示pdf

pdfjs-dist是一个基于JavaScript的PDF阅读器库，可以在Web浏览器中展示PDF文档。以下是使用pdfjs-dist展示PDF文档的一些基本步骤：

1. 从 https://github.com/mozilla/pdf.js/releases 下载pdfjs-dist库，并将其添加到您的Web应用程序中。

2. 创建一个HTML元素，用于在其中呈现PDF文档的内容：

<div id="pdfViewer"></div>

3. 通过JavaScript代码加载PDF文档：

var url = 'path/to/pdf/document.pdf';
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdf.worker.js';
pdfjsLib.getDocument(url).promise.then(function(pdf) {
  // PDF文档加载完成后的回调函数
  // 获取第一页
  pdf.getPage(1).then(function(page) {
    // 创建一个canvas元素，用于在其中呈现PDF页面的内容
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    // 获取页面的viewport
    var viewport = page.getViewport(1.0);

    // 设置canvas元素的大小
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // 渲染PDF页面内容到canvas元素中
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext).promise.then(function() {
      // 将canvas元素添加到HTML中
      var pdfViewer = document.getElementById('pdfViewer');
      pdfViewer.appendChild(canvas);
    });
  });
});

这段代码将加载PDF文档并将其第一页呈现在一个canvas元素中，然后将该canvas元素添加到id为"pdfViewer"的HTML元素中。

注意：pdfjs-dist库依赖于pdf.worker.js文件，该文件应该与pdf.js文件一起下载。如果您使用的是CDN，则可以使用以下代码来设置workerSrc：

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.worker.min.js';

这将使用CDN上的pdf.worker.js文件。