html 如何显示pdf文件

1. 使用或标签

<embed src="example.pdf" type="application/pdf" width="100%" height="600px">

或者

<object data="example.pdf" type="application/pdf" width="100%" height="600px">
    <p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="example.pdf">click here to download the PDF file.</a></p>
</object>

这种方法简单直接，但可能在某些浏览器上显示效果不如预期。

2. 使用标签

<iframe src="https://docs.google.com/gview?url=example.pdf&embedded=true" style="width:100%; height:600px;" frameborder="0"></iframe>

3. 使用PDF.js

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<canvas id="pdf-canvas"></canvas>
<script>
  var url = 'example.pdf';
  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function(pdf) {
    console.log('PDF loaded');
    
    // Fetch the first page
    var pageNumber = 1;
    pdf.getPage(pageNumber).then(function(page) {
      console.log('Page loaded');
      
      var scale = 1.5;
      var viewport = page.getViewport({scale: scale});
      
      // Prepare canvas using PDF page dimensions
      var canvas = document.getElementById('pdf-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      
      // Render PDF page into canvas context
      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);
      renderTask.promise.then(function () {
        console.log('Page rendered');
      });
    });
  }, function (reason) {
    // PDF loading error
    console.error(reason);
  });
</script>

这个方法的更多操作文档请查看官方文档https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/index.html