Pdf.js: Panggilan balik ketika PDF selesai dirender?

Dibuat pada 30 Des 2014  ·  17Komentar  ·  Sumber: mozilla/pdf.js

Saya perlu membuat gradien untuk menutupi bagian bawah PDF yang dirender. Saya bekerja untuk sebuah surat kabar dan kami sedang membuat aplikasi yang menampilkan koran dengan penggoda sebelum berlangganan.

Masalahnya, gradien perlu dilukis di atas PDF, jadi harus menunggu sampai PDF selesai di-render. Faktanya, pada browser seluler yang mencoba rendering gradien sebelum PDF selesai menghasilkan perilaku yang sangat liar (kanvas merender ulang dan berkedip setiap kali halaman digulir sedikit pun) menghasilkan pengecatan ulang yang konstan dan konten akan ditampilkan terbalik kadang-kadang.

Jadi cukup sederhana, saya perlu menjalankan panggilan balik ketika PDF selesai dirender.

Bisakah kalian mendukung panggilan balik? Atau mengirimkan acara saat rendering selesai?

Komentar yang paling membantu

Menggunakan acara textlayerrendered berfungsi untuk saya:

document.addEventListener('textlayerrendered', function (e) {
  if (e.detail.pageNumber === PDFViewerApplication.page) {
    // finished rendering
  }
}, true);

Semua 17 komentar

Kami memiliki acara 'pagerendered' atau render() mengembalikan janji. Penampil generik tidak pernah merender semua halaman, jadi ini tidak akan dapat diperbaiki untuk penampil, kecuali jika kita memperkenalkan mode untuk objek PDFViewer saat merender semua halaman.

Oke, jadi acara 'pagerendered' dipicu dari objek mana? @yurydelendik

Lihat https://github.com/mozilla/pdf.js/blob/master/web/pdf_viewer.js#L225 dan contoh penggunaan di https://github.com/mozilla/pdf.js/blob/master/web /viewer.js#L1733

Harap perhatikan bahwa kami tidak memiliki API untuk pemirsa. Hanya API yang kami rilis untuk rendering inti dan kanvas (lihat src/display/api.js).

@yurydelendik Saya menggunakan ini dengan kanvas, di browser. Saya agak bingung tentang di mana lagi PDF JS relevan. Itu membuatku langsung bingung, tapi bagaimanapun juga, sepertinya kamu memiliki apa yang aku cari. Terima kasih banyak!

Penutupan sebagai diselesaikan.

Saya kesulitan menangkap acara ini.

Saya mendengarkan (Jquery) untuk acara pagerendered seperti yang ditunjukkan dalam dokumen di atas:

$(document).bind('pagerendered', function (e) {
    console.log('Page rendering complete.');
    //do stuff
});

dan render PDF di atas kanvas:

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);
});

Pemicu acara itu sendiri berhasil, jadi pendengar saya diatur dengan benar, dan dilampirkan jauh sebelum page.render(renderContext) dipanggil.

Mungkin saya salah memahami pemicu acara. Kapan tepatnya acara pagerendered dipecat dari dokumen?

@yurydelendik

Jika Anda tidak menggunakan penampil umum, acara tidak akan dipicu. Maaf, saya tidak mengerti apa yang Anda tanyakan.

Lihat https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html#L76 untuk melihat cara menunggu rendering selesai. jQuery akan kurang berguna di sini, coba pelajari cara menggunakan Promises.

@yurydelendik Saya mengerti sekarang, terima kasih banyak atas waktu Anda!

Menggunakan acara textlayerrendered berfungsi untuk saya:

document.addEventListener('textlayerrendered', function (e) {
  if (e.detail.pageNumber === PDFViewerApplication.page) {
    // finished rendering
  }
}, true);

Menggunakan cuplikan Anda di atas, Anda cukup melakukan:

page.render(renderContext).then(function() {
  console.log("FINISHED RENDERING!");
}, function() {
  console.log("ERROR");
});

@brendandahl terima kasih)

Terima kasih @lucdetellis ! Saya telah mencoba memiliki tombol eksternal ke penampil yang memicu fungsionalitas cetak, tetapi itu tidak akan pernah berfungsi karena kesalahan yang diberikan. Menggunakan solusi Anda di dalam suatu fungsi memungkinkan saya untuk memicu fungsi itu dari bingkai induk dan kemudian window.focus() dan window.print() ketika selesai rendering, dan BAM, masalah terselesaikan.. Sedang mencari solusi untuk ini :)

document.addEventListener('textlayerrendered', function (e) {
  if (e.detail.pageNumber === PDFViewerApplication.page) {
    // finished rendering
  }
}, true);

Tidak pernah dipanggil untuk saya ...

Saya menyebutnya seperti itu (pada akhirnya 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);

Maafkan ketidaktahuan javascript saya, saya seorang pengembang Android yang mencoba untuk mendapatkan panggilan balik js ketika PDF telah selesai dirender karena saya mengalami beberapa masalah khusus Android... Bantuan apa pun akan sangat dihargai.

Diperbarui:
Masalahnya adalah visibilitas Android WebView saya tidak disetel ke VISIBLE , jadi tidak ada peristiwa JS yang dipicu.

Menggunakan penampil yang disediakan dengan pdf.js, acara pagesloaded berhasil untuk saya (saya membuka dialog cetak segera setelah selesai memuat):

document.addEventListener('pagesloaded', function (e) {
    window.print();
}, true);

@turquoise-turtle apakah Anda melampirkan Pendengar acara ke dokumen utama atau ke iframe tempat Anda memiliki penampil?

var iframe = document.getElementById('iframe').contentDocument;

                            iframe.addEventListener('pagesloaded', function (e) {
                                alert("loaded");
                            }, true);

saya melakukan ini dan sepertinya tidak berhasil

set "eventBusDispatchToDOM": true di viewer.js mengapa tidak ada yang mengatakan ini!

Tampaknya default diubah untuk tidak mengirimkan acara ke DOM sekitar bulan Agustus hingga September, lihat #10019

Apakah halaman ini membantu?
0 / 5 - 0 peringkat