Experience summary of Bootstrap development framework based on Metronic (9)--print preview and save operation for Web page content

In the previous series of articles related to the "Bootstrap development Framework", which basically covered the main aspects of my bootstrap framework of the content, overall basically reached a stable state, With the passage of time can introduce some better updated content to perfect, this article continues this series, mainly describes how to achieve the Web page content of the print preview and save operations.

1, the Web page printing problems

Before that, I generally use the more useful LODOP to perform the operation of the printing, this before I have a lot of articles have involved, this control is an ActiveX control, need to download after installation can be printed on the page in the typesetting involves, preview, printing and other operations, or very convenient for a control, Therefore all is suitable for the ordinary content printing, the document set dozen and so on operation.

However, with the browser technology update, this plugin in Chrome or Firefox seems to be unsupported, basically abandoned the way the plug-in processing. For example, if I need to print the contents of the dialog box on the page, as shown below.

If you follow the normal use of LODOP, then you will be prompted by Chrome browser, and this no matter you re-download the installation, update the LODOP control, will continue this error message.

This is in a "Lodop page General tip" not installed "or" Please upgrade "the possible reasons, as well as" LODOP users should be the Google browser disable plugin technology treatment "is explained, so we need to take a way to deal with this page printing and so on.

For the alternative, here is the topic of this article, I have always liked to find some of the better way to achieve the function I need, so I found the Printthis plug-in (https://github.com/jasonday/ Printthis) and Jquery-print-preview-plugin (Https://github.com/etimbo/jquery-print-preview-plugin), Compare the two I prefer the first simple and convenient use.

2, the use of printthis print plug-in

With the above problem, we introduce a new way of printing, that is, jquery plug-ins to achieve the page content we need to print operations.

The use of this plugin is very simple and convenient, the first need to introduce the corresponding JS file in the page, as shown below.

<src= "~/content/jquerytools/printthis/printthis.js"></  Script>

We add two more buttons at the top of the page, such as print and export operations, as shown in the code below

<Divclass= "Toolbar"> <ahref="#"onclick= "Javascript:preview ();"><imgalt= "Print Preview"src= "~/content/images/print.gif" /><BR/>Print Preview</a> <ahref="#"onclick= "Javascript:saveas ();"><imgalt= "Save As"src= "~/content/images/saveas.gif" /><BR/>Save As</a>         </Div>

Then we also need to declare a DIV used to place the content of the Web page that is displayed, so that it is also convenient for printing to call it.

We print the processing code is also very simple, is directly to the layer to print processing, you can see the following code is very easy to use.

        //Print Preview        functionPreview () {$ ("#printContent"). Printthis ({debug:false, Importcss:true, Importstyle:true, Printcontainer:true, Loadcss:"/content/themes/default/style.css", PageTitle:"Notification Announcement", Removeinline:false, Printdelay:333, Header:NULL, Formvalues:true            }); };

After printing, IE and chrome will pop up a print Preview dialog box to confirm the print operation.

3, the content of the page save operation

Sometimes, in order to facilitate business processing, we generally can also provide users with an export of printed content operations, such as the following code is to export the printed content into Word for user processing and other uses.

        function SaveAs () {            var id = $ (' #ID2 '). Val ();            window.open ('/information/exportwordbyid?id=' + ID);        }

The above operation, the main is to call the MVC controller method for processing, an ID can be extracted from the content, and then it generates the required word content.

Backstage here we mainly use the Apose.word control to make the template of the document generation, specifically, I have described the use of the article "using the Aspose.word control to implement Word document Operation", " Use Aspose.word controls and Aspose.cell controls to implement a templated export of Word documents and Excel documents.

Where we can define or view some of the bookmark's information, as shown in the bookmark.

So we can get the information and specify the Word template in the code.

            Informationinfo info = bllfactory<information>. Instance.findbyid (ID);             if NULL             {                string"~/content/template/Policy Law template. doc";                 string templatefile = Server.MapPath (template);                 New Aspose.Words.Document (TemplateFile);

The contents of the Word template can be replaced with text as follows.

SetBookmark (ref"Content", info.) Content);

You can also use bookmark bookmarks to query for replacements, as shown in the following code.

            Aspose.Words.Bookmark Bookmark = doc. Range.bookmarks[title];             if NULL )            {                = value;            }

For the main HTML content, this needs special treatment, generally need to use the dedicated way to insert HTML to write content, otherwise the HTML code is displayed, the use of special HTML methods written to the content, and we see on the Web page of the basic no difference. As shown in the following code.

                New Documentbuilder (DOC);                 = Doc. range.bookmarks["Content"];                 if NULL )                {                    Builder. MoveToBookmark (bookmark. Name);                    Builder. Inserthtml (info. Content);                

The whole way to import Word documents is to use the integration of these content to achieve a standard document generation, this business document is fixed template, so it is suitable for the actual business use, compared to the use of other automatic generation of HTML files or documents, there is better plasticity and aesthetics.

The entire code is shown below.

         PublicFilestreamresult Exportwordbyid (stringID) {if(string. IsNullOrEmpty (ID))return NULL; Informationinfo Info= bllfactory<information>.            Instance.findbyid (ID); if(Info! =NULL)            {                stringTemplate ="~/content/template/Policy and regulatory template. doc"; stringTemplateFile =Server.MapPath (template); Aspose.Words.Document Doc=NewAspose.Words.Document (templatefile); #regionReplace with text//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                //use bookmarks to replaceSetBookmark (refDoc"Title", Info.                Title); SetBookmark (refDoc"Editor", Info.                Editor); SetBookmark (refDoc"EditTime", Info.                Edittime.tostring ()); SetBookmark (refDoc"subtype", Info.                                subtype); //SetBookmark (ref doc, "Content", info.)                Content); //for HTML content, it needs to be written in inserthtml wayDocumentbuilder Builder =NewDocumentbuilder (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 (as Pose.                WORDS.SAVEFORMAT.DOC)); Httpresponsebase Response=ControllerContext.HttpContext.Response; Response.                Flush (); Response.                End (); return NewFilestreamresult (Response.outputstream,"Application/ms-word"); }            return NULL; }        Private voidSetBookmark (refAspose.Words.Document Doc,stringTitlestringvalue) {Aspose.Words.Bookmark Bookmark=Doc.            Range.bookmarks[title]; if(Bookmark! =NULL) {bookmark. Text=value; }        }

The last Word document exported is a templated document, and the word preview screen looks like this.

If you are interested, you can continue to refer to the series articles:

Metronic-based Bootstrap development Framework Experience Summary (1)-Framework Overview and Menu module processing

Experience summary of Bootstrap development framework based on Metronic (2)--The use of list paging and plug-in Jstree

Metronic-based Bootstrap development Framework Experience Summary (3)--use of drop-down list Select2 plugin

Experience summary of Bootstrap development framework based on metronic (4) extraction and utilization of--bootstrap icon

Experience summary of Bootstrap development framework based on Metronic (5)--bootstrap File upload plugin use

Experience summary of Bootstrap development framework based on metronic (6)--Processing and optimization of dialog box and prompt box

Experience summary of Bootstrap development framework based on Metronic (7)--data import, export and view processing of attachments

Experience summary of Bootstrap development framework based on metronic (8)--Introduction to the general interface of frame function

Experience summary of Bootstrap development framework based on Metronic (9)--print preview and save operation for Web page content

Experience summary of Bootstrap development framework based on Metronic (9)--print preview and save operation for Web page content