快捷導(dǎo)航

基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【九】實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作

更新時(shí)間：2016年05月12日 13:52:16 作者：伍華聰

本篇文章主要介紹如何實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧

本篇文章主要介紹如何實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作的相關(guān)知識(shí)，一起學(xué)習(xí)吧！

1、Web頁(yè)面打印的問(wèn)題

在此之前，我一般使用比較好用的LODOP來(lái)執(zhí)行打印的操作，這個(gè)在我之前有很多文章都有涉及，這個(gè)控件是一個(gè)ActiveX的控件，需要下載安裝后就可以在頁(yè)面是進(jìn)行打印的排版設(shè)計(jì)，預(yù)覽，打印等操作，還是很方便的一個(gè)控件，因此都很適合普通內(nèi)容的打印，證件的套打等操作。

不過(guò)隨著瀏覽器技術(shù)的更新，這個(gè)插件在Chrome或者FireFox上好像不受支持了，基本上摒棄了這種插件的處理方式了。例如如果我在頁(yè)面上需要打印對(duì)話框里面的內(nèi)容，如下所示。

如果按正常使用LODOP的方式來(lái)進(jìn)行處理的話，那么會(huì)得到Chrome瀏覽器的提示，并且這個(gè)不管你重新下載安裝、更新LODOP控件，都會(huì)繼續(xù)這個(gè)錯(cuò)誤提示的。

對(duì)于替代方式，這里就是本篇內(nèi)容介紹的主題了，我一直喜歡尋找一些比較好的方式的方式來(lái)實(shí)現(xiàn)自己需要的功能，于是找到了PrintThis的這個(gè)插件（https://github.com/jasonday/printThis）以及jquery-print-preview-plugin（https://github.com/etimbo/jquery-print-preview-plugin），對(duì)比兩者我比較喜歡第一個(gè)的簡(jiǎn)潔方便的使用。

2、PrintThis打印插件的使用

有了上面的問(wèn)題，我們引入一個(gè)新的打印方式，也就是JQuery插件來(lái)實(shí)現(xiàn)我們所需要頁(yè)面內(nèi)容的打印操作。

這個(gè)插件的使用非常簡(jiǎn)潔方便，首先需要在頁(yè)面里面引入對(duì)應(yīng)的JS文件，如下所示。

<script src="~/Content/JQueryTools/printThis/printThis.js"></script>

我們?cè)僭陧?yè)面頂部增加兩個(gè)按鈕，如打印和導(dǎo)出操作，代碼如下所示

<div class="toolbar">
 <a href="#" onclick="javascript:Preview();"><img alt="打印預(yù)覽" src="~/Content/images/print.gif" /><br />打印預(yù)覽</a>
 <a href="#" onclick="javascript:SaveAs();"><img alt="另存為" src="~/Content/images/saveas.gif" /><br />另存為</a>     
</div>

然后我們還需要聲明一個(gè)DIV用來(lái)放置顯示的Web頁(yè)面內(nèi)容，這樣也方便對(duì)它調(diào)用進(jìn)行打印操作。

我們打印的處理代碼也很簡(jiǎn)單，就是直接對(duì)層進(jìn)行打印處理就可以了，可以看到下面的使用代碼非常簡(jiǎn)單。

//打印預(yù)覽
    function Preview() {
      $("#printContent").printThis({
        debug: false,
        importCSS: true,
        importStyle: true,
        printContainer: true,
        loadCSS: "/Content/Themes/Default/style.css",
        pageTitle: "通知公告",
        removeInline: false,
        printDelay: 333,
        header: null,
        formValues: true
      });
    };

打印執(zhí)行后，IE和Chrome都會(huì)彈出一個(gè)打印預(yù)覽對(duì)話框，確認(rèn)是否進(jìn)行打印的操作。

3、頁(yè)面內(nèi)容的保存操作

有時(shí)候，為了方便業(yè)務(wù)處理，我們一般也可以提供給用戶一個(gè)導(dǎo)出打印內(nèi)容的操作，如下所示代碼就是把打印的內(nèi)容導(dǎo)出到Word里面給用戶加工等用途。

 function SaveAs() {
      var id = $('#ID2').val();
      window.open('/Information/ExportWordById?id=' + id );
    }

上面的操作，主要就是調(diào)用了MVC的控制器方法進(jìn)行處理，傳入一個(gè)id就可以把內(nèi)容提取出來(lái)，然后把它生成所需的Word內(nèi)容即可。

這里后臺(tái)我們主要利用Apose.Word控件來(lái)進(jìn)行模板化的文檔生成。

其中我們可以在書(shū)簽里面定義或者查看一些書(shū)簽的信息，如下圖所示。

這樣我們?cè)诖a里面，就可以獲取信息并指定這個(gè)Word模板了。

 InformationInfo info = BLLFactory<Information>.Instance.FindByID(id);
      if (info != null)
      {
        string template = "~/Content/Template/政策法規(guī)模板.doc";
        string templateFile = Server.MapPath(template);
        Aspose.Words.Document doc = new Aspose.Words.Document(templateFile);

WORD模板的內(nèi)容，可以使用文本替換方式，如下所示。

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

也可以使用書(shū)簽BookMark方式查詢替換，如下代碼所示。

 Aspose.Words.Bookmark bookmark = doc.Range.Bookmarks[title];
      if (bookmark != null)
      {
        bookmark.Text = value;
      }

對(duì)于主體的HTML內(nèi)容，這需要特殊對(duì)待，一般需要使用插入HTML的專用方式進(jìn)行寫(xiě)入內(nèi)容，否則就顯示HTML代碼了，使用專用HTML方法寫(xiě)入的內(nèi)容，和我們?cè)诰W(wǎng)頁(yè)上看到的基本沒(méi)有什么差異了。如下代碼所示。

DocumentBuilder builder = new DocumentBuilder(doc);
        Aspose.Words.Bookmark bookmark = doc.Range.Bookmarks["Content"];
        if (bookmark != null)
        {
          builder.MoveToBookmark(bookmark.Name);
          builder.InsertHtml(info.Content);
        }

整個(gè)導(dǎo)入WORD文檔的方法就是利用這些內(nèi)容的整合，實(shí)現(xiàn)一個(gè)標(biāo)準(zhǔn)文檔的生成，這種業(yè)務(wù)文檔是固定模板的，因此很適合在實(shí)際業(yè)務(wù)中使用，比起使用其他方式自動(dòng)生成的HTML文件或者文檔，有更好的可塑性和美觀性。

整個(gè)代碼如下所示。

 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/政策法規(guī)模板.doc";
        string templateFile = Server.MapPath(template);
        Aspose.Words.Document doc = new Aspose.Words.Document(templateFile);
        #region 使用文本方式替換
        //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
        //使用書(shū)簽方式替換
        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);
        //對(duì)于HTML內(nèi)容，需要通過(guò)InsertHtml方式進(jìn)行寫(xiě)入
        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;
      }
    }

最后導(dǎo)出的WORD文檔就是模板化的具體文檔內(nèi)容了，WORD預(yù)覽界面如下所示。

以上所述是小編給大家介紹的基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【九】實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作的相關(guān)內(nèi)容，希望對(duì)大家有所幫助，如果大家想了解更多資訊敬請(qǐng)關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章: