如何将pdf.js页面呈现为真正的HTML元素而非Canvas或SVG？

Question

我想设计一个简单的移动UI，可以阅读pdf，但是我打算通过使用自己制作的pdf阅读器来添加许多功能，而不仅仅是使用pdf.js团队制作的查看器。 因此，我想问是否有任何将pdf呈现为只是带有元素的HTML的方法，就像他们在他们的查看器中所做的那样，我不熟悉canvas，请大家帮忙，谢谢。

- Clarance Liberiste Ntwari

Answer 1

好的，伙计们，我终于找到了方法。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();
  });

如需完整的教程，请前往此处

，讲解如何实现自定义PDF渲染。

- Clarance Liberiste Ntwari

Answer 2

我认为没有这样的选项。

在浏览器中显示pdf文件的唯一方法（不是每个浏览器和移动浏览器都适用）是通过将url传递给iframe / embed标签<iframe src="url_to_your.pdf">

但请注意，这仍然不能产生您要查找的HTML输出。

- Krzysztof Golasik

---

那么他们是如何为他们的查看器做到这一点的呢？请看并检查此链接：https://mozilla.github.io/pdf.js/web/viewer.html - Clarance Liberiste Ntwari