<![CDATA[<bdo id="wa0gb"></bdo>]]> <![CDATA[<rt id="wa0gb"></rt>]]>
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.
<\/code> <\/code> 3.?Memuatkan fail pdf <\/p>
<\/div>
<\/pre> 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 <\/code>, yang berjalan secara asynchronously. <\/code><\/p>\n
My PDF Viewer<\/title><br><\/head><br><body><br> <br><\/body><br><\/html><br><\/pre> Perhatikan bahawa kaedah <code>getDocument()<\/code> secara dalaman menggunakan objek <code>XMLHttpRequest<\/code> 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. <st> Jika anda tidak mempunyai fail PDF yang berguna, anda boleh mendapatkan yang saya gunakan dari Wikipedia . <p> <\/p> Setelah fail pdf telah dimuatkan dengan jayanya, kami dapat mengemas kini harta benda <p> objek negara kami. Dinamakan <code>pdf<\/code> supaya penonton PDF kami di JS secara automatik menjadikan halaman pertama fail PDF. Kami akan menentukan fungsi dalam langkah seterusnya. <\/p> <pre><div class="377j5v51b" id=\"my_pdf_viewer\"><br> <br><\/div><br><\/pre> <s> 4.?Memberi halaman <\/s><p> <code>render()<\/code> dengan memanggil kaedah <\/p> objek <pre><div class="377j5v51b" id=\"canvas_container\"><br> <canvas id=\"pdf_renderer\"><\/canvas><br><\/div><br><\/pre> dan lulus nombor halaman kepadanya, kita boleh mendapatkan rujukan ke mana -mana halaman dalam fail pdf. Buat masa ini, mari kita lulus harta <h2> 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 <\/h2> objek <p> yang tersedia di dalam panggilan balik. Sebagai hujah, kaedah ini menjangkakan konteks 2D kanvas dan objek <code>getPage()<\/code>, yang boleh kita dapatkan dengan memanggil kaedah <code>pdf<\/code>. Kerana kaedah <code>currentPage<\/code> mengharapkan tahap zoom yang dikehendaki sebagai hujah, kita mesti lulus sifat <\/p> 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: <p> <code>render()<\/code> <\/p> Pada ketika ini, kita boleh teruskan dan menjadikan halaman. <pre><div class="377j5v51b" 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><\/pre> <p> 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.?<code>render()<\/code> <code>page<\/code> Untuk membetulkannya, semua yang perlu kita lakukan ialah memberikan lebar dan ketinggian tetap ke elemen <code>PageViewport<\/code> yang merangkumi kanvas kami dan menetapkan harta CSS <code>getViewport()<\/code> ke <code>getViewport()<\/code>. Harta ini, apabila perlu, menambah bar tatal ke elemen <code>zoom<\/code>, yang membolehkan pengguna menatal kedua -dua secara mendatar dan menegak. <\/p>\n<p> Tambahkan kod berikut di dalam tag <code><head><\/code> laman web: <\/p> <pre><!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><\/pre> <p> Anda, tentu saja, bebas untuk menukar lebar dan ketinggian atau bahkan menggunakan pertanyaan media untuk membuat <code><div><\/code> Unsur Memadankan keperluan anda. <\/p> <p> Secara pilihan, anda boleh memasukkan peraturan CSS berikut untuk menjadikan elemen <code><div><\/code> kelihatan lebih jelas: <\/p> <pre><div class="377j5v51b" id=\"my_pdf_viewer\"><br> <br><\/div><br><\/pre> <p> Jika anda menyegarkan laman web Sekarang, anda harus melihat sesuatu seperti ini di skrin anda: <\/p> <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174053342193545.png\" alt=\"Cara Membuat Penonton PDF JavaScript\" > <s> 5.?Menukar halaman semasa <h2> <\/h2> 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 <\/s><p> dan <code>go_previous<\/code> yang kami buat sebelum ini. Mengurangkan sifat <code>go_next<\/code> objek negara kita, pastikan ia tidak jatuh di bawah <\/p>. Selepas kita berbuat demikian, kita hanya boleh memanggil fungsi <p> sekali lagi untuk menjadikan halaman baru. Kod berikut menunjukkan kepada anda bagaimana: <code>go_previous<\/code> <code>currentPage<\/code> <code>1<\/code> Begitu juga, di dalam butang pendengar peristiwa <code>render()<\/code>, kita mesti meningkatkan harta <\/p>, sambil memastikan bahawa ia tidak melebihi bilangan halaman Hadir dalam fail pdf, yang boleh kita tentukan menggunakan sifat <p> objek <code>current_page<\/code>. supaya pengguna boleh terus melompat ke mana -mana halaman yang mereka inginkan dengan hanya menaip dalam nombor halaman dan memukul kekunci <\/p> enter <pre><div class="377j5v51b" id=\"canvas_container\"><br> <canvas id=\"pdf_renderer\"><\/canvas><br><\/div><br><\/pre>. Di dalam pendengar acara, kita perlu memastikan bahawa bilangan pengguna yang dimasukkan adalah lebih besar daripada sifar dan kurang daripada atau sama dengan harta <p>. Paparkan mana -mana halaman fail pdf. <code>go_next<\/code> <code>currentPage<\/code> <code>numPages<\/code> 6.?Menukar tahap zoom <code>_pdfInfo<\/code> <\/p> kerana fungsi <pre><div class="377j5v51b" 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><\/pre> kami sudah menggunakan sifat <p> objek negara semasa membuat halaman, menyesuaikan tahap zoom semudah meningkatkan atau menurunkan harta dan memanggil fungsi. <code>current_page<\/code> <s> di dalam butang Acara di atas klik pada butang <strong>, mari kita kenaikan harta <\/strong> oleh <code>numPages<\/code>.<pre><!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><\/pre> <\/s><\/p>\n<p> Anda bebas menambah batas atas dan bawah ke harta <code>zoom<\/code>, tetapi mereka tidak diperlukan. ??> <s> 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! <\/s><\/p> <s> 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. <\/s><p><\/p><\/st>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/ms/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="masyarakat" class="head_nava head_nava-template1">masyarakat</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://www.miracleart.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a>
<a href="http://www.miracleart.cn/ms/wenda.html" title="Soal Jawab" class="languagechoosea">Soal Jawab</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Belajar" class="head_nava head_nava-template1_1">Belajar</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a>
<a href="http://www.miracleart.cn/ms/dic/" title="Kamus Pengaturcaraan" class="languagechoosea">Kamus Pengaturcaraan</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Perpustakaan Alatan" class="head_nava head_nava-template1_2">Perpustakaan Alatan</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a>
<a href="http://www.miracleart.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a>
<a href="http://www.miracleart.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a>
<a href="http://www.miracleart.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a>
<a href="http://www.miracleart.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a>
<a href="http://www.miracleart.cn/ms/toolset/extension-plug-ins" title="Pemalam sambungan" class="languagechoosea on">Pemalam sambungan</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/ms/ai" title="Alat AI" class="head_nava head_nava-template1_3">Alat AI</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Masa lapang" class="head_nava head_nava-template1_3">Masa lapang</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a>
<a href="http://www.miracleart.cn/ms/mobile-game-tutorial/" title="Tutorial Permainan" class="languagechoosea">Tutorial Permainan</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ms')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="cari" onclick="searchs('ms')"><img src="/static/imghw/find.png" alt="cari"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Melayu<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:;" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">Jadual Kandungan</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#kami-akan-memulakan-tutorial-penonton-JS-PDF-ini-dengan-membuat-laman-web-baru-dan-menambah-kod-html-boilerplate-biasa-gt-buat-elemen" title=" kami akan memulakan tutorial penonton JS PDF ini dengan membuat laman web baru dan menambah kod html5 boilerplate biasa. >, buat elemen " > kami akan memulakan tutorial penonton JS PDF ini dengan membuat laman web baru dan menambah kod html5 boilerplate biasa. >, buat elemen </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#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" title=" 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 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 </a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/ms/" title="Rumah"
class="phpgenera_Details_mainL1a">Rumah</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ms/web-designer.html"
class="phpgenera_Details_mainL1a">hujung hadapan web</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ms/css-tutorial.html"
class="phpgenera_Details_mainL1a">tutorial css</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Cara Membuat Penonton PDF JavaScript</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Cara Membuat Penonton PDF JavaScript</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ms/member/1468494.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea812815a39919.png" src="/static/imghw/default1.png" alt="Jennifer Aniston">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ms/member/1468494.html" class="author_name">Jennifer Aniston</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Feb 26, 2025 am 09:30 AM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p> 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. </p> <p> 1.?Mewujudkan antara muka pengguna </p> <h2 id="kami-akan-memulakan-tutorial-penonton-JS-PDF-ini-dengan-membuat-laman-web-baru-dan-menambah-kod-html-boilerplate-biasa-gt-buat-elemen"> kami akan memulakan tutorial penonton JS PDF ini dengan membuat laman web baru dan menambah kod html5 boilerplate biasa. >, buat elemen </h2> yang boleh berfungsi sebagai bekas untuk penonton PDF kami di JS. JavaScript PDF Viewer akan menjadi elemen HTML5 <p>. Kami akan memberikan halaman fail PDF kami di dalamnya. Oleh itu, tambahkan kod berikut di dalam elemen </p>. 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 <pre class="brush:php;toolbar:false"><!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></pre> <p> 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. <code><body></code> <code><div></code> 3.?Memuatkan fail pdf </p> <pre class="brush:php;toolbar:false"><div id="my_pdf_viewer"><br> <br></div><br></pre> 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 <p> objek <code><canvas></code>, yang berjalan secara asynchronously. <code><div></code></p>
<pre class="brush:php;toolbar:false"><!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></pre> Perhatikan bahawa kaedah <code>getDocument()</code> secara dalaman menggunakan objek <code>XMLHttpRequest</code> 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. <st> Jika anda tidak mempunyai fail PDF yang berguna, anda boleh mendapatkan yang saya gunakan dari Wikipedia . <p> </p> Setelah fail pdf telah dimuatkan dengan jayanya, kami dapat mengemas kini harta benda <p> objek negara kami. Dinamakan <code>pdf</code> supaya penonton PDF kami di JS secara automatik menjadikan halaman pertama fail PDF. Kami akan menentukan fungsi dalam langkah seterusnya. </p> <pre class="brush:php;toolbar:false"><div id="my_pdf_viewer"><br> <br></div><br></pre> <s> 4.?Memberi halaman </s><p> <code>render()</code> dengan memanggil kaedah </p> objek <pre class="brush:php;toolbar:false"><div id="canvas_container"><br> <canvas id="pdf_renderer"></canvas><br></div><br></pre> dan lulus nombor halaman kepadanya, kita boleh mendapatkan rujukan ke mana -mana halaman dalam fail pdf. Buat masa ini, mari kita lulus harta <h2 id="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 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 </h2> objek <p> yang tersedia di dalam panggilan balik. Sebagai hujah, kaedah ini menjangkakan konteks 2D kanvas dan objek <code>getPage()</code>, yang boleh kita dapatkan dengan memanggil kaedah <code>pdf</code>. Kerana kaedah <code>currentPage</code> mengharapkan tahap zoom yang dikehendaki sebagai hujah, kita mesti lulus sifat </p> 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: <p> <code>render()</code> </p> Pada ketika ini, kita boleh teruskan dan menjadikan halaman. <pre class="brush:php;toolbar:false"><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></pre> <p> 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.?<code>render()</code> <code>page</code> Untuk membetulkannya, semua yang perlu kita lakukan ialah memberikan lebar dan ketinggian tetap ke elemen <code>PageViewport</code> yang merangkumi kanvas kami dan menetapkan harta CSS <code>getViewport()</code> ke <code>getViewport()</code>. Harta ini, apabila perlu, menambah bar tatal ke elemen <code>zoom</code>, yang membolehkan pengguna menatal kedua -dua secara mendatar dan menegak. </p>
<p> Tambahkan kod berikut di dalam tag <code><head></code> laman web: </p> <pre class="brush:php;toolbar:false"><!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></pre> <p> Anda, tentu saja, bebas untuk menukar lebar dan ketinggian atau bahkan menggunakan pertanyaan media untuk membuat <code><div></code> Unsur Memadankan keperluan anda. </p> <p> Secara pilihan, anda boleh memasukkan peraturan CSS berikut untuk menjadikan elemen <code><div></code> kelihatan lebih jelas: </p> <pre class="brush:php;toolbar:false"><div id="my_pdf_viewer"><br> <br></div><br></pre> <p> Jika anda menyegarkan laman web Sekarang, anda harus melihat sesuatu seperti ini di skrin anda: </p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174053342193545.png" class="lazy" alt="Cara Membuat Penonton PDF JavaScript" > <s> 5.?Menukar halaman semasa <h2> </h2> 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 </s><p> dan <code>go_previous</code> yang kami buat sebelum ini. Mengurangkan sifat <code>go_next</code> objek negara kita, pastikan ia tidak jatuh di bawah </p>. Selepas kita berbuat demikian, kita hanya boleh memanggil fungsi <p> sekali lagi untuk menjadikan halaman baru. Kod berikut menunjukkan kepada anda bagaimana: <code>go_previous</code> <code>currentPage</code> <code>1</code> Begitu juga, di dalam butang pendengar peristiwa <code>render()</code>, kita mesti meningkatkan harta </p>, sambil memastikan bahawa ia tidak melebihi bilangan halaman Hadir dalam fail pdf, yang boleh kita tentukan menggunakan sifat <p> objek <code>current_page</code>. supaya pengguna boleh terus melompat ke mana -mana halaman yang mereka inginkan dengan hanya menaip dalam nombor halaman dan memukul kekunci </p> enter <pre class="brush:php;toolbar:false"><div id="canvas_container"><br> <canvas id="pdf_renderer"></canvas><br></div><br></pre>. Di dalam pendengar acara, kita perlu memastikan bahawa bilangan pengguna yang dimasukkan adalah lebih besar daripada sifar dan kurang daripada atau sama dengan harta <p>. Paparkan mana -mana halaman fail pdf. <code>go_next</code> <code>currentPage</code> <code>numPages</code> 6.?Menukar tahap zoom <code>_pdfInfo</code> </p> kerana fungsi <pre class="brush:php;toolbar:false"><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></pre> kami sudah menggunakan sifat <p> objek negara semasa membuat halaman, menyesuaikan tahap zoom semudah meningkatkan atau menurunkan harta dan memanggil fungsi. <code>current_page</code> <s> di dalam butang Acara di atas klik pada butang <strong>, mari kita kenaikan harta </strong> oleh <code>numPages</code>.<pre class="brush:php;toolbar:false"><!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></pre> </s></p>
<p> Anda bebas menambah batas atas dan bawah ke harta <code>zoom</code>, tetapi mereka tidak diperlukan. ??> <s> 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! </s></p> <s> 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. </s><p></p></st><p>Atas ialah kandungan terperinci Cara Membuat Penonton PDF JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Kenyataan Laman Web ini</div>
<div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796832397.html" title="Panduan Membina Rumput Wonder | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Panduan Membina Rumput Wonder | Uma Musume Pretty Derby</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796833110.html" title="<??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796831605.html" title="Jadual Banner Pretty Derby Uma Musume (Julai 2025)" class="phpgenera_Details_mainR4_bottom_title">Jadual Banner Pretty Derby Uma Musume (Julai 2025)</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796836699.html" title="Panduan Suhu Rimworld Odyssey untuk Kapal dan Gravtech" class="phpgenera_Details_mainR4_bottom_title">Panduan Suhu Rimworld Odyssey untuk Kapal dan Gravtech</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796831905.html" title="Keselamatan Windows kosong atau tidak menunjukkan pilihan" class="phpgenera_Details_mainR4_bottom_title">Keselamatan Windows kosong atau tidak menunjukkan pilihan</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat AI Hot</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Gambar buka pakaian secara percuma</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Penyingkiran pakaian AI</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796832397.html" title="Panduan Membina Rumput Wonder | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Panduan Membina Rumput Wonder | Uma Musume Pretty Derby</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796833110.html" title="<??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796831605.html" title="Jadual Banner Pretty Derby Uma Musume (Julai 2025)" class="phpgenera_Details_mainR4_bottom_title">Jadual Banner Pretty Derby Uma Musume (Julai 2025)</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796836699.html" title="Panduan Suhu Rimworld Odyssey untuk Kapal dan Gravtech" class="phpgenera_Details_mainR4_bottom_title">Panduan Suhu Rimworld Odyssey untuk Kapal dan Gravtech</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796831905.html" title="Keselamatan Windows kosong atau tidak menunjukkan pilihan" class="phpgenera_Details_mainR4_bottom_title">Keselamatan Windows kosong atau tidak menunjukkan pilihan</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Editor kod yang mudah digunakan dan percuma</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Cina</h3>
</a>
<p>Versi Cina, sangat mudah digunakan</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Hantar Studio 13.0.1</h3>
</a>
<p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Alat pembangunan web visual</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Mac</h3>
</a>
<p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Topik panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1601</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1502</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>276</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ms/faq/zt">Tunjukkan Lagi</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796831408.html" title="Tutorial CSS untuk membuat pemuatan dan animasi pemuatan" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175181807052041.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Tutorial CSS untuk membuat pemuatan dan animasi pemuatan" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796831408.html" title="Tutorial CSS untuk membuat pemuatan dan animasi pemuatan" class="phphistorical_Version2_mids_title">Tutorial CSS untuk membuat pemuatan dan animasi pemuatan</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 07, 2025 am 12:07 AM</span>
<p class="Articlelist_txts_p">Terdapat tiga cara untuk membuat pemutar pemuatan CSS: 1. Gunakan pemutar asas sempadan untuk mencapai animasi mudah melalui HTML dan CSS; 2. Gunakan pemutar tersuai pelbagai mata untuk mencapai kesan lompat melalui masa kelewatan yang berlainan; 3. Tambahkan pemutar dalam butang dan beralih kelas melalui JavaScript untuk memaparkan status pemuatan. Setiap pendekatan menekankan pentingnya butiran reka bentuk seperti warna, saiz, kebolehcapaian dan pengoptimuman prestasi untuk meningkatkan pengalaman pengguna.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796831743.html" title="Menangani masalah dan awalan keserasian penyemak imbas CSS" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175182386183257.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Menangani masalah dan awalan keserasian penyemak imbas CSS" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796831743.html" title="Menangani masalah dan awalan keserasian penyemak imbas CSS" class="phphistorical_Version2_mids_title">Menangani masalah dan awalan keserasian penyemak imbas CSS</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 07, 2025 am 01:44 AM</span>
<p class="Articlelist_txts_p">Untuk menangani keserasian pelayar CSS dan isu awalan, anda perlu memahami perbezaan sokongan penyemak imbas dan menggunakan awalan vendor dengan munasabah. 1. Memahami masalah biasa seperti Flexbox dan sokongan grid, kedudukan: prestasi tidak sah, dan prestasi animasi adalah berbeza; 2. Periksa status sokongan ciri CANIUSE Ciri; 3. Gunakan dengan betul -webkit-, -moz-, -ms-, -o- dan awalan pengeluar lain; 4. Adalah disyorkan untuk menggunakan autoprefixer untuk menambah awalan secara automatik; 5. Pasang postcss dan konfigurasi penyemak imbas untuk menentukan penyemak imbas sasaran; 6. Secara automatik mengendalikan keserasian semasa pembinaan; 7. Ciri -ciri pengesanan moden boleh digunakan untuk projek lama; 8. Tidak perlu meneruskan konsistensi semua pelayar,</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796834914.html" title="Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175217550090568.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796834914.html" title="Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?" class="phphistorical_Version2_mids_title">Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 11, 2025 am 03:25 AM</span>
<p class="Articlelist_txts_p">Themaindifferencesbetweendisplay: inline, block, andinline-blockinhtml/cssarelayoutbehavior, spaceusage, andstylingcontrol.1.inlineelementsflowwithtext, notstartonNewlines, abaikanwidth/height, andonyapplylylylylylinddding/</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796834918.html" title="Gaya yang dikunjungi pautan berbeza dengan CSS" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175217558128323.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Gaya yang dikunjungi pautan berbeza dengan CSS" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796834918.html" title="Gaya yang dikunjungi pautan berbeza dengan CSS" class="phphistorical_Version2_mids_title">Gaya yang dikunjungi pautan berbeza dengan CSS</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 11, 2025 am 03:26 AM</span>
<p class="Articlelist_txts_p">Menetapkan gaya pautan yang telah anda lawati dapat meningkatkan pengalaman pengguna, terutama di laman web yang berintensifkan kandungan untuk membantu pengguna menavigasi lebih baik. 1. Gunakan CSS: Kelas pseudo yang dilawati untuk menentukan gaya pautan yang dikunjungi, seperti perubahan warna; 2. Perhatikan bahawa penyemak imbas hanya membenarkan pengubahsuaian beberapa atribut disebabkan oleh sekatan privasi; 3. Pemilihan warna harus diselaraskan dengan gaya keseluruhan untuk mengelakkan ketangkasan; 4. Terminal mudah alih mungkin tidak memaparkan kesan ini, dan disyorkan untuk menggabungkannya dengan arahan visual lain seperti logo tambahan ikon.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796833145.html" title="Membuat bentuk tersuai dengan laluan klip CSS" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175199577133591.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Membuat bentuk tersuai dengan laluan klip CSS" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796833145.html" title="Membuat bentuk tersuai dengan laluan klip CSS" class="phphistorical_Version2_mids_title">Membuat bentuk tersuai dengan laluan klip CSS</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 09, 2025 am 01:29 AM</span>
<p class="Articlelist_txts_p">Gunakan atribut clip-path CSS untuk menanam unsur-unsur ke dalam bentuk tersuai, seperti segitiga, takik bulat, poligon, dan lain-lain, tanpa bergantung pada gambar atau SVG. Kelebihannya termasuk: 1. Menyokong pelbagai bentuk asas seperti Circle, Ellipse, Polygon, dan lain -lain; 2. Pelarasan responsif dan boleh disesuaikan dengan terminal mudah alih; 3. Mudah untuk animasi, dan boleh digabungkan dengan hover atau javascript untuk mencapai kesan dinamik; 4. Ia tidak menjejaskan aliran susun atur, dan hanya tanaman kawasan paparan. Penggunaan umum adalah seperti laluan klip bulat: bulatan (50pxatcenter) dan triangle clip-path: polygon (50%0%, 100 0%, 0 0%). Notis</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796837251.html" title="Bagaimana untuk membuat imej responsif menggunakan CSS?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175251305059116.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana untuk membuat imej responsif menggunakan CSS?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796837251.html" title="Bagaimana untuk membuat imej responsif menggunakan CSS?" class="phphistorical_Version2_mids_title">Bagaimana untuk membuat imej responsif menggunakan CSS?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 15, 2025 am 01:10 AM</span>
<p class="Articlelist_txts_p">Untuk membuat imej responsif menggunakan CSS, ia boleh dicapai terutamanya melalui kaedah berikut: 1. Gunakan maksimum lebar: 100% dan ketinggian: auto untuk membolehkan imej menyesuaikan diri dengan lebar kontena sambil mengekalkan perkadaran; 2. Gunakan atribut SRCSET dan saiz HTML dengan bijak memuatkan sumber imej yang disesuaikan dengan skrin yang berbeza; 3. Gunakan objek-sesuai dan kedudukan objek untuk mengawal penanaman imej dan paparan fokus. Bersama -sama, kaedah ini memastikan bahawa imej dibentangkan dengan jelas dan indah pada peranti yang berbeza.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796832540.html" title="Unit CSS Demystifying: PX, EM, REM, VW, VH Perbandingan" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191219061804.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Unit CSS Demystifying: PX, EM, REM, VW, VH Perbandingan" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796832540.html" title="Unit CSS Demystifying: PX, EM, REM, VW, VH Perbandingan" class="phphistorical_Version2_mids_title">Unit CSS Demystifying: PX, EM, REM, VW, VH Perbandingan</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:16 AM</span>
<p class="Articlelist_txts_p">Pilihan unit CSS bergantung kepada keperluan reka bentuk dan keperluan responsif. 1.PX digunakan untuk saiz tetap, sesuai untuk kawalan yang tepat tetapi kekurangan keanjalan; 2.EM adalah unit relatif, yang mudah disebabkan oleh pengaruh unsur induk, sementara REM lebih stabil berdasarkan unsur akar dan sesuai untuk skala global; 3.VW/VH didasarkan pada saiz viewport, sesuai untuk reka bentuk yang responsif, tetapi perhatian harus dibayar kepada prestasi di bawah skrin yang melampau; 4. Apabila memilih, ia harus ditentukan berdasarkan sama ada pelarasan responsif, hubungan hierarki elemen dan ketergantungan viewport. Penggunaan yang munasabah boleh meningkatkan fleksibiliti dan penyelenggaraan susun atur.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796847484.html" title="Apakah ketidakkonsistenan penyemak imbas CSS biasa?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175348469118409.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah ketidakkonsistenan penyemak imbas CSS biasa?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796847484.html" title="Apakah ketidakkonsistenan penyemak imbas CSS biasa?" class="phphistorical_Version2_mids_title">Apakah ketidakkonsistenan penyemak imbas CSS biasa?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 26, 2025 am 07:04 AM</span>
<p class="Articlelist_txts_p">Penyemak imbas yang berbeza mempunyai perbezaan dalam parsing CSS, mengakibatkan kesan paparan yang tidak konsisten, terutamanya termasuk perbezaan gaya lalai, kaedah pengiraan model kotak, flexbox dan tahap sokongan susun atur grid, dan tingkah laku yang tidak konsisten bagi atribut CSS tertentu. 1. Pemprosesan gaya lalai tidak konsisten. Penyelesaiannya adalah menggunakan cssreset atau normalisasi.css untuk menyatukan gaya awal; 2. Kaedah pengiraan model kotak versi lama IE adalah berbeza. Adalah disyorkan untuk menggunakan kotak-kotak: kotak sempadan dengan cara yang bersatu; 3. Flexbox dan grid melakukan secara berbeza dalam kes kelebihan atau dalam versi lama. Lebih banyak ujian dan gunakan autoprefixer; 4. Beberapa tingkah laku atribut CSS tidak konsisten. CANIUSE mesti dirujuk dan diturunkan.</p>
</div>
</div>
<a href="http://www.miracleart.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/ms/about/us.html">Tentang kita</a>
<a href="http://www.miracleart.cn/ms/about/disclaimer.html">Penafian</a>
<a href="http://www.miracleart.cn/ms/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="niovv" class="pl_css_ganrao" style="display: none;"><font id="niovv"><menu id="niovv"><dd id="niovv"></dd></menu></font><sup id="niovv"></sup><dfn id="niovv"><em id="niovv"><s id="niovv"><ol id="niovv"></ol></s></em></dfn><li id="niovv"></li><pre id="niovv"></pre><big id="niovv"><tbody id="niovv"><dfn id="niovv"><var id="niovv"></var></dfn></tbody></big><var id="niovv"></var><acronym id="niovv"></acronym><tr id="niovv"></tr><em id="niovv"><s id="niovv"><abbr id="niovv"></abbr></s></em><small id="niovv"></small><em id="niovv"></em><font id="niovv"></font><rp id="niovv"><label id="niovv"><option id="niovv"><object id="niovv"></object></option></label></rp><li id="niovv"></li><optgroup id="niovv"></optgroup><s id="niovv"></s><ins id="niovv"><cite id="niovv"></cite></ins><ul id="niovv"></ul><strike id="niovv"></strike><tfoot id="niovv"><pre id="niovv"><tfoot id="niovv"></tfoot></pre></tfoot><pre id="niovv"><b id="niovv"></b></pre><dl id="niovv"><button id="niovv"><input id="niovv"></input></button></dl><abbr id="niovv"></abbr><wbr id="niovv"></wbr><address id="niovv"></address><form id="niovv"><optgroup id="niovv"><blockquote id="niovv"><pre id="niovv"></pre></blockquote></optgroup></form><tr id="niovv"></tr><dd id="niovv"></dd><strong id="niovv"><dfn id="niovv"><label id="niovv"></label></dfn></strong><sup id="niovv"><table id="niovv"><xmp id="niovv"></xmp></table></sup><p id="niovv"></p><input id="niovv"></input><strike id="niovv"><abbr id="niovv"><source id="niovv"></source></abbr></strike><pre id="niovv"></pre><th id="niovv"></th><form id="niovv"></form><delect id="niovv"><small id="niovv"></small></delect><em id="niovv"></em><style id="niovv"></style><strike id="niovv"><tr id="niovv"><strike id="niovv"><acronym id="niovv"></acronym></strike></tr></strike><acronym id="niovv"><sup id="niovv"><button id="niovv"><source id="niovv"></source></button></sup></acronym><pre id="niovv"></pre><sup id="niovv"></sup><center id="niovv"></center><small id="niovv"><progress id="niovv"></progress></small><td id="niovv"><kbd id="niovv"><div id="niovv"></div></kbd></td><track id="niovv"></track><input id="niovv"></input><dfn id="niovv"><em id="niovv"><pre id="niovv"></pre></em></dfn></div>
</html>