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

有沒有什麼方法可以獲得iframe中加載的PDF內容的實際高度？如何獲得PDF文檔在iframe中的加載高度

我面臨着在iPAD設備中滾動PDF內容的問題？我可以獲得身體內容的高度，使滾動成功，但只適用於HTML頁面。

this.contentWindow.document.body.scrollHeight

但對於PDF的不返回PDF文檔的確切高度？有什麼辦法可以解決這個問題嗎？

感謝

彼得

來源

2013-02-21 peterkr

* PDF文檔的確切高度*單個PDF頁面可能有不同的尺寸。這，沒有什麼像文件的高度。 – mkl 2013-09-04 05:38:24

是否爲view=fit PDF瀏覽器選項的工作是什麼，你要完成（Set auto height for 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-iframe-on-the-ipad-problem/和iScroll4可能值得一看。

來源

2013-09-03 20:37:15 Matthew

'viewFit'標誌是插件應該如何放大PDF，在這種情況下，我們告訴它適合頁面視圖的寬度或高度。即使在鏈接中，接受的答案也會顯示帶有滾動條的iframe！那如何被接受？ 'auto'的Css高度將不起作用，因爲插件沒有傳遞內容到瀏覽器的大小（因此無論如何都會「自動」到*默認值）。如果你設法讓它工作，請編輯[this fiddle]（http://jsfiddle.net/QmLv5/2/）。基本上，只有窗口應該滾動（不是PDF），如果你想以這種方式提取高度 – Hashbrown 2013-09-04 00:45:05

@Hashbrown似乎愚蠢認爲唯一的解決方案就像iScroll4給出如何無處不在的PDF文件。 – Matthew 2013-09-04 02:00:15

-1

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

讓我們假設你擁有的iframe作爲一個id

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

通過使用jQuery，我們可以使iframe和汽車的高度，因爲你需要顯示的iframe裏面的PDF現在如下。

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

你可以得到高度

document.body.scrollHeight

來源

2013-09-03 22:11:27

我不知道這是如何工作給你和那些upvoted你..不爲我工作，我看不到原因這個代碼將如何工作.. – 2014-10-30 08:46:53

答案是沒有（不幸）。

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

即使你直接將它指定爲iframe你會看到的iframe有一個DOM佈局就像任何其他頁面的源代碼，與object或body的PDF embed反正叫PDF。

這PDF內容'元素'是所有相應的PDF插件的領土，不能通過javascript訪問。可能有一些flash,java或瀏覽器插件，可以讓你與它互動，但我沒有聽說過它。

來源

2013-09-03 23:21:28 Hashbrown

其實有一個解決方案（通常工作）通過@諾姆。這需要一點修改，但總的來說它很好。 – 2013-09-04 10:24:03

這真棒，我是贊成這個問題的人之一，因爲我需要一個解決方案。從未找到一個，並推理爲什麼，我把它留在這裏。我認爲JS庫會呈現PDF本身，這就是它的知識。但與保持「iframe」的問題一致，它不會回答它。 – Hashbrown 2013-09-04 11:14:15

好吧。我們使用pdf-js來獲取pageCount和pageHeight。現在我們可以知道文檔高度。然後我們將該值設置爲iframe.style.height，就是這樣。我知道這不是一個真正的答案，而你的回答實際上是「正確的」答案。但pdf-js是相當不錯的'黑客'。 – 2013-09-04 11:19:18

我在我的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); 
    }); 
});

來源

2013-09-04 08:08:00 noamtcohen

它的工作原理！謝謝。但這裏有一個問題，這個解決方案不是100％的跨瀏覽器（我正在看你的舊IE瀏覽器）。所以還需要添加瀏覽器檢測。但這對iPad來說是個固定的問題。 – 2013-09-04 10:22:37

彼得，也沒有辦法，你可以得到PDF中的iFrame iOS上的Safari瀏覽器的高度，沒有可用於蘋果的移動設備沒有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。

來源

2013-09-04 09:06:56 Hi10

感謝您的回答，但pdf-js不錯，因爲我們只使用pdf-js來獲得pdf的「高度」，所有渲染都是通過本機iPad pdf顯示器進行的。 – 2013-09-04 10:29:01

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

回答

相關問題