This article mainly introduces the relevant knowledge on how to implement the printing preview and saving of web page content. Let’s learn together!
1. Problems about web page printing
Before this, I generally used the easier-to-use LODOP to perform printing operations. This was covered by many articles in my previous articles. This control is an ActiveX control. After downloading and installing, you can print on the page. It is also a very convenient control. Therefore, it is very suitable for printing ordinary content, document sets and other operations.
However, with the update of browser technology, this plug-in seems to be unsupported on Chrome or FireFox, and basically abandons the processing method of this plug-in. For example, if I need to print the contents in the dialog box on the page, as shown below.
If you process it in the normal way of using LODOP, you will get a prompt from the Chrome browser, and this error message will continue regardless of whether you download or update the LODOP control.
For alternative methods, this is the topic of this article. I have always liked to find some better ways to implement the functions I need, so I found the plug-in of PrintThis (https://github.com/jasonday/printThis) and jquery-print-preview-plugin (https://github.com/etimbo/jquery-print-preview-plugin). Compared with the two, I prefer the simple and convenient use of the first one.
2. Use of PrintThis Print plug-in
With the above problem, we introduce a new printing method, that is, the JQuery plug-in to implement the printing operation of the page content we need.
The use of this plug-in is very simple and convenient. First, you need to introduce the corresponding JS file into the page, as shown below.
<script src="~/Content/JQueryTools/printThis/printThis.js"></script>
We will add two buttons at the top of the page, such as printing and export operations, the code is as follows
<div> <a href="#" onclick="javascript:Preview();"><img src="~/Content/images/print.gif" /><br />Print preview</a> <a href="#" onclick="javascript:SaveAs();"><img src="~/Content/images/saveas.gif" /><br />Save as</a> </div>
Then we also need to declare a DIV to place the displayed web page content, which is convenient for printing on it.
The processing code we print is also very simple, just print the layer directly. You can see that the usage code below is very simple.
//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 }); };After printing is executed, a print preview dialog box will pop up in IE and Chrome to confirm whether to print.
3. Save page content
Sometimes, in order to facilitate business processing, we can generally provide users with an operation to export printed content. The code shown below is to export the printed content to Word for users to process and other purposes.
function SaveAs() { var id = $('#ID2').val(); window.open('/Information/ExportWordById?id=' + id ); }The above operation mainly calls the MVC controller method for processing, pass an id to extract the content, and then generate the required Word content.
In the background, we mainly use the Apose.Word control to generate templated documents.
We can define or view some bookmark information in the bookmark, as shown in the figure below.
In this way, we can obtain information and specify this Word template in the code.
InformationInfo info = BLLFactory<Information>.Instance.FindByID(id); if (info != null) { string template = "~/Content/Template/Policy Scale Board.doc"; string templateFile = Server.MapPath(template); Aspose.Words.Document doc = new Aspose.Words.Document(templateFile);The content of the WORD template can be replaced using text, as shown below.
SetBookmark(ref doc, "Content", info.Content);
You can also use the Bookmark BookMark method to query and replace it, as shown in the following code.
Aspose.Words.Bookmark bookmark = doc.Range.Bookmarks[title]; if (bookmark != null) { bookmark.Text = value; }This requires special treatment for the main HTML content. Generally, it is necessary to write content using a dedicated method of inserting HTML, otherwise the HTML code will be displayed. The content written using a dedicated HTML method is basically no different from what we see on the web page. As shown in the following code.
DocumentBuilder builder = new DocumentBuilder(doc); Aspose.Words.Bookmark bookmark = doc.Range.Bookmarks["Content"]; if (bookmark != null) { builder.MoveToBookmark(bookmark.Name); builder.InsertHtml(info.Content); }The entire method of importing WORD documents is to use the integration of these contents to achieve the generation of a standard document. This kind of business document is a fixed template, so it is very suitable for use in actual business. It has better plasticity and aesthetics than HTML files or documents that are automatically generated using other methods.
The entire code is shown below.
public FileStreamResult ExportWordById(string id) { if (string.IsNullOrEmpty(id)) return null; InformationInfo info = BLLFactory<Information>.Instance.FindByID(id); if (info != null) { string template = "~/Content/Template/Policy Scale Board.doc"; string templateFile = Server.MapPath(template); Aspose.Words.Document doc = new Aspose.Words.Document(templateFile); #region Use text to replace //Dictionary<string, string> dictSource = 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 (string name in dictSource.Keys) //{ // doc.Range.Replace(name, dictSource[name], true, true); //} #endregion //Replace SetBookmark(ref doc, "Title", info.Title); SetBookmark(ref doc, "Editor", info.Editor); SetBookmark(ref doc, "EditTime", info.EditTime.ToString()); SetBookmark(ref doc, "SubType", info.SubType); //SetBookmark(ref doc, "Content", info.Content); //For HTML content, you need to write DocumentBuilder 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(); return new FileStreamResult(Response.OutputStream, "application/ms-word"); } return null; } private void SetBookmark(ref Aspose.Words.Document doc, string title, string value) { Aspose.Words.Bookmark bookmark = doc.Range.Bookmarks[title]; if (bookmark != null) { bookmark.Text = value; } }The final exported WORD document is the templated specific document content, and the WORD preview interface is shown below.
The above is the summary of the experience of the BootStrap Metronic development framework based on the BootStrap Metronic introduced to you [9] to realize the printing preview and saving of web page content. I hope it will be helpful to everyone. If you want to know more information, please pay attention to the Wulin.com website!