javascript - 如何在 iframe 中获取 PDF 文档加载的高度

Question

有什么方法可以获取 iframe 中加载的 PDF 内容的实际高度？

我在 iPAD 设备中滚动 PDF 内容时遇到问题？我可以获得正文内容的高度并成功滚动，但仅限于 HTML 页面。

this.contentWindow.document.body.scrollHeight

但对于 PDF，它不返回 PDF 文档的准确高度？有什么办法可以做到吗？

谢谢

彼得

Answer 1

我在我的 iPad 上测试过它并且它有效，也许它对你也有好处。mozilla 有一个 HTML5 js 项目可以呈现 pdf 文件并显示它们，您可以在 pdf 文件中获取页面的视口(viewport)。 https://mozillalabs.com/en-US/pdfjs/ https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/hello.js

PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
  // Using promise to fetch the page
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    //
    // Prepare canvas using PDF page dimensions
    //
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    // Render PDF page into canvas context
    //
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

---

2020 年更新:pdf.js 的 API 略有变化:

PDFJS.getDocument('helloworld.pdf').promise.then(function(pdf) {
  // Using promise to fetch the page
  pdf.getPage(1).then(function(page) {
    var viewport = page.getViewport({scale: 1.5});

    //
    // Prepare canvas using PDF page dimensions
    //
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    // Render PDF page into canvas context
    //
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});