简单高效网页中引用并直接加载PDF文件几种方法 

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

        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      });
    });
  </script>
</body>
</html>

上面这种方法适配度高，兼容性强。 

如果不想用这种方法， 采用<embed> 或 <iframe> 标签可以实现一样的效果。

 

posted @ 2025-01-16 09:22  黄文Rex  阅读(125)  评论(0)    收藏  举报