pdf.js转化成canvas 然后img形式展示

最新推荐文章于 2024-07-04 15:28:39 发布

柑橘乌云_

最新推荐文章于 2024-07-04 15:28:39 发布

阅读量663

点赞数

分类专栏： JavaScript 第三方库文章标签： pdf javascript 开发语言

本文链接：https://blog.csdn.net/m0_57033755/article/details/131727391

版权

JavaScript 同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

第三方库

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF to HTML</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.min.js"></script>
  </head>

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

    <script>
      const container = document.getElementById("pdfViewer");

      pdfjsLib.getDocument("./驾驶员管理制度23LD.PDF").promise.then((pdf) => {
        const numPages = pdf.numPages;
        const pagesPromises = [];

        for (let i = 1; i <= numPages; i++) {
          pagesPromises.push(renderPage(pdf, i));
        }

        Promise.all(pagesPromises)
          .then((pages) => {
            const combinedHtml = pages.join("");
            container.innerHTML = combinedHtml;
          })
          .catch((error) => {
            console.error("Error rendering pages:", error);
          });
      });

      function renderPage(pdf, pageNumber) {
        return new Promise((resolve, reject) => {
          pdf.getPage(pageNumber).then((page) => {
            const scale = 1.5;
            const viewport = page.getViewport({ scale });

            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
              canvasContext: context,
              viewport,
            };

            page
              .render(renderContext)
              .promise.then(() => {
                const html = canvas.toDataURL();
                resolve(`< img src="${html}" alt="Page ${pageNumber}">`);
              })
              .catch((error) => {
                console.error(`Error rendering page ${pageNumber}:`, error);
                reject(error);
              });
          });
        });
      }
    </script>
  </body>
</html>