In diesem Artikel wird hauptsächlich das relevante Wissen über die Implementierung der Druckvorschau und das Speichern von Webseiteninhalten vorgestellt. Lass uns zusammen lernen!
1. Probleme zum Webseitendruck
Vorher habe ich im Allgemeinen den leichter zu verwendenden Lodop verwendet, um Druckvorgänge durchzuführen. Dies wurde durch viele Artikel in meinen vorherigen Artikeln behandelt. Diese Steuerung ist eine ActiveX -Steuerung. Nach dem Herunterladen und Installieren können Sie auf der Seite drucken. Es ist auch eine sehr bequeme Kontrolle. Daher ist es sehr geeignet, gewöhnliche Inhalte, Dokumentsätze und andere Vorgänge zu drucken.
Mit dem Update der Browser-Technologie scheint dieses Plug-In jedoch nicht auf Chrome oder Firefox unterstützt zu werden und verlässt die Verarbeitungsmethode dieses Plug-Ins im Grunde. Wenn ich beispielsweise den Inhalt im Dialogfeld auf der Seite drucken muss, wie unten gezeigt.
Wenn Sie es auf normale Weise zur Verwendung von Lodop verarbeiten, erhalten Sie eine Eingabeaufforderung aus dem Chrome -Browser, und diese Fehlermeldung wird fortgesetzt, unabhängig davon, ob Sie die Lodop -Steuerung herunterladen oder aktualisieren.
Für alternative Methoden ist dies das Thema dieses Artikels. Ich habe immer gerne einige bessere Möglichkeiten gefunden, um die Funktionen zu implementieren, die ich brauche, und fand das Plug-In of Printhis (https://github.com/jasonday/printthis) und jquery-print-preview-plugin (https Im Vergleich zu den beiden bevorzuge ich die einfache und bequeme Verwendung des ersten.
2. Verwendung des Printhis-Print-Plug-Ins
Mit dem obigen Problem führen wir eine neue Druckmethode ein, dh das Jquery-Plug-In, um den Druckvorgang des von uns benötigten Seiteninhalts zu implementieren.
Die Verwendung dieses Plug-Ins ist sehr einfach und bequem. Zunächst müssen Sie die entsprechende JS -Datei in die Seite einführen, wie unten gezeigt.
<script src = "~/content/jQuerytools/printhis/printhis.js"> </script>
Wir werden zwei Schaltflächen oben auf der Seite hinzufügen, z. B. Druck- und Exportvorgänge, der Code ist wie folgt
<div> <a href = "#" onclick = "javaScript: preview ();"> <img src = "~/content/bilder/print.gif"/> <br/> print Preview </a> <a href = "#" Onclick = "javaScript: Saveas (); als </a> </div>
Anschließend müssen wir auch eine DIV deklarieren, um den angezeigten Webseiteninhalt zu platzieren, der zum Drucken geeignet ist.
Der von uns ausdruckene Verarbeitungscode ist ebenfalls sehr einfach. Drucken Sie die Ebene einfach direkt aus. Sie können sehen, dass der folgende Verwendungscode sehr einfach ist.
//Print preview function Preview() { $("#printContent").printThis({ debug: false, importCSS: true, importStyle: true, printContainer: true, loadCSS: "/Content/Themes/Default/style.css", pageTitle: "Notice Announcement", removeInline: false, printDelay: 333, header: null, Formvalues: true}); };Nach dem Drucken wird ein Dialogfeld für Druckvorschau in IE und Chrome angezeigt, um zu bestätigen, ob sie gedruckt werden sollen.
3. Speichern Sie den Seiteninhalt
Um die Geschäftsabwicklung zu erleichtern, können wir den Benutzern im Allgemeinen einen Betrieb zum Exportieren von gedruckten Inhalten zur Verfügung stellen. Der unten angegebene Code soll den gedruckten Inhalt in Word für Benutzer und andere Zwecke exportieren.
Funktion Saveas () {var id = $ ('#id2'). val (); window.open ('/Information/ExportwordbyId? id =' + id); }Die obige Operation ruft hauptsächlich die MVC -Controller -Methode für die Verarbeitung auf, übergeben eine ID, um den Inhalt zu extrahieren, und generieren dann den erforderlichen Word -Inhalt.
Im Hintergrund verwenden wir hauptsächlich die apose.word -Steuerung, um Vorlagendokumente zu generieren.
Wir können einige Lesezeicheninformationen im Lesezeichen definieren oder anzeigen, wie in der folgenden Abbildung gezeigt.
Auf diese Weise können wir Informationen erhalten und diese Wortvorlage im Code angeben.
InformationInfo info = Bllfactory <Finds> .Instance.FindbyId (ID); if (info! String templateFile = server.mappath (Vorlage); ASSON.Words.Document doc = new ASSON.Words.document (TemplateFile);
Der Inhalt der Wortvorlage kann mit Text ersetzt werden, wie unten gezeigt.
Setbookmark (ref doc, "content", info.content);
Sie können auch die Lesezeichen -Lesezeichenmethode verwenden, um sie abzufragen und zu ersetzen, wie im folgenden Code gezeigt.
ASSONS.Words.Bookmark Lesezeichen = doc.Range.bookmarks [Titel]; if (bookmark! = null) {bookmark.text = value; }Dies erfordert eine besondere Behandlung für den Haupt -HTML -Inhalt. Im Allgemeinen ist es erforderlich, Inhalte mit einer dedizierten Methode zum Einfügen von HTML zu schreiben, ansonsten wird der HTML -Code angezeigt. Der mit einer dedizierte HTML -Methode geschriebene Inhalt unterscheidet sich im Grunde nicht von dem, was wir auf der Webseite sehen. Wie im folgenden Code gezeigt.
DocumentBuilder Builder = New DocumentBuilder (DOC); ASSONS.Words.Bookmark Lesezeichen = doc.range.bookmarks ["Inhalt"]; if (bookmark! = null) {builder.MovetObookmark (bookmark.name); Builder.inSerthtml (info.content); }Die gesamte Methode zum Importieren von Wortdokumenten besteht darin, die Integration dieser Inhalte zu verwenden, um die Erzeugung eines Standarddokuments zu erreichen. Diese Art von Geschäftsdokument ist eine feste Vorlage, daher ist es sehr geeignet, im tatsächlichen Geschäft zu verwenden. Es hat eine bessere Plastizität und Ästhetik als HTML -Dateien oder Dokumente, die automatisch mit anderen Methoden generiert werden.
Der gesamte Code ist unten angezeigt.
public fileStreamResult ExportwordbyId (String -ID) {if (string.isnullorEmpty (id)) return null; InformationInfo info = Bllfactory <Finds> .Instance.FindbyId (ID); if (info! String templateFile = server.mappath (Vorlage); ASSON.Words.Document doc = new ASSON.Words.document (TemplateFile); #region Verwenden Sie Text, um // Dictionary <String, String> dictSource = New Dictionary <String, String> () zu ersetzen; //dictSource.add("Title ", info.title); //dictSource.add("Content ", info.content); //dictSource.add("Editor ", info.editor); //dictSource.add("Edittime ", info.edittime.toString ()); //dictSource.add("suubType ", info.subype); // foreach (String -Name in dictSource.keys) // {// doc.range.replace (Name, dictSource [Name], true, true); //} #endregion // setbookmark ersetzen (ref doc, "title", info.title); Setbookmark (ref doc, "editor", info.editor); Setbookmark (ref doc, "edittime", info.edittime.tostring ()); Setbookmark (ref doc, "subtyp", info.subype); // setbookmark (ref doc, "content", info.content); // Für HTML -Inhalte müssen Sie DocumentBuilder Builder = New DocumentBuilder (DOC) schreiben. ASSONS.Words.Bookmark Lesezeichen = doc.range.bookmarks ["Inhalt"]; if (bookmark! = null) {builder.MovetObookmark (bookmark.name); Builder.inSerthtml (info.content); } doc.save (System.web.httpcontext.current.Response, info.title, asspose.words.contentDisposition.Attachment, asspsis.words.saving.SaveOpions.CreateSaveOptions (ASSONSWORDS.SAVEFORMAT.DOC)); HttPresponseBase response = ControllerConText.httpcontext.Response; response.flush (); Antwort.end (); Neue FileStreamResult zurückgeben (Response.outputStream, "Anwendung/MS-Wort"); } return null; } private void setbookmark (ref asspose.words.document doc, String -Titel, String -Wert) {ASSOSE.Words.Bookmark bookmark = doc.range.bookmarks [Titel]; if (bookmark! = null) {bookmark.text = value; }}Das endgültige exportierte Word -Dokument ist der vorliegende spezifische Dokumentinhalt, und die Wortvorschattungsschnittstelle ist unten angezeigt.
Die oben genannte Zusammenfassung der Erfahrung des Bootstrap -Metronik -Entwicklungsrahmens basiert auf dem Ihnen vorgestellten Bootstrap -Metronikum [9], um die Druckvorschau und das Speichern von Webseiteninhalten zu realisieren. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie weitere Informationen wissen möchten, achten Sie bitte auf die Website wulin.com!