Cara Membuat Penonton PDF JavaScript
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>
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>
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>
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. 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>
render() dengan memanggil kaedah
<div id="canvas_container"><br> <canvas id="pdf_renderer"></canvas><br></div><br>
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
render()
<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>
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>
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>
Jika anda menyegarkan laman web Sekarang, anda harus melihat sesuatu seperti ini di skrin anda:
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
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
objek current_page. supaya pengguna boleh terus melompat ke mana -mana halaman yang mereka inginkan dengan hanya menaip dalam nombor halaman dan memukul kekunci
<div id="canvas_container"><br> <canvas id="pdf_renderer"></canvas><br></div><br>
. Paparkan mana -mana halaman fail pdf. go_next currentPage numPages 6. Menukar tahap zoom _pdfInfo
<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>
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>
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!
Atas ialah kandungan terperinci Cara Membuat Penonton PDF JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1669
14
1428
52
1329
25
1273
29
1256
24
Perbandingan pembekal bentuk statik
Apr 16, 2025 am 11:20 AM
Mari kita cuba menyusun istilah di sini: "Penyedia Borang Statik." Anda membawa html anda
Bukti konsep untuk menjadikan sass lebih cepat
Apr 16, 2025 am 10:38 AM
Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula
Berita Platform Mingguan: Atribut Memuat HTML, Spesifikasi ARIA Utama, dan Bergerak Dari IFRAME ke Shadow Dom
Apr 17, 2025 am 10:55 AM
Pada minggu ini, berita platform, Chrome memperkenalkan atribut baru untuk memuatkan, spesifikasi aksesibiliti untuk pemaju web, dan gerakan BBC
Beberapa tangan dengan elemen dialog HTML
Apr 16, 2025 am 11:33 AM
Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan
Kertas kerja
Apr 16, 2025 am 11:24 AM
Beli atau Membina adalah perdebatan klasik dalam teknologi. Membina barang sendiri mungkin berasa lebih murah kerana tidak ada item baris pada bil kad kredit anda, tetapi
Di manakah 'Langgan Podcast' pautan ke?
Apr 16, 2025 pm 12:04 PM
Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:
Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP Baru
Apr 17, 2025 am 11:26 AM
Pada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s
Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiri
Apr 15, 2025 am 11:09 AM
Terdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas
