Pengembaraan di Aurelia: Membuat Penonton PDF tersuai

Artikel ini disemak semula oleh Vildan Softic. Terima kasih kepada semua pengulas rakan sebaya di SitePoint untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Pemprosesan fail PDF dalam aplikasi web sentiasa sangat rumit. Jika anda bernasib baik, pengguna anda hanya perlu memuat turun fail tersebut. Tetapi kadang -kadang, pengguna memerlukan lebih banyak ciri. Saya bernasib baik pada masa lalu, tetapi kali ini, pengguna kami memerlukan aplikasi untuk memaparkan dokumen PDF supaya mereka dapat menyimpan metadata yang berkaitan dengan setiap halaman. Sebelum ini, orang mungkin telah menggunakan plugin PDF mahal (seperti Adobe Reader) untuk dijalankan dalam penyemak imbas untuk mencapai matlamat ini. Walau bagaimanapun, selepas beberapa waktu dan percubaan, saya dapati cara yang lebih baik untuk mengintegrasikan penonton PDF dalam aplikasi web saya. Hari ini, kita akan belajar bagaimana untuk memudahkan pemprosesan PDF menggunakan Aurelia dan PDF.JS.

mata teras

Gunakan aurelia dan pdf.js untuk membuat penonton PDF yang cekap dan cekap dengan ciri -ciri seperti skala dan menatal untuk meningkatkan interaksi dan prestasi pengguna.
Melaksanakan pengikatan data dua hala untuk atribut seperti halaman semasa dan tahap zum di Aurelia, yang membolehkan integrasi lancar dan kemas kini dinamik dalam aplikasi.
Membangunkan penonton PDF ke dalam elemen adat Aurelia yang boleh diguna semula yang membolehkan anda menambah beberapa penonton ke permohonan anda tanpa konflik.
Gunakan pdf.js untuk memproses rendering pdf, menyokong operasi asynchronous dan pekerja web untuk menyahpasang pemprosesan dan meningkatkan kelajuan tindak balas UI.
menangani isu -isu prestasi yang berpotensi dengan mempertimbangkan menatal maya dan pengoptimuman lain, terutamanya dalam mengendalikan dokumen besar dengan berkesan.
meneroka kemungkinan menukar penonton PDF tersuai ke plugin Aurelia untuk memudahkannya diintegrasikan ke dalam projek dan aplikasi lain.

Gambaran Keseluruhan: Matlamat

Matlamat kami hari ini adalah untuk membina komponen penonton PDF di Aurelia yang membolehkan aliran data dua hala antara penonton dan aplikasi kami. Kami mempunyai tiga keperluan utama:

Kami mahu pengguna dapat memuatkan dokumen, tatal dan zum masuk/keluar dengan prestasi yang baik.
Kami mahu dapat mengikat sifat -sifat penonton mengikat (seperti halaman semasa dan tahap zoom semasa) ke sifat dalam aplikasi.
Kami mahu penonton ini menjadi komponen yang boleh diguna semula;

Anda boleh mencari kod untuk tutorial ini dalam repositori GitHub kami, serta demo kod yang lengkap di sini.

Pengenalan pdf.js pdf.js adalah perpustakaan JavaScript yang ditulis oleh Yayasan Mozilla. Ia memuat dokumen PDF, fail parses dan metadata yang berkaitan, dan menjadikan output halaman ke nod DOM (biasanya

elemen). Penonton lalai yang dimasukkan dalam projek ini menyediakan sokongan untuk penonton PDF tertanam di Chrome dan Firefox dan boleh digunakan sebagai halaman atau sumber yang berdiri sendiri (tertanam dalam iframes).

Ini sangat keren. Masalahnya di sini ialah penonton lalai, sementara ia mempunyai banyak ciri, direka sebagai laman web yang berdiri sendiri. Ini bermakna bahawa walaupun ia boleh diintegrasikan ke dalam aplikasi web, ia pada dasarnya perlu berjalan di dalam kotak pasir iframe. Penonton lalai direka untuk mendapatkan input konfigurasi melalui rentetan pertanyaannya, tetapi kami tidak dapat dengan mudah mengubah konfigurasi selepas pemuatan awal, dan tidak dapat dengan mudah mendapatkan maklumat dan peristiwa dari penonton. Untuk mengintegrasikannya dengan aplikasi Web Aurelia-termasuk pengendalian acara dan mengikat dua arah-kita perlu membuat komponen adat Aurelia.

NOTA: Jika anda memerlukan ulasan mengenai pdf.js, sila lihat tutorial kami: Rendering PDF tersuai di JavaScript menggunakan pdf.js Mozilla

pelaksanaan

Untuk mencapai matlamat kami, kami akan mencipta elemen adat Aurelia. Walau bagaimanapun, kami tidak akan meletakkan penonton lalai ke dalam komponen kami. Sebaliknya, kami akan membuat penonton kami sendiri yang menghubungkan ke perpustakaan teras Pdf.js dan penonton supaya kami dapat memaksimumkan kawalan sifat dan penyajian kami. Untuk bukti konsep awal kami, kami akan bermula dengan aplikasi Skeleton Aurelia.

Fotoscope Code

Seperti yang anda lihat dari pautan di atas, aplikasi rangka mempunyai banyak fail, yang kebanyakannya kita tidak perlukan. Untuk memudahkan operasi, kami menyediakan versi rangka yang diperkemas dan menambah beberapa kandungan kepadanya:

• Tugas Teluk untuk menyalin fail PDF kami ke folder Dist (Aurelia digunakan untuk bundling).
• pdf.js ketergantungan telah ditambah kepada Packet.json.
• Dalam direktori akar aplikasi, index.html dan index.css telah menjalani beberapa tetapan gaya awal.
• Salinan kosong fail yang akan kami gunakan telah ditambah.
• Fail src/sumber/elemen/pdf-document.css mengandungi beberapa gaya CSS untuk elemen tersuai.

Jadi mari kita dapatkan aplikasi dan berjalan.

Pertama, pastikan Gulp dan JSPM dipasang secara global:

npm install -g gulp jspm

kemudian klon kerangka dan masukkannya:

git clone git@github.com:sitepoint-editors/aurelia-pdfjs.git -b skeleton
cd aurelia-pdfjs

kemudian pasang kebergantungan yang diperlukan:

npm install
jspm install -y

Akhirnya jalankan menonton Gulp dan navigasi ke http: // localhost: 9000. Sekiranya semuanya berjalan mengikut pelan, anda harus melihat mesej selamat datang.

Lebih banyak tetapan

Perkara seterusnya yang perlu dilakukan ialah mencari beberapa fail PDF dan memasukkannya ke dalam SRC/dokumen. Namakan mereka satu.pdf dan two.pdf. Untuk memaksimumkan ujian komponen tersuai kami, adalah yang terbaik bahawa salah satu fail PDF sangat panjang, seperti perang dan keamanan yang boleh didapati dalam projek Gutenberg.

Setelah meletakkan fail PDF di tempatnya, buka src/app.html dan src/app.js (seperti yang dipersetujui, komponen aplikasi adalah komponen akar aplikasi Aurelia), dan ganti kod di dalamnya dengan kedua -dua fail ini Kod: src/app.html dan src/app.js. Dalam tutorial ini, kami tidak akan membincangkan fail -fail ini, tetapi ada komen yang baik dalam kod tersebut.

Gulp akan secara automatik mengesan perubahan ini dan anda harus melihat rendering UI aplikasi kami. Itulah tetapannya. Sekarang mula menunjukkan ...

Buat elemen adat aurelia

kami mahu membuat komponen yang boleh digunakan secara langsung untuk sebarang pandangan Aurelia. Oleh kerana pandangan Aurelia hanyalah coretan HTML yang termasuk dalam tag templat HTML5, contohnya mungkin kelihatan seperti ini:

npm install -g gulp jspm

Tag

<pdf-document></pdf-document> adalah contoh elemen tersuai. Ia dan sifatnya (seperti skala dan halaman) bukan sifat asli HTML, tetapi kita boleh menggunakan elemen adat Aurelia untuk menciptanya. Unsur -unsur tersuai mudah dibuat, menggunakan blok bangunan asas Aurelia: Pandangan dan ViewModel. Oleh itu, kami akan membina pandangan kami terlebih dahulu, bernama pdf-document.js, seperti yang ditunjukkan di bawah:

git clone git@github.com:sitepoint-editors/aurelia-pdfjs.git -b skeleton
cd aurelia-pdfjs

Kandungan utama yang perlu diperhatikan di sini ialah @bindable penghias; kepada atribut yang berkaitan yang kita letakkan pada elemen tersuai. Ini akan membolehkan kami mengawal penonton PDF kami hanya dengan menukar sifat pada elemen. defaultBindingMode: bindingMode.twoWay

Kami kemudian akan membuat pandangan awal yang dipasangkan dengan ViewModel kami.

npm install
jspm install -y

(Kandungan berikut pada dasarnya konsisten dengan teks asal, tetapi beberapa ayat telah diselaraskan secara terperinci untuk mengekalkan kelancaran dan kebolehbacaan dan mengelakkan pertindihan.)

bersepadu pdf.js

pdf.js dibahagikan kepada tiga bahagian: Perpustakaan Teras (memproses parsing dan tafsiran dokumen PDF), perpustakaan paparan (bangunan API yang tersedia di atas lapisan teras), dan pemalam penonton web (pra-dibina kita disebutkan sebelumnya). Untuk tujuan kami, kami akan menggunakan perpustakaan teras melalui API paparan;

Tunjukkan Eksport API Objek Perpustakaan Dinamakan PDFJS, yang membolehkan kami menetapkan beberapa pembolehubah konfigurasi dan memuat dokumen kami menggunakan pdfjs.getDocument (URL). API benar -benar tidak segerak - ia menghantar dan menerima mesej kepada pekerja web, jadi ia sangat bergantung pada janji JavaScript. Kami akan menggunakan objek pdfdocumentproxy secara asynchronously dikembalikan dari kaedah pdfjs.getDocument () dan objek pdfpageProxy secara asynchronously dikembalikan dari pdfdocumentproxy.getPage ().

Walaupun dokumentasi agak jarang, pdf.js mempunyai beberapa contoh membuat penonton asas, di sini dan di sini. Kami akan membina komponen tersuai kami berdasarkan ini.

integrasi pekerja web

pdf.js menggunakan pekerja web untuk menyahpasang tugas renderingnya. Kerana bagaimana pekerja web berjalan dalam persekitaran penyemak imbas (mereka sebenarnya kotak pasir), kami terpaksa memuatkan pekerja web menggunakan laluan fail langsung ke fail JavaScript dan bukannya pemuat modul biasa. Nasib baik, Aurelia menyediakan abstraksi loader, jadi kita tidak perlu merujuk laluan fail statik (ini mungkin berubah apabila kita membungkus permohonan).

Jika anda mengikuti versi repositori kami, anda mungkin telah memasang pakej PDFJS-Dist, jika tidak, anda perlu melakukan ini sekarang (contohnya, menggunakan JSPM JSPM Pasang NPM: pdfjs-dist@^1.5.391) . Kami kemudian akan menyuntik abstraksi loader Aurelia menggunakan modul suntikan pergantungan Aurelia dan menggunakan loader untuk memuatkan fail pekerja web dalam pembina kami seperti berikut:

PAGE LOADING

perpustakaan pdf.js mengendalikan pemuatan, parsing dan paparan dokumen PDF. Ia mempunyai sokongan terbina dalam untuk muat turun dan pengesahan separa. Apa yang perlu kita lakukan ialah menyediakan URI dokumen yang berkaitan.

pemuatan dan paparan PDF akan didorong oleh atribut yang dapat diikat kami; Pada asasnya, apabila URL berubah, elemen tersuai harus meminta pdf.js untuk mengeluarkan permintaan ke fail. Kami akan melakukan ini dalam pengendali urlchanged dan membuat beberapa perubahan kepada pembina kami untuk memulakan beberapa sifat dan beberapa perubahan kepada kaedah terpisah kami untuk membersihkan.

Untuk setiap halaman dokumen, kami akan membuat elemen <canvas></canvas> di DOM yang terletak di dalam bekas scrollable dengan ketinggian tetap. Untuk melakukan ini, kami akan menggunakan fungsi Templat Asas Aurelia, menggunakan pengulang. Kerana setiap halaman PDF boleh mempunyai saiz dan orientasi sendiri, kami akan menetapkan lebar dan ketinggian setiap elemen kanvas mengikut paparan halaman PDF.

Rendering Page

Sekarang kita telah memuatkan halaman, kita perlu dapat menjadikannya kepada unsur -unsur DOM. Untuk melakukan ini, kami akan bergantung pada fungsi rendering pdf.js. Perpustakaan Pdf.js Viewer mempunyai API yang tidak segerak yang didedikasikan untuk memberikan halaman; Kami mengekstrak kod ini dari contoh dan bungkusnya dalam fungsi render:

Melaksanakan SCROLLING

Untuk memberikan pengalaman yang biasa dan lancar, komponen kami harus memaparkan halaman sebagai bahagian dokumen yang boleh ditatal sepenuhnya. Kita boleh melakukan ini dengan mempunyai bekas kita mempunyai ketinggian tetap dengan limpahan tatal, yang boleh dicapai melalui CSS.

Untuk memaksimumkan prestasi dokumen besar, kami akan melakukan perkara -perkara berikut. Pertama, kami akan menggunakan Taskqueue Aurelia untuk mengikat DOM. Kedua, kami akan menjejaki halaman yang telah diberikan pdf.js sehingga tidak perlu mengulangi kerja yang telah dilakukannya. Akhirnya, kami akan menjadikan halaman yang kelihatan hanya selepas menatal berhenti dengan menggunakan tingkah laku mengikat Aurelia. Inilah cara kami berjalan semasa menatal:

mencapai skala

Apabila kami skala, kami ingin mengemas kini tahap zoom semasa. Kami akan melakukan ini dalam pengendali harta berskala. Pada asasnya, kami akan mengubah saiz semua elemen kanvas untuk mencerminkan saiz viewport baru untuk setiap halaman skala yang diberikan. Kami kemudian akan membuat semula apa yang dipaparkan dalam viewport semasa dan memulakan semula gelung.

Hasil akhir

mari kita semak matlamat kami:

1. Kami mahu pengguna dapat memuatkan dokumen, tatal dan zum masuk/keluar dengan prestasi yang baik.
2. Kami mahu dapat mengikat sifat -sifat penonton mengikat (seperti halaman semasa dan tahap zoom semasa) ke sifat dalam aplikasi.
3. Kami mahu penonton ini menjadi komponen yang boleh diguna semula;

Kod akhir boleh didapati di repositori GitHub kami, serta demo kod yang lengkap di sini. Walaupun masih ada ruang untuk penambahbaikan, kami telah mencapai matlamat kami!

(Kandungan berikut pada dasarnya konsisten dengan teks asal, tetapi beberapa ayat telah diselaraskan secara terperinci untuk mengekalkan kelancaran dan kebolehbacaan dan mengelakkan pertindihan.)

Analisis dan Peningkatan Post-Project

Selalu ada ruang untuk penambahbaikan. Berikut adalah beberapa perkara yang ingin saya tingkatkan dalam pelaksanaan penonton PDF:

Buat plugin

Aurelia menyediakan sistem pemalam. Menukar bukti konsep ini kepada plugin Aurelia akan menjadikannya sumber yang digunakan untuk sebarang aplikasi Aurelia. Repositori Aurelia Github menyediakan projek rangka plugin yang akan menjadi titik permulaan yang baik. Dengan cara ini, yang lain boleh menggunakan ciri ini tanpa membina semula!

optimum

Pemprosesan fail PDF dalam aplikasi web sentiasa sangat rumit. Tetapi dengan sumber -sumber yang tersedia hari ini, kita dapat mencapai lebih dari sebelumnya dengan menggabungkan perpustakaan dan keupayaan mereka. Hari ini, kami telah melihat contoh penonton PDF asas - penonton yang boleh diperluaskan dengan ciri -ciri tersuai, kerana kami mempunyai kawalan penuh ke atasnya. Kemungkinannya tidak berkesudahan! Adakah anda bersedia untuk membina sesuatu? Tolong beritahu saya dalam komen di bawah.

FAQs (FAQs) Mengenai Komponen Penonton PDF Custom Aurelia

(Kandungan berikut pada dasarnya konsisten dengan teks asal, tetapi beberapa ayat telah diselaraskan secara terperinci untuk mengekalkan kelancaran dan kebolehbacaan dan mengelakkan pertindihan.)

Atas ialah kandungan terperinci Pengembaraan di Aurelia: Membuat Penonton PDF tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!