Summary of experience on Bootstrap Metronic development framework "Nine" to achieve print preview and save operation of Web page content _javascript skills

This article mainly describes how to achieve the content of the Web page print preview and save the relevant knowledge of the operation, learn together!

1, the Problem of Web page printing

Before that, I usually use the more useful LODOP to perform the printing operation, this before I have a lot of articles are involved, this control is an ActiveX control, you need to download the installation can be printed on the page is the layout of the design, preview, printing and other operations, or a very convenient control, Therefore, it is very suitable for ordinary content of the printing, identification of the operation of the set dozen.

But as the browser technology updates, the plugin seems to be unsupported in Chrome or Firefox, basically rejecting the way the plugin is handled. 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, you will get a hint from the Chrome browser and this error will continue regardless of whether you download the installation or update the LODOP control.

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

2, the use of Printthis printing plug-ins

With the above problem, we introduce a new way of printing, that is, the jquery plugin to achieve the print operation of the page content we need.

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

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

Let's add two more buttons at the top of the page, such as print and export, as shown in the following code:

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

Then we also need to declare a div to place the content of the Web page that is displayed, so that it is also easy to call for print operations.

We print the processing code is also very simple, that is, directly to the layer of the printing process, you can see the following code 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 print execution, IE and chrome will pop up a print Preview dialog box to confirm that the print operation is done.

3, the content of the page to save the operation

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

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

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

Here in the background we mainly use the Apose.word control for templated document generation.

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

So we can get the information and specify the Word template inside 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 a Word template, you can use text substitution, as shown below.

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

You can also use bookmark bookmarks to query for substitution, 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 subject's HTML content, which is typically written using a proprietary way of inserting HTML, otherwise the HTML code is displayed, and the content written using the proprietary HTML method is basically no different from what we see on the Web page. 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 consolidation of these content to implement a standard document that is fixed, so it is ideal for use in real business, and is more malleable and aesthetically pleasing than using other forms of automatically generated HTML files or documents.

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 replaces//dictionary<string with text mode, 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 with bookmarks (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 in 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.word
        S.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.Bookmar K-bookmark = doc.
      Range.bookmarks[title]; if (bookmark!= null) {bookmark.
      Text = value;  }
    }

The final exported Word document is the template specific document content, and the word preview screen looks like this.

The above is a small set to introduce the Bootstrap Metronic development framework based on the experience of "nine" to achieve the content of the Web page print preview and save the relevant content of the operation, I hope to help you, if you want to learn more information please pay attention to cloud Habitat community website!