Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengekalkan Penggayaan CSS Apabila Menyimpan Elemen \'pra\' sebagai PDF?

Bagaimana untuk Mengekalkan Penggayaan CSS Apabila Menyimpan Elemen \'pra\' sebagai PDF?

Barbara Streisand
Barbara Streisandasal
2024-10-23 15:43:021067semak imbas

How to Preserve CSS Styling When Saving 'pre' Element as PDF?

Memelihara Penggayaan CSS Apabila Menyimpan Elemen 'pra' sebagai PDF

Dalam usaha untuk memperluaskan fungsi penyerlahan sintaks dengan keupayaan menyimpan PDF, satu perkara yang penting aspek yang sering diabaikan ialah pemeliharaan penggayaan CSS. Walaupun pendekatan konvensional mungkin menghasilkan PDF tanpa maklumat penggayaan penting, terdapat penyelesaian yang memastikan pemindahan atribut CSS yang setia.

Untuk menjawab pertanyaan, kuncinya terletak pada memanfaatkan gabungan fungsi penyemakan imbas web. Dengan mencipta tetingkap penyemak imbas baharu secara dinamik, menambahkan elemen HTML dan CSS yang diperlukan serta menggunakan fungsi cetakan, kami boleh memintas pengehadan yang dikenakan oleh kaedah penjanaan PDF biasa.

Coretan kod berikut menunjukkan pendekatan ini:

<code class="javascript">$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});</code>

Dalam kod ini, pengendali klik menangkap kandungan HTML elemen 'pra', bersama-sama dengan maklumat penggayaan daripada elemen CSS. Tetingkap pop timbul baharu dibuat, dan gabungan elemen HTML dan CSS dilampirkan pada badannya. Dengan memanggil .focus() dan .print() pada tetingkap timbul, kami mencetuskan fungsi cetakan sistem dan membuka dialog cetakan. Dengan memilih "Cetak ke fail", anda boleh menyimpan output sebagai PDF dengan semua penggayaan CSS asal utuh.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Penggayaan CSS Apabila Menyimpan Elemen \'pra\' sebagai PDF?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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