使嵌入式PDF在iPad中可滾動

我使用對象標籤在HTML中嵌入了PDF。嵌入式PDF是一個大文檔，從我的桌面查看時，PDF可以在包括Safari瀏覽器在內的所有瀏覽器中使用滾動條正確顯示。但是，當我在iPad中查看相同的HTML頁面時，嵌入式PDF沒有滾動條。有什麼方法可以在iPad中顯示嵌入式PDF文檔的滾動條？使嵌入式PDF在iPad中可滾動

用於embeding的PDF的代碼是

<object data="pdf.pdf" type="application/pdf" width="1000px" height="1200px" id="pdfDoc" name="pdfDoc"></object>

我用IFRAME嘗試過，甚至不工作。

來源

2011-11-23 Albin Joseph

滾動條都沒有在iOS中突出的，他們不過是你有多遠通過內容一塊滾動的指標，而不是表示滾動是可能的。 –

@Albin：它是用單指滾動的ipad工作的。用兩根手指滾動它爲我工作...請在這裏找到鏈接 https://stackoverflow.com/questions/43186427/scrolling-with-single-finger-gesture-for-object-element-ipad-not-working – Krishna9960

在iPad上，你可以用兩個手指來滾動嵌入的內容 - 這個工程的div溢出：滾動

來源

2011-11-25 17:26:25 Matt

但仍然滾動條是不可見的。有什麼辦法可以讓滾動條在ipad中可見嗎？ –

@Matt任何想法在ipad中的一個手指滾動。有兩個工作。作爲參考這裏是我的問題 https://stackoverflow.com/questions/43186427/scrolling-with-single-finger-gesture-for-object-element-ipad-not-working – Krishna9960

這似乎工作：

使物體標籤足夠大，以顯示整個PDF和
將它包含在具有有限高度和溢出的div中：自動添加-webkit溢出 - 在iOS 5 +中進行滾動以獲得良好的本地滾動。

這是我使用的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>PDF frame scrolling test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <style> 
     #container { overflow: auto; -webkit-overflow-scrolling: touch; height: 500px; } 
     object { width: 500px; height: 10000px } 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <object id="obj" data="my.pdf" >object can't be rendered</object> 
    </div> 
    </body> 
</html>

來源

2012-12-06 05:48:04

我試過這種方法。但在iPad中，我只能看到第一頁圖像。我無法滾動 – IfOnly

@IfOnly：你有沒有得到任何解決方案？請分享，如果你已經解決了這個問題。我面臨着同樣的問題:( –

不幸的是，我提供了一個鏈接到PDF，並在不同的視圖中打開PDF。 – IfOnly

我需要同樣的事情，所以在這裏我分享。

問題我遇到：

七分褲內容：iframe on iOS (iPad) content cropping issue
滾動條未顯示：Making embedded PDF scrollable in iPad
不能充分寬度

請嘗試以下方法：

http://jsfiddle.net/aknMJ/2/embedded/result/

個

使用技巧：

閱讀文檔寬度，並根據該
「寬度：100％」縮放PDF幀不與iPad的內部框架的工作，所以我需要使用CSS3轉換
等待PDF完全加載，然後顯示&調整PDF幀的大小。否則，內容被裁剪。

$('#pdfFrame').hide(); 
var pdfFrame = document.getElementById('pdfFrame'); 
pdfFrame.contentWindow.location.replace(PDF_URL); 
$('#pdfFrame').on('load', function() { 
    $('#pdfFrame').show(); 
    var documentWidth = $(document).width() 
    var scale = (documentWidth/width) * 0.95; 
    $('#pdfFrame').css("-webkit-transform", "scale(" + scale + ")"); 
});

來源

2013-09-09 13:30:38

我覺得我花了數週的時間，現在我很疲憊，但我找到了一個解決方案對於我自己： $（'＃pdf_iframe'）。css（「 - webkit-transform」，「scale（」+ 1.63 +「）」）; $（'＃pdf_iframe'）.css（「zoom」 0.63「）; pdf後的這兩個屬性的組合動態加載成功，以適合pdf文檔的寬度到ipad正確。如果有人想解釋，隨時通知我。 –

關於滾動問題，可悲的是，工作解決方案是使iframe的高度固定，並且這個高度必須與pdf的大小相同。 –

關於我的第一條評論 - 您必須嘗試使用它的值適合。這個例子中的值只適用於我的情況，我想。 –

PDF.js在我們的案例中工作得很完美。

您可以檢查這裏的全1行的解決方案：Make embedded PDF scrollable in iPad

好運

來源

2015-09-16 09:05:03 VanBoch

PDF.js在iOS上發生巨大的內存泄漏，不會推薦使用它。 – Cenobyte321

你有其他選擇嗎？這是迄今爲止我們唯一的工作解決方案。 – VanBoch

在iOS中，

使嵌入式PDF在iPad中可滾動

回答

相關問題