在前面介紹了很多篇相關(guān)的《Bootstrap開發(fā)框架》的系列文章蜜徽，這些內(nèi)容基本上覆蓋到了我這個Bootstrap框架的各個主要方面的內(nèi)容徘禁，總體來說基本達到了一個穩(wěn)定的狀態(tài)，隨著時間的推移可以會引入一些更好更新的內(nèi)容進行完善，本篇繼續(xù)這個系列科汗，主要介紹如何實現(xiàn)Web頁面內(nèi)容的打印預(yù)覽和保存操作般卑。
1武鲁、Web頁面打印的問題
在此之前，我一般使用比較好用的LODOP來執(zhí)行打印的操作蝠检，這個在我之前有很多文章都有涉及沐鼠，這個控件是一個ActiveX的控件，需要下載安裝后就可以在頁面是進行打印的排版設(shè)計叹谁，預(yù)覽饲梭，打印等操作，還是很方便的一個控件焰檩，因此都很適合普通內(nèi)容的打印憔涉，證件的套打等操作。
不過隨著瀏覽器技術(shù)的更新析苫，這個插件在Chrome或者FireFox上好像不受支持了兜叨，基本上摒棄了這種插件的處理方式了。例如如果我在頁面上需要打印對話框里面的內(nèi)容衩侥，如下所示浪腐。
[圖片上傳中。顿乒。议街。（1）]
如果按正常使用LODOP的方式來進行處理的話，那么會得到Chrome瀏覽器的提示璧榄，并且這個不管你重新下載安裝特漩、更新LODOP控件吧雹，都會繼續(xù)這個錯誤提示的。
[圖片上傳中涂身。雄卷。。（2）]
這個在一篇《Lodop頁面總提示"未安裝"或"請升級"的可能原因》蛤售，以及《Lodop用戶應(yīng)對谷歌瀏覽器停用Plugin技術(shù)的處理辦法》都有說明丁鹉，因此我們需要另辟蹊徑來處理這個頁面打印等的處理了。
對于替代方式悴能，這里就是本篇內(nèi)容介紹的主題了揣钦，我一直喜歡尋找一些比較好的方式的方式來實現(xiàn)自己需要的功能，于是找到了PrintThis的這個插件（https://github.com/jasonday/printThis）以及jquery-print-preview-plugin（https://github.com/etimbo/jquery-print-preview-plugin）漠酿，對比兩者我比較喜歡第一個的簡潔方便的使用冯凹。
2、PrintThis打印插件的使用
有了上面的問題炒嘲，我們引入一個新的打印方式宇姚，也就是JQuery插件來實現(xiàn)我們所需要頁面內(nèi)容的打印操作。
這個插件的使用非常簡潔方便夫凸，首先需要在頁面里面引入對應(yīng)的JS文件浑劳，如下所示。
<script src="~/Content/JQueryTools/printThis/printThis.js"></script>

我們再在頁面頂部增加兩個按鈕夭拌，如打印和導(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>

[圖片上傳中。啼止。道逗。（3）]
然后我們還需要聲明一個DIV用來放置顯示的Web頁面內(nèi)容兵罢，這樣也方便對它調(diào)用進行打印操作献烦。
[圖片上傳中。卖词。巩那。（4）]
我們打印的處理代碼也很簡單，就是直接對層進行打印處理就可以了此蜈，可以看到下面的使用代碼非常簡單即横。
[圖片上傳中。裆赵。东囚。（5）]
//打印預(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 }); };
[圖片上傳中。战授。页藻。（6）]

打印執(zhí)行后桨嫁，IE和Chrome都會彈出一個打印預(yù)覽對話框，確認(rèn)是否進行打印的操作份帐。
[圖片上傳中璃吧。。废境。（7）]

3畜挨、頁面內(nèi)容的保存操作
有時候，為了方便業(yè)務(wù)處理噩凹，我們一般也可以提供給用戶一個導(dǎo)出打印內(nèi)容的操作巴元，如下所示代碼就是把打印的內(nèi)容導(dǎo)出到Word里面給用戶加工等用途。
function SaveAs() { var id = $('#ID2').val(); window.open('/Information/ExportWordById?id=' + id ); }

上面的操作栓始，主要就是調(diào)用了MVC的控制器方法進行處理务冕，傳入一個id就可以把內(nèi)容提取出來，然后把它生成所需的Word內(nèi)容即可幻赚。
這里后臺我們主要利用Apose.Word控件來進行模板化的文檔生成禀忆，具體可以參考一下我前面介紹過的使用方法文章《利用Aspose.Word控件實現(xiàn)Word文檔的操作》、《利用Aspose.Word控件和Aspose.Cell控件落恼，實現(xiàn)Word文檔和Excel文檔的模板化導(dǎo)出》箩退。
其中我們可以在書簽里面定義或者查看一些書簽的信息，如下圖所示佳谦。
[圖片上傳中戴涝。。钻蔑。（8）]
這樣我們在代碼里面啥刻，就可以獲取信息并指定這個Word模板了。
[圖片上傳中咪笑。可帽。。（9）]
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);
[圖片上傳中窗怒。映跟。。（10）]

WORD模板的內(nèi)容扬虚，可以使用文本替換方式努隙，如下所示。
SetBookmark(ref doc, "Content", info.Content);

也可以使用書簽BookMark方式查詢替換辜昵，如下代碼所示荸镊。
Aspose.Words.Bookmark bookmark = doc.Range.Bookmarks[title]; if (bookmark != null) { bookmark.Text = value; }

對于主體的HTML內(nèi)容，這需要特殊對待，一般需要使用插入HTML的專用方式進行寫入內(nèi)容躬存，否則就顯示HTML代碼了收厨，使用專用HTML方法寫入的內(nèi)容，和我們在網(wǎng)頁上看到的基本沒有什么差異了优构。如下代碼所示诵叁。
[圖片上傳中。钦椭。拧额。（11）]
DocumentBuilder builder = new DocumentBuilder(doc); Aspose.Words.Bookmark bookmark = doc.Range.Bookmarks["Content"]; if (bookmark != null) { builder.MoveToBookmark(bookmark.Name); builder.InsertHtml(info.Content); }
[圖片上傳中。彪腔。侥锦。（12）]

整個導(dǎo)入WORD文檔的方法就是利用這些內(nèi)容的整合，實現(xiàn)一個標(biāo)準(zhǔn)文檔的生成德挣，這種業(yè)務(wù)文檔是固定模板的恭垦，因此很適合在實際業(yè)務(wù)中使用，比起使用其他方式自動生成的HTML文件或者文檔格嗅，有更好的可塑性和美觀性番挺。
整個代碼如下所示。
[圖片上傳中屯掖。玄柏。。（13）]
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 //使用書簽方式替換 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); //對于HTML內(nèi)容贴铜，需要通過InsertHtml方式進行寫入 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; } }
[圖片上傳中粪摘。。绍坝。（14）]

最后導(dǎo)出的WORD文檔就是模板化的具體文檔內(nèi)容了徘意，WORD預(yù)覽界面如下所示。
[圖片上傳中轩褐。椎咧。。（15）]