PDF響應縮放瀏覽器調整大小

Question

我試圖在iframe中使PDF的縮放始終為全寬，並且在瀏覽器調整大小時，它會重新計算PDF的縮放並將其設置為100％的瀏覽器寬度。

pdf參數 #view = Fit或＃zoom = 100適用於文檔就緒，但我無法管理在調整瀏覽器大小時刷新/重新計算此值（最好不會丟失滾動位置）。

<iframe id="readFrame" src="https://xxxxxx.pdf#view=Fit"></iframe>

注意：我正在調整iframe的大小：

$(document).ready(function() {
    $(window).trigger('resize');
});

$(window).resize(function() {

    var browser_viewportH = $(window).height();
    var browser_viewportW = $(window).width();

    var nav_height = $("#nav-bar").height() + $("#tempWrapper").height();
    var block_height = $("#blockContainer").height();

    var viewportH = browser_viewportH - (nav_height + block_height);

    $("#readFrame").css("height", viewportH);
});

Answer 1

好吧，我覺得你有一個錯字：

$("#read iframe").css("height", viewportH);

應該

$("#readFrame").css("height", viewportH);

由於你的iframe有ID“readFrame”，不是嗎？

Answer 2

<iframe id="readFrame" src="YOUR_PDF_PATH.pdf#view=Fit" style="width:100%;"></iframe>
<script type="text/javascript">
$('#readFrame').css('height',$(window).height());
</script>

你可以使用它，這也適用於調整大小，這也不會在調整大小時失去你的滾動高度..

Answer 3

如果有其他人遇到這個問題我最終使用pdf.js。

使用pdf參數的問題是它們在Chrome和Firefox中不起作用，因為這些瀏覽器都有自己的pdf查看器。

另一方面，pdf.js僅在Chrome和Firefox中得到完全支持，而其他人的支持有限但除了<= IE8之外還有其他功能。