レンダリングされたPDFの下半分をカバーするためにグラデーションをレンダリングする必要があります。 私は新聞社で働いており、購読する前にティーザーで紙を表示するアプリを作成しています。
問題は、グラデーションをPDFの上にペイントする必要があるため、PDFのレンダリングが完了するまで待機する必要があることです。 実際、モバイルブラウザでは、PDFが完成する前にグラデーションレンダリングを試みると、非常にワイルドな動作(ページが少しでもスクロールするたびにキャンバスが再レンダリングされて点滅)が発生し、常に再描画され、コンテンツが上下逆にレンダリングされます。時折。
非常に簡単に言えば、PDFのレンダリングが終了したときにコールバックを実行する必要があります。
コールバックをサポートできますか? または、レンダリングが完了したときにイベントを送信しますか?
'pagerendered'イベントまたはrender()がpromiseを返します。 汎用ビューアがすべてのページをレンダリングすることはないため、すべてのページをレンダリングするときにPDFViewerオブジェクトのモードを導入しない限り、これはビューアで修正できません。
では、「pagerendered」イベントはどのオブジェクトから発生しますか? @yurydelendik
https://github.com/mozilla/pdf.js/blob/master/web/pdf_viewer.js#L225およびhttps://github.com/mozilla/pdf.js/blob/master/webの使用例を参照してください。
ビューア用のAPIがないことに注意してください。 私たちがリリースしたAPIは、コアレンダリングとキャンバスレンダリング専用です(src / display / api.jsを参照)。
@yurydelendik私はこれをキャンバス、ブラウザ内で使用しています。 PDFJSが他にどこに関連しているのかについて私はちょっと混乱しています。 それはすぐに私を混乱させました、しかしとにかく、あなたは私が探しているものを持っているように見えます。 本当にありがとう!
解決済みとして終了します。
このイベントをキャッチするのに問題があります。
上記のドキュメントに示されているように、 pagerendered
イベントをリッスンします(Jquery)。
$(document).bind('pagerendered', function (e) {
console.log('Page rendering complete.');
//do stuff
});
PDFをキャンバスにレンダリングします。
PDFJS.getDocument('my_file.pdf').then(function(pdf) {
pdf.getPage(1).then(function(page) {
/* .. snip .. */
var scaledViewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
var renderContext = {
canvasContext : context,
viewport : scaledViewport
};
page.render(renderContext);
});
イベントのトリガーは自分で正常に機能するため、リスナーは適切に設定され、 page.render(renderContext)
が呼び出されるずっと前に接続されます。
おそらく、私はイベントのトリガーを誤解しました。 pagerendered
イベントはいつドキュメントから発生する必要がありますか?
@yurydelendik
汎用ビューアを使用していない場合、イベントはトリガーされません。 申し訳ありませんが、あなたが何を求めているのかわかりません。
レンダリングが終了するのを待つ方法については、 https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html#L76を参照してください。 jQueryはここではあまり役に立ちません。Promisesの使い方を学んでみてください。
@yurydelendikわかりました、ありがとうございました!
textlayerrendered
イベントを使用すると、次のように機能します。
document.addEventListener('textlayerrendered', function (e) {
if (e.detail.pageNumber === PDFViewerApplication.page) {
// finished rendering
}
}, true);
上記のスニペットを使用すると、次のようになります。
page.render(renderContext).then(function() {
console.log("FINISHED RENDERING!");
}, function() {
console.log("ERROR");
});
@brendandahlありがとう)
ありがとう@lucdetellis ! ビューアーの外部にあるボタンで印刷機能をトリガーしようとしましたが、エラーが発生したため、機能しませんでした。 関数内でソリューションを使用すると、親フレームからその関数をトリガーし、レンダリングが終了したときにwindow.focus()とwindow.print()をトリガーでき、BAMの問題が解決しました。これに関する解決策を探していました。 :)
document.addEventListener('textlayerrendered', function (e) {
if (e.detail.pageNumber === PDFViewerApplication.page) {
// finished rendering
}
}, true);
私のために呼ばれることはありません...
私はそれをそのように呼んでいます(最後にviewer.js
):
document.addEventListener('textlayerrendered', function (e) {
console.log("textlayerrendered event called!");
if (e.detail.pageNumber === PDFViewerApplication.page) {
// finished rendering
console.log("FINISHED RENDERING!");
Android.makeWebViewVisible();
} else {
console.log("NOT DONE RENDERING!");
}
}, true);
document.addEventListener('DOMContentLoaded', webViewerLoad, true);
私のjavascriptの無知を許してください、私はいくつかのAndroid固有の問題に遭遇しているので、PDFがレンダリングを終了したときにjsコールバックを取得しようとしているAndroid開発者です...助けていただければ幸いです。
更新しました:
問題は、Android WebView
の可視性がVISIBLE
に設定されていなかったため、JSイベントがトリガーされなかったことです。
pdf.jsで提供されているビューアを使用すると、 pagesloaded
イベントが機能しました(読み込みが完了するとすぐに印刷ダイアログを開きます):
document.addEventListener('pagesloaded', function (e) {
window.print();
}, true);
@ turquoise-turtleは、イベントリスナーにメインドキュメントまたはビューアがあるiframeにアタッチしましたか?
var iframe = document.getElementById('iframe').contentDocument;
iframe.addEventListener('pagesloaded', function (e) {
alert("loaded");
}, true);
私はこれをやっています、そしてそれはうまくいかないようです
「eventBusDispatchToDOM」を設定します:viewer.jsでtrueなぜ誰もこれを言わないのですか?
#10019を見ると、8月から9月頃にDOMにイベントをディスパッチしないようにデフォルトが変更されたようです。
最も参考になるコメント
textlayerrendered
イベントを使用すると、次のように機能します。