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 this, I generally use the more useful LODOP to perform the printing operation, 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 is the layout of the design, 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.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201601/8867-20160121092543265-1385306461.png " Width= "726" height= "441" style= "border:0px;"/>

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.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201601/8867-20160121092529172-616069224.png " Style= "border:0px;"/>

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.

<script 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

<div class= "Toolbar" > <a href= "#" onclick= "Javascript:preview ();" ><br/> Print preview </a> <a href= "#" onclick= " Javascript:saveas (); " ><br/> Save As </a> </div>

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201601/8867-20160121093348078-613001538.png " Width= "595" height= "style=" border:0px;/>

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.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201601/8867-20160121093558218-1122789409.png " Style= "border:0px;"/>

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 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, IE and chrome will pop up a print Preview dialog box to confirm the print operation.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201601/8867-20160121094348234-1809082665.png " Width= "891" height= "726" style= "border:0px;"/>

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.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201601/8867-20160121095727406-1053270394.png " Width= "668" height= "457" style= "border:0px;"/>

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

             Informationinfo info = bllfactory<information>. Instance.findbyid (ID);            if  (info  != null)             {                 string template =   "~/content/template/Policy and Regulatory template. doc";                 string templatefile = server.mappath (template);                 aspose.words.document doc =  new aspose.words.document (templatefile); 

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

SetBookmark (ref doc, "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 (bookmark! = null) {bookmark. Text = 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.

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 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.

        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 and Regulatory template. doc";                 string templatefile = server.mappath (template);                 aspose.words.document doc = new  Aspose.Words.Document (templatefile);                  #region   Replace 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                  //replacing &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NB with bookmarksSp;         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, it needs to be written inserthtml way                 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 ();       &nBsp;         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)             {                &nbsP;bookmark. text = value;            }         }

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

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201601/8867-20160121100925656-2059920.png " Style= "border:0px;"/>

This article is from the "Wu Huacong blog" blog, make sure to keep this source http://wuhuacong.blog.51cto.com/1779896/1828737

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