在前面介紹了很多篇相關(guān)的《Bootstrap開發(fā)框架》的系列文章，這些內(nèi)容基本上覆蓋到了我這個(gè)Bootstrap框架的各個(gè)主要方面的內(nèi)容，總體來說基本達(dá)到了一個(gè)穩(wěn)定的狀態(tài)，隨著時(shí)間的推移可以會(huì)引入一些更好更新的內(nèi)容進(jìn)行完善，本篇繼續(xù)這個(gè)系列，主要介紹如何實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),天水企業(yè)網(wǎng)站建設(shè),天水品牌網(wǎng)站建設(shè),網(wǎng)站定制,天水網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,天水網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

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

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

這個(gè)在一篇《Lodop頁(yè)面總提示"未安裝"或"請(qǐng)升級(jí)"的可能原因》，以及《Lodop用戶應(yīng)對(duì)谷歌瀏覽器停用Plugin技術(shù)的處理辦法》都有說明，因此我們需要另辟蹊徑來處理這個(gè)頁(yè)面打印等的處理了。

對(duì)于替代方式，這里就是本篇內(nè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打印插件的使用

有了上面的問題，我們引入一個(gè)新的打印方式，也就是JQuery插件來實(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/p_w_picpaths/print.gif" /><br />打印預(yù)覽</a>
 <a href="#" onclick="javascript:SaveAs();"><img alt="另存為" src="~/Content/p_w_picpaths/saveas.gif" /><br />另存為</a>         
</div>

然后我們還需要聲明一個(gè)DIV用來放置顯示的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)容提取出來，然后把它生成所需的Word內(nèi)容即可。

這里后臺(tái)我們主要利用Apose.Word控件來進(jìn)行模板化的文檔生成，具體可以參考一下我前面介紹過的使用方法文章《利用Aspose.Word控件實(shí)現(xiàn)Word文檔的操作》、《利用Aspose.Word控件和Aspose.Cell控件，實(shí)現(xiàn)Word文檔和Excel文檔的模板化導(dǎo)出》。

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

這樣我們?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);

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

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

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

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

                //使用書簽方式替換
                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)容，需要通過InsertHtml方式進(jìn)行寫入
                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ù)覽界面如下所示。

文章標(biāo)題：基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（9）--實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作
分享網(wǎng)址：http://chinadenli.net/article20/jpsojo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、電子商務(wù)、ChatGPT、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)