有没有办法像真正的 html 元素而不是画布或 svg 一样呈现 pdf.js 页面？

Posted 2023-03-04

【中文标题】有没有办法像真正的 html 元素而不是画布或 svg 一样呈现 pdf.js 页面？

【英文标题】：is there any way to render pdf.js page like real html elements not canvas or svg?

【发布时间】：2020-09-15 20:19:57

【问题描述】：

我正在尝试制作可以阅读 pdf 的简单移动 UI，但我计划通过使用我自己制作的 pdf 阅读器添加许多功能，而不仅仅是使用 pdf.js 团队制作的查看器，所以我在问如果有任何方法可以将 pdf 呈现为带有元素的 html，就像他们在查看器上所做的那样，我对画布不满意，任何帮助，提前谢谢

【参考方案1】：

我不认为有这样的选择。

使用本机支持在浏览器（不是所有移动浏览器）中显示 pdf 文件的唯一方法是将 url 传递给 iframe/embed 标签<iframe src="url_to_your.pdf">

但请注意，这仍然不会导致您正在寻找的 HTML 输出。

【讨论】：

那么他们如何为他们的观众做，看看并检查这个mozilla.github.io/pdf.js/web/viewer.html

【参考方案2】：

好吧，伙计们，我终于找到了路 pdf.js 有一个名为 getTextContent() 的方法，这些方法在您渲染页面时在每个页面上调用

只需获取文档中的每一页

PDFJS.getDocument(url)
  .then(function(pdf) 

    // Get div#container and cache it for later use
    var container = document.getElementById("container");

    // Loop from 1 to total_number_of_pages in PDF document
    for (var i = 1; i <= pdf.numPages; i++) 

        // Get desired page
        pdf.getPage(i).then(function(page) 

          var scale = 1.5;
          var viewport = page.getViewport(scale);
          var div = document.createElement("div");

          // Set id attribute with page-#pdf_page_number format
          div.setAttribute("id", "page-" + (page.pageIndex + 1));

          // This will keep positions of child elements as per our needs
          div.setAttribute("style", "position: relative");

          // Append div within div#container
          container.appendChild(div);

          // Create a new Canvas element
          var canvas = document.createElement("canvas");

          // Append Canvas within div#page-#pdf_page_number
          div.appendChild(canvas);

          var context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          var renderContext = 
            canvasContext: context,
            viewport: viewport
          ;

          // Render PDF page
          page.render(renderContext);
        );
    
);

获取每个页面的文本内容 请记住，它是来自先前代码的连续代码 然后在page.render()里面添加这样修改

// Render PDF page
page.render(renderContext)
  .then(function() 
    // Get text-fragments
    return page.getTextContent();
  )
  .then(function(textContent) 
    // Create div which will hold text-fragments
    var textLayerDiv = document.createElement("div");

    // Set it's class to textLayer which have required CSS styles
    textLayerDiv.setAttribute("class", "textLayer");

    // Append newly created div in `div#page-#pdf_page_number`
    div.appendChild(textLayerDiv);

    // Create new instance of TextLayerBuilder class
    var textLayer = new TextLayerBuilder(
      textLayerDiv: textLayerDiv, 
      pageIndex: page.pageIndex,
      viewport: viewport
    );

    // Set text-fragments
    textLayer.setTextContent(textContent);

    // Render text-fragments
    textLayer.render();
  );

如需完整教程，请前往here