Bagaimana untuk Menyimpan Kandungan HTML sebagai PDF dengan Penggayaan CSS Terpelihara?

Menyimpan Kandungan HTML dengan CSS sebagai PDF

Dalam pembangunan web, memelihara estetika visual adalah penting, walaupun semasa mengeksport kandungan ke format yang berbeza. Ini boleh menimbulkan cabaran apabila cuba menyimpan elemen HTML sebagai PDF, kerana penggayaan CSS mungkin hilang semasa proses penukaran.

Untuk kes yang penting untuk mengekalkan CSS dalam PDF yang disimpan, pertimbangkan untuk menggunakan pendekatan berikut:

1. Buat Tetingkap Baharu: Buka tetingkap penyemak imbas baharu khusus untuk menyimpan kandungan sebagai PDF.
2. Tambah HTML dan CSS: Tambahkan kod HTML elemen yang anda ingin simpan pada badan dokumen tetingkap baharu. Selain itu, sertakan sebarang penggayaan CSS yang diperlukan untuk penampilan elemen.
3. Fokus dan Cetak: Fokus pada tetingkap baharu dan mulakan proses pencetakan. Dalam dialog cetakan sistem, pilih pilihan untuk "Cetak ke fail."

Kaedah ini mengekalkan penggayaan CSS dengan berkesan dengan memastikan bahawa penampilan elemen dipaparkan dengan betul apabila disimpan sebagai PDF. Berikut ialah coretan JavaScript yang menunjukkan pendekatan:

<code class="javascript">$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  // `styles`: `style` element; 
  // or `String` "<style>.light{color:#0af;}</style>" ;
  // alternatively , add `style` attribute to `pre` element directly,
  // e.g., `<pre style="color:#0af;">`
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  // append `text`:`pre` element `styles`:`style` element
  // at `popup` `document.body`
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});</code>

Dengan menggunakan pendekatan ini, anda boleh menyimpan elemen HTML sebagai PDF dengan cekap sambil mengekalkan estetika visualnya melalui penggayaan CSS.

Atas ialah kandungan terperinci Bagaimana untuk Menyimpan Kandungan HTML sebagai PDF dengan Penggayaan CSS Terpelihara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!