Cara Membuat Penonton PDF JavaScript-tutorial css-php.cn

Format dokumen mudah alih, atau PDF untuk pendek, sangat sesuai untuk berkongsi dokumen yang mengandungi banyak teks dan imej yang diformat, terutama jika mereka mungkin dicetak atau dibaca di luar talian. Walaupun kebanyakan pelayar moden boleh memaparkan fail PDF, mereka melakukannya menggunakan penonton PDF yang berjalan di tab atau tetingkap bebas, memaksa pengguna meninggalkan laman web anda. Anda untuk menghuraikan dan membuat fail PDF betul -betul di dalam laman web anda. Dalam tutorial ini, saya akan menunjukkan kepada anda cara menggunakannya untuk membuat penonton PDF JavaScript tersuai sepenuhnya dari awal.

1. Mewujudkan antara muka pengguna

kami akan memulakan tutorial penonton JS PDF ini dengan membuat laman web baru dan menambah kod html5 boilerplate biasa. >, buat elemen

yang boleh berfungsi sebagai bekas untuk penonton PDF kami di JS. JavaScript PDF Viewer akan menjadi elemen HTML5

. Kami akan memberikan halaman fail PDF kami di dalamnya. Oleh itu, tambahkan kod berikut di dalam elemen

. Walau bagaimanapun, kami akan membolehkan pengguna beralih ke halaman sebelumnya atau halaman seterusnya dengan menekan butang. Di samping itu, untuk memaparkan nombor halaman semasa, dan membolehkan pengguna melompat ke mana -mana halaman yang mereka inginkan, antara muka kami akan mempunyai medan input. : Satu untuk mengezum masuk dan satu untuk mengezum keluar. Mendapatkan pdf.js

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

Salin selepas log masuk

Sekarang bahawa antara muka pengguna tulang belakang untuk penonton PDF JavaScript kami sudah siap, mari tambahkan pdf.js ke laman web kami. Kerana versi terbaru perpustakaan boleh didapati di CDNJS, kami boleh melakukannya dengan hanya menambahkan baris berikut ke arah akhir laman web. , anda boleh memuat turunnya dari repositori pdfjs-dist. <body> <div> 3. Memuatkan fail pdf

<div id="my_pdf_viewer"><br>     <br></div><br>

Salin selepas log masuk

Sebelum kita mula memuatkan fail PDF, mari buat objek JavaScript mudah untuk menyimpan keadaan penonton PDF kami di JS. Di dalamnya, kami akan mempunyai tiga item: rujukan kepada fail pdf itu sendiri, indeks halaman semasa, dan tahap zoom semasa. Kaedah

objek <canvas>, yang berjalan secara asynchronously. <div>

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

Salin selepas log masuk

Perhatikan bahawa kaedah getDocument() secara dalaman menggunakan objek XMLHttpRequest untuk memuatkan fail pdf. Ini bermaksud bahawa fail mesti hadir sama ada di pelayan web anda sendiri atau pada pelayan yang membolehkan permintaan silang asal. Jika anda tidak mempunyai fail PDF yang berguna, anda boleh mendapatkan yang saya gunakan dari Wikipedia .

Setelah fail pdf telah dimuatkan dengan jayanya, kami dapat mengemas kini harta benda

objek negara kami. Dinamakan pdf supaya penonton PDF kami di JS secara automatik menjadikan halaman pertama fail PDF. Kami akan menentukan fungsi dalam langkah seterusnya.

<div id="my_pdf_viewer"><br>     <br></div><br>

Salin selepas log masuk

~~4. Memberi halaman~~

render() dengan memanggil kaedah

objek

<div id="canvas_container"><br>    <canvas id="pdf_renderer"></canvas><br></div><br>

Salin selepas log masuk

dan lulus nombor halaman kepadanya, kita boleh mendapatkan rujukan ke mana -mana halaman dalam fail pdf. Buat masa ini, mari kita lulus harta

objek negara kita. Kaedah ini juga mengembalikan janji, jadi kami memerlukan fungsi panggil balik untuk mengendalikan hasilnya. Untuk benar -benar membuat halaman, kita mesti memanggil kaedah

objek

yang tersedia di dalam panggilan balik. Sebagai hujah, kaedah ini menjangkakan konteks 2D kanvas dan objek getPage(), yang boleh kita dapatkan dengan memanggil kaedah pdf. Kerana kaedah currentPage mengharapkan tahap zoom yang dikehendaki sebagai hujah, kita mesti lulus sifat

objek negara kita. halaman dan tahap zum. Untuk memastikan bahawa keseluruhan viewport diberikan pada kanvas kami, sekarang kita mesti mengubah saiz kanvas kami untuk dipadankan dengan pandangan. Inilah caranya:

render()

Pada ketika ini, kita boleh teruskan dan menjadikan halaman.

<div id="navigation_controls"><br>    <button id="go_previous">Previous</button><br>    <input id="current_page" value="1" type="number"/><br>    <button id="go_next">Next</button><br></div><br>

Salin selepas log masuk

Jika anda cuba membuka laman web dalam penyemak imbas, kini anda harus dapat melihat halaman pertama fail pdf anda. Daripada penonton PDF kami kini bergantung kepada saiz halaman yang diberikan dan tahap zoom. Ini tidak sesuai kerana kami tidak mahu susun atur laman web kami terjejas semasa pengguna berinteraksi dengan penonton PDF di JavaScript. render() page Untuk membetulkannya, semua yang perlu kita lakukan ialah memberikan lebar dan ketinggian tetap ke elemen PageViewport yang merangkumi kanvas kami dan menetapkan harta CSS getViewport() ke getViewport(). Harta ini, apabila perlu, menambah bar tatal ke elemen zoom, yang membolehkan pengguna menatal kedua -dua secara mendatar dan menegak.

Tambahkan kod berikut di dalam tag <head> laman web:

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

Salin selepas log masuk

Anda, tentu saja, bebas untuk menukar lebar dan ketinggian atau bahkan menggunakan pertanyaan media untuk membuat <div> Unsur Memadankan keperluan anda.

Secara pilihan, anda boleh memasukkan peraturan CSS berikut untuk menjadikan elemen <div> kelihatan lebih jelas:

<div id="my_pdf_viewer"><br>     <br></div><br>

Salin selepas log masuk

Jika anda menyegarkan laman web Sekarang, anda harus melihat sesuatu seperti ini di skrin anda:

5. Menukar halaman semasa

Pemapar PDF JavaScript kami kini mampu menunjukkan hanya halaman pertama mana -mana fail PDF yang diberikan kepadanya. Untuk membolehkan pengguna menukar halaman yang diberikan, sekarang kita mesti menambah pendengar acara klik ke butang

dan go_previous yang kami buat sebelum ini. Mengurangkan sifat go_next objek negara kita, pastikan ia tidak jatuh di bawah

. Selepas kita berbuat demikian, kita hanya boleh memanggil fungsi

sekali lagi untuk menjadikan halaman baru. Kod berikut menunjukkan kepada anda bagaimana: go_previous currentPage 1 Begitu juga, di dalam butang pendengar peristiwa render(), kita mesti meningkatkan harta

, sambil memastikan bahawa ia tidak melebihi bilangan halaman Hadir dalam fail pdf, yang boleh kita tentukan menggunakan sifat

objek current_page. supaya pengguna boleh terus melompat ke mana -mana halaman yang mereka inginkan dengan hanya menaip dalam nombor halaman dan memukul kekunci

enter

<div id="canvas_container"><br>    <canvas id="pdf_renderer"></canvas><br></div><br>

Salin selepas log masuk

. Di dalam pendengar acara, kita perlu memastikan bahawa bilangan pengguna yang dimasukkan adalah lebih besar daripada sifar dan kurang daripada atau sama dengan harta

. Paparkan mana -mana halaman fail pdf. go_next currentPage numPages 6. Menukar tahap zoom _pdfInfo

kerana fungsi

<div id="navigation_controls"><br>    <button id="go_previous">Previous</button><br>    <input id="current_page" value="1" type="number"/><br>    <button id="go_next">Next</button><br></div><br>

Salin selepas log masuk

kami sudah menggunakan sifat

objek negara semasa membuat halaman, menyesuaikan tahap zoom semudah meningkatkan atau menurunkan harta dan memanggil fungsi. current_page ~~di dalam butang Acara di atas klik pada butang , mari kita kenaikan harta oleh numPages.~~

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

~~Salin selepas log masuk~~

Anda bebas menambah batas atas dan bawah ke harta zoom, tetapi mereka tidak diperlukan. 🎜> Penonton PDF kami di JavaScript sudah siap. Jika anda menyegarkan semula laman web sekali lagi, anda sepatutnya dapat melihat semua halaman yang terdapat dalam dokumen PDF dalam JavaScript dan juga zum masuk ke atau zum dari mereka. Anda telah belajar untuk membuat penonton untuk dokumen PDF dalam JavaScript!

Anda sekarang tahu cara menggunakan pdf.js untuk membuat penonton PDF JavaScript tersuai untuk laman web anda. Dengan penonton baru anda untuk dokumen PDF di JavaScript, anda dengan yakin boleh menawarkan pengalaman pengguna yang lancar semasa memaparkan risalah organisasi anda, kertas putih, bentuk, dan dokumen lain yang dimaksudkan untuk diedarkan sebagai salinan keras. Lebih banyak mengenai pdf.js pada repo github rasmi.

Atas ialah kandungan terperinci Cara Membuat Penonton PDF JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!