Tiada muat naik, 100% setempat, tiada akaun

HTML ke PDF

Tampal HTML, pilih saiz halaman, dan muat turun PDF, semua dipaparkan dalam pelayar.

Cara HTML ke PDF berfungsi

HTML to PDF mengambil markup HTML yang anda tampal ke dalam penyunting, menyahsanitaskannya dengan DOMPurify untuk membuang skrip dan atribut tidak selamat, merendernya pada kanvas di luar skrin menggunakan html2canvas, dan mengekodsemula hasilnya ke dalam PDF dengan jsPDF. Keseluruhan saluran paip berjalan di dalam tab pelayar anda; tiada kod HTML atau output yang dipapar yang dihantar ke mana-mana pelayan. Ini menjadikannya sesuai untuk menukar serpihan HTML yang mengandungi data peribadi yang tidak mahu anda tampal ke perkhidmatan dalam talian.

Fahami format output sebelum anda bergantung padanya. Halaman PDF adalah imej raster, bukan teks vektor. Teks dalam output tidak boleh dipilih, tidak boleh dicari, dan tidak boleh dialir semula. Sumber luar seperti imej yang dirujuk oleh URL disekat oleh dasar CORS pelayar dan tidak akan dimuatkan. Gaya sebaris dan CSS terbenam berfungsi, tetapi susun atur yang kompleks dengan fon web tersuai atau grid CSS lanjutan mungkin tidak dipapar dengan tepat. Untuk penukaran setia dokumen halaman web penuh, pelayar tanpa kepala yang berjalan di bahagian pelayan adalah alat yang lebih sesuai.

Ditulis oleh Bastien Sulyan

Cara menggunakan HTML ke PDF, langkah demi langkah

  1. Tampal markup HTML anda ke dalam kawasan penyunting.
  2. Secara pilihan laraskan saiz halaman (A4 atau Letter) dan orientasi.
  3. Klik convert; DOMPurify menyahsanitaskan HTML dan html2canvas memaparnya.
  4. Tunggu jsPDF mengekodsemula output kanvas sebagai halaman PDF.
  5. Muat turun PDF.

Kes penggunaan biasa

  • Anda menjana invois HTML dalam pelayar daripada templat setempat dan mahukan salinan PDF tanpa menghantarnya melalui e-mel ke perkhidmatan penukaran.
  • Laporan HTML ringkas yang dibina daripada data API perlu disimpan sebagai PDF untuk pengarkiban; tampal HTML dan tukar secara setempat.
  • Anda menulis templat e-mel HTML bergaya dan ingin pratonton rupa apabila dicetak sebagai PDF.
  • Pembangun memerlukan PDF pantas daripada serpihan HTML semasa ujian, tanpa menyediakan pelayar tanpa kepala di bahagian pelayan.

Soalan lazim

Mengapa teks dalam PDF output tidak boleh dipilih?

Saluran paip penukaran memapar HTML ke bitmap kanvas menggunakan html2canvas, kemudian mengekodsemula bitmap tersebut sebagai data imej di dalam halaman PDF dengan jsPDF. Output adalah imej yang dirasterkan, bukan lapisan teks. Jika anda memerlukan PDF dengan teks yang boleh dipilih, anda memerlukan pelayar tanpa kepala di bahagian pelayan seperti Puppeteer, yang sengaja dielakkan oleh alat ini untuk memastikan pemprosesan setempat.

Mengapa imej dalam HTML saya tidak muncul dalam PDF?

Imej yang dimuatkan daripada URL luar tertakluk kepada dasar CORS pelayar. Jika pelayan imej tidak menghantar pengepala CORS yang permisif, html2canvas tidak dapat membaca data piksel dan slot imej dipapar kosong. Imej yang dikodkan base64 sebaris yang tertanam terus dalam HTML atau imej daripada asal yang sama berfungsi tanpa sekatan ini.

Adakah HTML yang saya tampal dihantar ke pelayan?

Tidak. HTML kekal dalam ingatan pelayar sepanjang masa. DOMPurify menyahsanitaskannya di bahagian klien, html2canvas memaparnya di bahagian klien, dan jsPDF mengekodsemula PDF di bahagian klien. Tiada apa yang meninggalkan tab pelayar.

Apakah yang dibuang oleh penyahsanitasan DOMPurify?

DOMPurify membuang tag skrip, atribut pengendali acara seperti onclick dan onload, URL javascript:, dan konstruk lain yang boleh melaksanakan kod. Ia mengekalkan markup struktur dan gaya, jadi output yang dipapar kelihatan sama tetapi selamat untuk dimasukkan dalam konteks dokumen.

Bolehkah saya menukar URL halaman web penuh dan bukannya menampal HTML?

Tidak. Alat ini berfungsi dengan markup HTML yang anda tampal terus. Memuatkan URL memerlukan pengambilan halaman, yang menghadapi sekatan CORS untuk kebanyakan tapak dan akan melibatkan permintaan rangkaian yang membawa operasi keluar dari model pemprosesan setempat.