H5移动端加载预览pdf文件——demo

前言：正常情况下需要在HTML中嵌入本地docx或pdf文件时，我们会有以下解决办法：
1. 使用<iframe>标签
2. 使用<embed>标签
3. 使用<object>标签
4. 使用第三方库（如PDF.js）

当实际操作时，会发现前三种方式在pc端支持，但在移动端不支持，因为这些标签在移动端浏览器中的支持并不统一。

为了兼容移动端，我使用了第4种方案解决，当然网上很多教程咯~

随便找了一个ppt，放入html中使用第三方插件后展示的效果如下：

 

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>移动端引入pdf</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .pdf_box,
      #pdf-container {
        width: 100vw;
        height: 100vh;
        overflow: scroll;
      }
      canvas {
        width: 100vw;
      }
    </style>
  </head>
  <body>
    <!-- <iframe src="test.pdf" class="pdf_box"></iframe>
    <embed src="test.pdf" class="pdf_box">

    <object data="test.pdf" class="pdf_box"></object> -->
    <div id="pdf-container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.js"></script>
    <script>
      pdfjsLib.GlobalWorkerOptions.workerSrc =
        "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.js";

      const pdfUrl = "test.pdf",
        _targetDom = "pdf-container";
      pdfjsLib.getDocument("test.pdf").promise.then(async (doc) => {
        let _i = 0;
        for (let item of new Array(doc.numPages).fill()) {
          await renderOtherPage(doc, ++_i, _targetDom);
        }
      });
      function renderOtherPage(pdfDoc, pageNumber) {
        return new Promise((resolve) => {
          pdfDoc.getPage(pageNumber).then((page) => {
            const scale = 1;
            const viewport = page.getViewport({ scale: scale });
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            document.getElementById(_targetDom).appendChild(canvas);
            const renderContext = {
              canvasContext: context,
              viewport: viewport,
            };
            page.render(renderContext);
            resolve();
          });
        });
      }
    </script>
  </body>
</html>

　　

 

posted @ 2024-06-20 15:00  会吃鱼的猫123  阅读(1093)  评论(0)  编辑  收藏  举报