7

iframe に読み込まれた PDF コンテンツの実際の高さを取得する方法はありますか?

iPAD デバイスで PDF コンテンツをスクロールする際に問題が発生していますか? 本文コンテンツの高さを取得してスクロールを正常に行うことができますが、HTML ページに対してのみです。

this.contentWindow.document.body.scrollHeight

PDFの場合、PDFドキュメントの正確な高さを返さないのですか? それを得る方法はありますか？

ありがとう

ピーター

4

5 に答える 5

6

iPadでこれをテストしたところ、うまくいきました。おそらくあなたにも良いかもしれません. PDFファイルをレンダリングして表示するmozillaによるHTML5 jsプロジェクトがあり、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);
  });
});

UPDATE 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);
  });
});
于 2013-09-04T08:08:00.833 に答える
0

view=fitあなたが達成しようとしているものに対してpdfビューアオプションは機能しますか（iframeの自動高さを設定します）：

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

また、高さを取得しようとする前に高さを auto に設定するこのソリューション ( 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は一見の価値があるかもしれません。

于 2013-09-03T20:37:15.203 に答える
-2

これは、JQuery を使用することで解決できます。

次のようなID付きのiframeがあると仮定しましょう

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

JQuery を使用することで、iframe 内に PDF を表示する必要があるため、iframe の高さを自動にすることができます。

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

高さは次のように取得できます

document.body.scrollHeight
于 2013-09-03T22:11:27.517 に答える