Artikel ini terutama memperkenalkan pengetahuan yang relevan tentang cara mengimplementasikan pratinjau pencetakan dan menyimpan konten halaman web. Mari belajar bersama!
1. Masalah tentang pencetakan halaman web
Sebelum ini, saya biasanya menggunakan LoDop yang lebih mudah digunakan untuk melakukan operasi pencetakan. Ini dicakup oleh banyak artikel dalam artikel saya sebelumnya. Kontrol ini adalah kontrol ActiveX. Setelah mengunduh dan menginstal, Anda dapat mencetak di halaman. Ini juga merupakan kontrol yang sangat nyaman. Oleh karena itu, sangat cocok untuk mencetak konten biasa, set dokumen, dan operasi lainnya.
Namun, dengan pembaruan teknologi browser, plug-in ini tampaknya tidak didukung pada Chrome atau Firefox, dan pada dasarnya meninggalkan metode pemrosesan plug-in ini. Misalnya, jika saya perlu mencetak konten di kotak dialog pada halaman, seperti yang ditunjukkan di bawah ini.
Jika Anda memprosesnya dengan cara normal menggunakan LODOP, Anda akan mendapatkan prompt dari browser Chrome, dan pesan kesalahan ini akan berlanjut terlepas dari apakah Anda mengunduh atau memperbarui kontrol LODOP.
Untuk metode alternatif, ini adalah topik artikel ini. Saya selalu suka menemukan beberapa cara yang lebih baik untuk mengimplementasikan fungsi yang saya butuhkan, jadi saya menemukan plug-in printthis (https://github.com/jasonday/printthis) dan jQuery-print-preview-plugin (https://github.com/etimbo/jQuery-print-print-plugin). Dibandingkan dengan keduanya, saya lebih suka penggunaan yang sederhana dan nyaman dari yang pertama.
2. Penggunaan cetak plug-in cetak ini
Dengan masalah di atas, kami memperkenalkan metode pencetakan baru, yaitu plug-in jQuery untuk mengimplementasikan operasi pencetakan konten halaman yang kami butuhkan.
Penggunaan plug-in ini sangat sederhana dan nyaman. Pertama, Anda perlu memperkenalkan file JS yang sesuai ke dalam halaman, seperti yang ditunjukkan di bawah ini.
<skrip src = "~/content/jQueryTools/printthis/printthis.js"> </script>
Kami akan menambahkan dua tombol di bagian atas halaman, seperti operasi pencetakan dan ekspor, kodenya adalah sebagai berikut
<Div> <a href = "#" ontClick = "javaScript: preview ();"> <img src = "~/content/images/print.gif"/> <br/> preview cetak </a> <a href = "#" onClick = "javascript: saveas ();"> <img src = "~ ~ ~ ~ ~ ~ sebagai </a> </div>
Maka kita juga perlu mendeklarasikan div untuk menempatkan konten halaman web yang ditampilkan, yang nyaman untuk dicetak di atasnya.
Kode pemrosesan yang kami cetak juga sangat sederhana, cukup cetak lapisannya secara langsung. Anda dapat melihat bahwa kode penggunaan di bawah ini sangat sederhana.
// Print Preview Function Preview () {$ ("#printContent"). PrintHis ({debug: false, ImportCSS: True, ImportStyle: True, PrintContainer: True, LoadCSS: "/Content, noter, noter," non -noter, " FormValues: true}); };Setelah pencetakan dieksekusi, kotak dialog Print Preview akan muncul di IE dan Chrome untuk mengonfirmasi apakah akan mencetak.
3. Simpan Konten Halaman
Kadang -kadang, untuk memfasilitasi pemrosesan bisnis, kami umumnya dapat memberikan pengguna operasi untuk mengekspor konten yang dicetak. Kode yang ditunjukkan di bawah ini adalah untuk mengekspor konten yang dicetak ke Word bagi pengguna untuk memproses dan tujuan lain.
function saveas () {var id = $ ('#id2'). val (); window.open ('/informasi/eksporwordbyid? id =' + id); }Operasi di atas terutama memanggil metode pengontrol MVC untuk diproses, melewati ID untuk mengekstrak konten, dan kemudian menghasilkan konten kata yang diperlukan.
Di latar belakang, kami terutama menggunakan Kontrol APOSE.Word untuk menghasilkan dokumen templated.
Kami dapat mendefinisikan atau melihat beberapa informasi bookmark dalam bookmark, seperti yang ditunjukkan pada gambar di bawah ini.
Dengan cara ini, kami dapat memperoleh informasi dan menentukan templat kata ini dalam kode.
InformationInfo Info = BllFactory <Prought> .instance.findbyId (ID); if (info! = null) {string template = "~/content/template/board skala kebijakan.doc"; string templateFile = server.mappath (template); Aspose.words.document doc = new aspose.words.document (templateFile);Konten template kata dapat diganti menggunakan teks, seperti yang ditunjukkan di bawah ini.
SetBookmark (Ref Doc, "Konten", Info.Content);
Anda juga dapat menggunakan metode Bookmark Bookmark untuk meminta dan menggantinya, seperti yang ditunjukkan pada kode berikut.
Aspose.words.bookmark bookmark = doc.range.bookmarks [judul]; if (bookmark! = null) {bookmark.text = value; }Ini membutuhkan perawatan khusus untuk konten HTML utama. Secara umum, perlu untuk menulis konten menggunakan metode khusus untuk memasukkan HTML, jika tidak kode HTML akan ditampilkan. Konten yang ditulis menggunakan metode HTML khusus pada dasarnya tidak berbeda dari apa yang kita lihat di halaman web. Seperti yang ditunjukkan dalam kode berikut.
DocumentBuilder Builder = new DocumentBuilder (DOC); Aspose.words.bookmark bookmark = doc.range.bookmarks ["content"]; if (bookmark! = null) {builder.movetoBookmark (bookmark.name); builder.inserthtml (info.content); }Seluruh metode mengimpor dokumen Word adalah menggunakan integrasi konten ini untuk mencapai generasi dokumen standar. Jenis dokumen bisnis ini adalah templat tetap, sehingga sangat cocok untuk digunakan dalam bisnis yang sebenarnya. Ini memiliki plastisitas dan estetika yang lebih baik daripada file atau dokumen HTML yang secara otomatis dihasilkan menggunakan metode lain.
Seluruh kode ditampilkan di bawah ini.
public filestreamResult exportWordById (string id) {if (string.isnullorempty (id)) return null; InformationInfo Info = BllFactory <Prought> .instance.findbyId (ID); if (info! = null) {string template = "~/content/template/board skala kebijakan.doc"; string templateFile = server.mappath (template); Aspose.words.document doc = new aspose.words.document (templateFile); #Region gunakan teks untuk mengganti // kamus <string, string> dictsource = kamus baru <string, string> (); //dictsource.add("title ", info.title); //dictsource.add("content ", info.content); //dictsource.add("edit ", info.editor); //dictsource.add("DitTime ", info.editTime.tostring ()); //dictsource.add("subtype ", info.subtype); // foreach (nama string di dictsource.keys) // {// doc.range.replace (name, DictSource [name], true, true); //} #endregion // ganti setBookmark (ref doc, "title", info.title); Setbookmark (Ref Doc, "Editor", Info.Editor); Setbookmark (Ref Doc, "EditTime", info.editTime.tostring ()); SetBookmark (Ref Doc, "Subtipe", Info.subtype); // Setbookmark (Ref Doc, "Konten", Info.Content); // Untuk konten html, Anda perlu menulis pembangun dokumen builder = new DocumentBuilder (DOC); Aspose.words.bookmark bookmark = doc.range.bookmarks ["content"]; if (bookmark! = null) {builder.movetoBookmark (bookmark.name); builder.inserthtml (info.content); } doc.save (System.web.httpcontext.current.response, info.title, aspose.words.contentdisposition.Attachment, aspose.words.saving.saveoptions.createSaveOptions (aspose.words.saveFormat.doc); HttpresponseBase response = controllerContext.httpcontext.response; response.flush (); response.end (); mengembalikan filestreamResult baru (response.outputStream, "Application/MS-word"); } return null; } private void setBookmark (ref aspose.words.document doc, judul string, nilai string) {aspose.words.bookmark bookmark = doc.range.bookmarks [judul]; if (bookmark! = null) {bookmark.text = value; }}Dokumen kata yang diekspor akhir adalah konten dokumen spesifik yang templated, dan antarmuka pratinjau kata ditunjukkan di bawah ini.
Di atas adalah ringkasan dari pengalaman kerangka pengembangan metronik Bootstrap berdasarkan metronik bootstrap yang diperkenalkan kepada Anda [9] untuk mewujudkan pratinjau pencetakan dan penghematan konten halaman web. Saya harap ini akan membantu semua orang. Jika Anda ingin mengetahui informasi lebih lanjut, harap perhatikan situs web Wulin.com!