Rendering PDF tersuai di JavaScript dengan mozilla ' s pdf.js

Peer dikaji semula oleh Jani Hartikainen, Florian Rappl, Jezen Thomas, dan Jeff Smith. Terima kasih kepada pengulas rakan sebaya SitePoint atas sumbangan mereka!

Pelayar yang paling moden menyokong tontonan PDF, tetapi fungsi ini adalah di luar kawalan langsung pemaju. Bayangkan perlu menyesuaikan paparan PDF aplikasi web - melumpuhkan butang cetak, atau menyekat akses halaman berdasarkan langganan pengguna. Walaupun tag

menggunakan penerima asli penyemak imbas, ia tidak mempunyai kawalan programatik untuk penyesuaian tersebut. <embed></embed>

Masukkan pdf.js, perpustakaan yang kuat dari Mozilla Labs. Ia menjadikan PDF dalam penyemak imbas, memberikan pemaju kawalan lengkap ke atas proses rendering.

Ciri -ciri utama pdf.js:

Kawalan penuh:

Batasan Batasan Pelayar dan Sesuaikan PDF Rendering.
• berasaskan html5:
berfungsi dalam pelayar moden tanpa plugin.
• Pilihan rendering:
Menyokong kanvas dan SVG untuk pelaksanaan fleksibel.
• pemuatan asynchronous:
menggunakan janji untuk pengendalian fail besar yang cekap.
• Ciri-ciri Lanjutan:
Membolehkan penyerahan teks-lapisan, zoom adat, dan banyak lagi.
Memahami pdf.js

pdf.js, yang dibina di atas HTML5, menghapuskan keperluan untuk plugin pihak ketiga. Penggunaannya meliputi pelbagai perkhidmatan perkongsian fail dalam talian (Dropbox, Cloudup, Jumpshare, dan lain-lain) untuk tontonan PDF dalam talian yang lancar. Walaupun sangat berguna, mengintegrasikan pdf.js boleh mencabar kerana dokumentasi terhad pada ciri-ciri canggih seperti lapisan teks, anotasi, dan fail yang dilindungi kata laluan.

Artikel ini meneroka integrasi pdf.js, meliputi:

Integrasi Asas

SVG Rendering
Rendering-Layer Rendering
zooming
Integrasi Asas

1. Memuat turun fail yang diperlukan:

pdf.js adalah perpustakaan JavaScript. Anda perlu dan

. Walaupun Node.js dan Gulp adalah pilihan untuk memuat turun, pendekatan yang lebih mudah menggunakan URL langsung ini (sentiasa menyediakan versi terkini):

pdf.js pdf.worker.js

• https://mozilla.github.io/pdf.js/build/pdf.js
• 2. Pekerja web dan pdf.js: https://mozilla.github.io/pdf.js/build/pdf.worker.js

PDF Parsing dan Rendering adalah intensif yang komputasi. Pdf.js memanfaatkan pekerja web HTML5 untuk melepaskan tugas -tugas ini ke benang yang berasingan, menghalang penguncian penyemak imbas. Ini adalah tingkah laku lalai, tetapi boleh dilumpuhkan jika diperlukan.

3. Janji dalam pdf.js:

API pdf.js menggunakan janji untuk pengendalian operasi asynchronous bersih.

4. Contoh mudah:

mari kita jadikan "Hello World!" Yang mudah! PDF (boleh didapati di http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf). Pastikan fail anda disajikan melalui pelayan web tempatan (mis., http://localhost/pdfjs_learning/index.html).

termasuk pdf.js dalam index.html anda:

<🎜>

anda boleh menentukan secara pilihan pdf.worker.js jalur jika tidak dalam direktori yang sama:

PDFJS.workerSrc = "/path/to/pdf.worker.js";

Sekarang, tambahkan JavaScript berikut untuk menjadikan PDF:

var url = "http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf";

PDFJS.getDocument(url)
  .then(function(pdf) {
    return pdf.getPage(1);
  })
  .then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });

dan tambahkan elemen <canvas> ke index.html anda:

<canvas id="the-canvas"></canvas>

Kod ini mengambil, parses, dan menjadikan PDF ke kanvas. PDFJS.getDocument() memulakan muat turun tak segerak; pdf.getPage() mengambil halaman tertentu; page.render() melakukan rendering.

rendering menggunakan svg

pdf.js juga menyokong rendering SVG. Ubah suai bahagian page.render() untuk menggunakan SVG:

page.getOperatorList()
  .then(function(opList) {
    var svgGfx = new PDFJS.SVGGraphics(page.commonObjs, page.objs);
    return svgGfx.getSVG(opList, viewport);
  })
  .then(function(svg) {
    container.appendChild(svg);
  });

Gantikan <canvas> dengan <div id="the-svg"> </div> di html anda.

Rendering Lapisan Teks

untuk membolehkan pemilihan teks, muat turun text_layer_builder.js <code>text_layer_builder.js dan text_layer_builder.css <code>text_layer_builder.css dan masukkannya dalam html anda. Gunakan pdf yang lebih kompleks (mis., http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf <code>http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf). Kod berikut menjadikan beberapa halaman dan menambah lapisan teks:

<🎜>

zooming

Laraskan skala scale pembolehubah untuk mengawal tahap zum.

Kesimpulan

pdf.js menyediakan cara yang kuat dan fleksibel untuk mengintegrasikan pdf tersuai ke dalam aplikasi web. API yang bersih dan pengendalian asynchronous menjadikannya alat yang berharga untuk pemaju. Eksperimen dengan kod dan meneroka ciri canggihnya!

Soalan Lazim (Soalan Lazim) (Ringkas Ringkas)

• Tujuan rendering tersuai: Menyediakan pengalaman pengguna yang lancar dalam aplikasi web, menghapuskan keperluan untuk penonton PDF luaran.
• bagaimana pdf.js berfungsi: Parses dan membuat pdfs menggunakan html5 dan piawaian web.
• Pelaksanaan: Sertakan perpustakaan, gunakan API untuk memuat dan membuat kanvas.
• Penyesuaian: memanipulasi kanvas dan gunakan CSS untuk gaya.
• Batasan: Boleh berjuang dengan PDF kompleks, prestasi bergantung pada saiz fail dan peranti.
• Penambahbaikan prestasi: Mengoptimumkan fail PDF, gunakan pemuatan malas.
• keserasian: berfungsi dengan baik dengan perpustakaan JavaScript lain.
• Pelesenan: Open-Source (Apache License 2.0).
• Sumbangan: Selamat datang untuk menyumbang kepada projek.
• Sokongan: Rujuk dokumentasi rasmi dan komuniti GitHub.

Atas ialah kandungan terperinci Rendering PDF tersuai di JavaScript dengan mozilla ' s pdf.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!