html 展示pdf

在HTML中展示PDF文档，通常需要借助于特定的插件或者HTML5提供的功能。以下是几种常见的方法：

1. 使用`<iframe>`标签嵌入PDF文件：
可以通过`<iframe>`标签的`src`属性指向PDF文件的URL地址来嵌入PDF。例如：

   <iframe src="http://example.com/path/to/your/document.pdf" width="800" height="600"></iframe>

这种方法简单易用，但需要用户安装Adobe Reader或其他PDF阅读器插件。

2. 使用`<embed>`或`<object>`标签嵌入PDF文件：
这两个标签也常用来嵌入PDF，它们的功能相似，但`<object>`标签在某些情况下更被推荐。

   <embed src="http://example.com/path/to/your/document.pdf" width="800" height="600">

或者

   <object data="http://example.com/path/to/your/document.pdf" width="800" height="600"></object>

这些标签同样需要插件支持。

3. 使用JavaScript库，如PDF.js：
PDF.js是由Mozilla开发的一个纯JavaScript实现的PDF阅读器，可以直接在支持HTML5的浏览器中无需任何插件即可阅读PDF文件。
使用PDF.js时，你需要将PDF.js库集成到你的项目中，并通过JavaScript动态加载PDF文件。示例代码如下：

   <div id="pdfContainer"></div>
   <script src="path/to/pdf.js"></script>
   <script>
       // 初始化PDF.js
       var pdfDoc = null,
           pageNum = 1,
           pageRendering = false,
           pageNumPending = null,
           scale = 1.5,
           canvas = document.getElementById('pdfContainer'),
           ctx = canvas.getContext('2d');

       // 加载PDF文件
       PDFJS.getDocument('http://example.com/path/to/your/document.pdf').promise.then(function (pdfDoc_) {
           pdfDoc = pdfDoc_;
           renderPage(pageNum);
       });

       // 渲染PDF的指定页
       function renderPage(num) {
           pageRendering = true;
           // 使用PDF.js获取页面
           pdfDoc.getPage(num).then(function (page) {
               var viewport = page.getViewport({scale: scale});
               canvas.height = viewport.height;
               canvas.width = viewport.width;

               // 将页面渲染到canvas上下文中
               var renderContext = {
                   canvasContext: ctx,
                   viewport: viewport
               };
               var renderTask = page.render(renderContext);

               // 等待渲染完成
               renderTask.promise.then(function () {
                   pageRendering = false;
                   if (pageNumPending !== null) {
                       // 新页面待渲染
                       renderPage(pageNumPending);
                       pageNumPending = null;
                   }
               });
           });
       }

       // 监听canvas的点击事件
       canvas.addEventListener('click', function () {
           if (pageRendering) {
               return;
           }
           pageNum++;
           renderPage(pageNum);
       });
   </script>

PDF.js可以集成到网站中，并提供一个更加现代和安全的PDF阅读体验。