如何在 iframe 中獲取 PDF 文檔加載的高度

Question

有沒有辦法獲得 iframe 中加載的 PDF 內容的實際高度？

我在 iPAD 設備中滾動 PDF 內容時遇到問題？ 我可以獲得正文內容的高度使滾動成功，但僅適用於 HTML 頁面。

this.contentWindow.document.body.scrollHeight

但是對於PDF它沒有返回PDF文檔的確切高度？ 有什么辦法可以得到嗎？

謝謝

彼得

Answer 1

我在我的 iPad 上測試了這個，它有效，也許它對你也有好處。 mozilla 有一個 HTML5 js 項目，可以渲染 pdf 文件並顯示它們，您可以在 pdf 文件中獲取頁面的視口。 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);
  });
});

Answer 2

答案是否定的（不幸的是）。

因為在元素級別，如果顯示的文檔需要它，PDF object / embed s 不會自動增長以占據更多高度，因此它們的真實高度永遠不會暴露給 DOM。

即使您通過將 PDF 指定為iframe的源來直接調用它，您也會看到 iframe 具有與任何其他頁面一樣的 DOM 布局，無論如何都在body帶有一個object或 pdf 的embed 。

在這個 PDF '元素' 中是所有相應的 PDF 插件的領域，並且不能被javascript訪問。 可能有一些flash 、 java或瀏覽器插件可以讓您與之交互，但我還沒有聽說過。

Answer 3

彼得，您無法在 iOS Safari 上的 iFrame 中獲得 PDF 的高度，因為沒有適用於蘋果移動設備的 adobe reader safari 插件。 您可以使用 HTML 5-Canvas 來呈現 PDF 和開源客戶端庫，如 pdfjs...等...

沒有那個，你可以從服務器獲取高度[或寬度]的唯一方法是使用iTextSharp.dll類型的組件並獲取pdf頁面的高度/寬度，稍后你可以乘以頁數，這些你都可以輕松完成在服務器端。 使用檢索到的高度/寬度來設置 iFrame 的樣式，然后在 iFrame 的源屬性中提供該 PDF。 iFrame 會拉伸，你會得到滾動效果。

或者

如果您有任何可以將 PDF 轉換為圖像的工具或組件，那么您只需將圖像從服務器扔到 HTML 上，使用 javascript 您可以控制獲取屬性。 我們有 MS-SSRS 來滿足我們的報告需求，對於可在 iPad 上訪問的一小部分應用程序，我們從 MS-SSRS 而不是 PDF 獲取圖像。 我們采用此選項的原因是，如果頁面數量增加，那么像 PDF-JS 這樣的客戶端框架將無法在畫布上呈現。

您有多種選擇可以在 iPad 上處理 PDF。

Answer 4

view=fit pdf 查看器選項是否適用於您要完成的任務（ 為 iframe 設置自動高度）：

<iframe src="Path/MyPDF.pdf#view=fit"></iframe>

此解決方案也在嘗試獲取高度之前將高度設置為自動（ https://stackoverflow.com/a/11864824/1803682 ）：

objIframe = document.getElementById('theIframeId');    
objIframe.style.height = 'auto';

document.body.scrollHeight

最后 - 博客文章在這里： http : //dev.magnolia-cms.com/blog/2012/05/strategies-for-the-if​​rame-on-the-ipad-problem/和iScroll4可能值得一看。

Answer 5

這可以通過使用 JQuery 來解決。

讓我們假設您有如下帶有 id 的 iframe

<iframe src="name.pdf" id="pdf_frame"></iframe>

現在通過使用 JQuery，我們可以根據需要在 iframe 內顯示 pdf 來使 iframe 的高度為自動。

$('#pdf_frame').css('height','auto');

你可以得到高度為

document.body.scrollHeight