Cet article présente principalement les connaissances pertinentes sur la façon de mettre en œuvre l'aperçu d'impression et la sauvegarde du contenu de la page Web. Apprenons ensemble!
1. Problèmes concernant l'impression de la page Web
Avant cela, j'ai généralement utilisé le LODOP plus facile à utiliser pour effectuer des opérations d'impression. Cela a été couvert par de nombreux articles dans mes articles précédents. Ce contrôle est un contrôle ActiveX. Après avoir téléchargé et installé, vous pouvez imprimer sur la page. C'est aussi un contrôle très pratique. Par conséquent, il est très adapté à l'impression de contenu ordinaire, d'ensembles de documents et d'autres opérations.
Cependant, avec la mise à jour de la technologie du navigateur, ce plug-in semble être non pris en charge sur Chrome ou Firefox, et abandonne essentiellement la méthode de traitement de ce plug-in. Par exemple, si j'ai besoin d'imprimer le contenu dans la boîte de dialogue de la page, comme indiqué ci-dessous.
Si vous le traitez de la manière normale d'utiliser LODOP, vous obtiendrez une invite du navigateur Chrome, et ce message d'erreur se poursuivra, que vous téléchargez ou mettez à jour le contrôle Lodop.
Pour des méthodes alternatives, c'est le sujet de cet article. J'ai toujours aimé trouver de meilleures façons d'implémenter les fonctions dont j'ai besoin, alors j'ai trouvé le plug-in de printThis (https://github.com/jasonday/printthis) et jquery-print-preview-plugin (https://github.com/etimbo/jquery-print-preview-plugin). Par rapport aux deux, je préfère l'utilisation simple et pratique du premier.
2. Utilisation du plug-in d'impression print
Avec le problème ci-dessus, nous introduisons une nouvelle méthode d'impression, c'est-à-dire le plug-in jQuery pour implémenter l'opération d'impression du contenu de la page dont nous avons besoin.
L'utilisation de ce plug-in est très simple et pratique. Tout d'abord, vous devez introduire le fichier JS correspondant dans la page, comme indiqué ci-dessous.
<script src = "~ / contenu / jQueryTools / printThis / printthis.js"> </ script>
Nous ajouterons deux boutons en haut de la page, comme les opérations d'impression et d'exportation, le code est le suivant
<div> <a href = "#" onclick = "javascript: préview ();"> <img src = "~ / contenu / images / print.gif" /> <br /> imprimer prévisual </a> <a href = "#" onclick = "javascrip comme </a> </ div>
Ensuite, nous devons également déclarer un div pour placer le contenu de la page Web affichée, ce qui est pratique pour l'imprimer dessus.
Le code de traitement que nous imprimons est également très simple, il suffit d'imprimer directement le calque. Vous pouvez voir que le code d'utilisation ci-dessous est très simple.
// imprimer la fonction de prévisualisation préviewal () {$ ("# printContent"). PrintHis ({debug: false, importcss: true, importstyle: true, printContainer: true, loadcss: "/Content/themes/default/style.css", pageTle: "annoncement", enlève formValues: true}); };Une fois l'impression exécutée, une boîte de dialogue d'aperçu imprimée apparaîtra dans IE et Chrome pour confirmer s'il faut imprimer.
3. Enregistrer le contenu de la page
Parfois, afin de faciliter le traitement commercial, nous pouvons généralement fournir aux utilisateurs une opération pour exporter du contenu imprimé. Le code indiqué ci-dessous consiste à exporter le contenu imprimé sur Word pour que les utilisateurs soient traités et à d'autres fins.
function saveas () {var id = $ ('# id2'). val (); window.open ('/ information / exportwordbyid? id =' + id); }L'opération ci-dessus appelle principalement la méthode du contrôleur MVC pour le traitement, passer un ID pour extraire le contenu, puis générer le contenu mot requis.
En arrière-plan, nous utilisons principalement le contrôle APOSE.Word pour générer des documents modèles.
Nous pouvons définir ou afficher certaines informations sur les signets dans le signet, comme le montre la figure ci-dessous.
De cette façon, nous pouvons obtenir des informations et spécifier ce modèle de mot dans le code.
InformationInfo info = bllfactory <Wards> .Instance.FindById (ID); if (info! = null) {String template = "~ / contenu / modèle / plate-oreille de la plate-forme.doc"; chaîne templatefile = server.mappath (modèle); Aspose.words.Document doc = new ASPOSE.Words.Document (templateFile);Le contenu du modèle de mot peut être remplacé à l'aide du texte, comme indiqué ci-dessous.
Setbookmark (ref doc, "contenu", info.Content);
Vous pouvez également utiliser la méthode de signet de signet pour interroger et la remplacer, comme indiqué dans le code suivant.
Aspose.words.bookmark bookmark = doc.range.bookmarks [titre]; if (Bookmark! = null) {Bookmark.Text = valeur; }Cela nécessite un traitement spécial pour le contenu HTML principal. Généralement, il est nécessaire d'écrire du contenu en utilisant une méthode dédiée pour insérer HTML, sinon le code HTML sera affiché. Le contenu écrit à l'aide d'une méthode HTML dédiée n'est essentiellement pas différente de ce que nous voyons sur la page Web. Comme indiqué dans le code suivant.
DocumentBuilder Builder = nouveau documentBuilder (doc); Aspose.words.bookmark bookmark = doc.range.bookmarks ["contenu"]; if (Bookmark! = null) {builder.movetobookmark (bookmark.name); builder.inserthtml (info.content); }L'ensemble de la méthode d'importation de documents de mots consiste à utiliser l'intégration de ces contenus pour réaliser la génération d'un document standard. Ce type de document commercial est un modèle fixe, il est donc très adapté à une utilisation dans les activités réelles. Il a une meilleure plasticité et une meilleure esthétique que les fichiers HTML ou les documents générés automatiquement à l'aide d'autres méthodes.
L'ensemble du code est illustré ci-dessous.
public FileStreamResult ExportwordById (String id) {if (String.isnullOrempty (id)) renvoie null; InformationInfo info = bllfactory <Wards> .Instance.FindById (ID); if (info! = null) {String template = "~ / contenu / modèle / plate-oreille de la plate-forme.doc"; chaîne templatefile = server.mappath (modèle); Aspose.words.Document doc = new ASPOSE.Words.Document (templateFile); #Region Utilisez du texte pour remplacer // dictionary <string, string> dictource = new Dictionary <String, String> (); //dictsource.add("title ", info.title); //dictsource.add("content ", info.content); //dictsource.add("editor ", info.editor); //dictsource.add("edittime ", info.edittime.toString ()); //dictsource.add("SubType ", info.subtype); // foreach (nom de chaîne dans dictsource.keys) // {// doc.range.replace (name, dictource [name], true, true); //} #EndRegion // Remplacer SetBookmark (ref Doc, "Title", info.Title); SetBookmark (Ref Doc, "Editor", info.editor); Setbookmark (ref doc, "edittime", info.edittime.toString ()); Setbookmark (ref doc, "sous-type", info.subtype); // setbookmark (ref doc, "contenu", info.Content); // Pour le contenu HTML, vous devez écrire DocumentBuilder Builder = new DocumentBuilder (DOC); Aspose.words.bookmark bookmark = doc.range.bookmarks ["contenu"]; 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.cretesaveOptions (aspose.words.saveformat.doc)); HttpResponseBase Response = ContropleConText.httpContext.Response; réponse.flush (); réponse.end (); return new FileStreamResult (réponse.outputStream, "application / ms-word"); } return null; } private void setBookmark (ref aspose.words.Document Doc, titre de chaîne, valeur de chaîne) {aspose.words.bookmark bookmark = doc.range.bookmarks [title]; if (Bookmark! = null) {Bookmark.Text = valeur; }}Le document Word Exporté final est le contenu du document spécifique à modèle, et l'interface de prévisualisation Word est indiquée ci-dessous.
Ce qui précède est le résumé de l'expérience du framework de développement métronique bootstrap basé sur le métronic bootstrap qui vous a présenté [9] pour réaliser l'aperçu de l'impression et l'enregistrement du contenu de la page Web. J'espère que ce sera utile à tout le monde. Si vous souhaitez en savoir plus d'informations, veuillez faire attention au site Web Wulin.com!