本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识,一起学习吧!
1、Web页面打印的问题
在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预览,打印等操作,还是很方便的一个控件,因此都很适合普通内容的打印,证件的套打等操作。
不过随着浏览器技术的更新,这个插件在Chrome或者FireFox上好像不受支持了,基本上摒弃了这种插件的处理方式了。例如如果我在页面上需要打印对话框里面的内容,如下所示。
如果按正常使用LODOP的方式来进行处理的话,那么会得到Chrome浏览器的提示,并且这个不管你重新下载安装、更新LODOP控件,都会继续这个错误提示的。
对于替代方式,这里就是本篇内容介绍的主题了,我一直喜欢寻找一些比较好的方式的方式来实现自己需要的功能,于是找到了PrintThis的这个插件(https://github.com/jasonday/printThis)以及jquery-print-preview-plugin(https://github.com/etimbo/jquery-print-preview-plugin),对比两者我比较喜欢第一个的简洁方便的使用。
2、PrintThis打印插件的使用
有了上面的问题,我们引入一个新的打印方式,也就是JQuery插件来实现我们所需要页面内容的打印操作。
这个插件的使用非常简洁方便,首先需要在页面里面引入对应的JS文件,如下所示。
<script src="~/Content/JQueryTools/printThis/printThis.js"></script>
我们再在页面顶部增加两个按钮,如打印和导出操作,代码如下所示
<div class="toolbar"> <a href="#" onclick="javascript:Preview();"><img alt="打印预览" src="~/Content/images/print.gif" /><br />打印预览</a> <a href="#" onclick="javascript:SaveAs();"><img alt="另存为" src="~/Content/images/saveas.gif" /><br />另存为</a> </div>
然后我们还需要声明一个DIV用来放置显示的Web页面内容,这样也方便对它调用进行打印操作。
我们打印的处理代码也很简单,就是直接对层进行打印处理就可以了,可以看到下面的使用代码非常简单。
//打印预览 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 }); };
打印执行后,IE和Chrome都会弹出一个打印预览对话框,确认是否进行打印的操作。
3、页面内容的保存操作
有时候,为了方便业务处理,我们一般也可以提供给用户一个导出打印内容的操作,如下所示代码就是把打印的内容导出到Word里面给用户加工等用途。
function SaveAs() { var id = $('#ID2').val(); window.open('/Information/ExportWordById?id=' + id ); }
上面的操作,主要就是调用了MVC的控制器方法进行处理,传入一个id就可以把内容提取出来,然后把它生成所需的Word内容即可。
这里后台我们主要利用Apose.Word控件来进行模板化的文档生成。
其中我们可以在书签里面定义或者查看一些书签的信息,如下图所示。
这样我们在代码里面,就可以获取信息并指定这个Word模板了。
InformationInfo info = BLLFactory<Information>.Instance.FindByID(id); if (info != null) { string template = "~/Content/Template/政策法规模板.doc"; string templateFile = Server.MapPath(template); Aspose.Words.Document doc = new Aspose.Words.Document(templateFile);
WORD模板的内容,可以使用文本替换方式,如下所示。
SetBookmark(ref doc, "Content", info.Content);
也可以使用书签BookMark方式查询替换,如下代码所示。
Aspose.Words.Bookmark bookmark = doc.Range.Bookmarks[title]; if (bookmark != null) { bookmark.Text = value; }
对于主体的HTML内容,这需要特殊对待,一般需要使用插入HTML的专用方式进行写入内容,否则就显示HTML代码了,使用专用HTML方法写入的内容,和我们在网页上看到的基本没有什么差异了。如下代码所示。
DocumentBuilder builder = new DocumentBuilder(doc); Aspose.Words.Bookmark bookmark = doc.Range.Bookmarks["Content"]; if (bookmark != null) { builder.MoveToBookmark(bookmark.Name); builder.InsertHtml(info.Content); }
整个导入WORD文档的方法就是利用这些内容的整合,实现一个标准文档的生成,这种业务文档是固定模板的,因此很适合在实际业务中使用,比起使用其他方式自动生成的HTML文件或者文档,有更好的可塑性和美观性。
整个代码如下所示。
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/政策法规模板.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内容,需要通过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; } }
最后导出的WORD文档就是模板化的具体文档内容了,WORD预览界面如下所示。
以上所述是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作 的相关内容,希望对大家有所帮助,如果大家想了解更多资讯敬请关注小牛知识库网站!
本文向大家介绍基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理,包括了基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理的使用技巧和注意事项,需要的朋友参考一下 大家对Bootstrap框架知识了解多少 Bootstrap是一个前端的技术框架,很多平台都可以采用,JAVA/PHP/.NET都可以用来做前端界面,整合JQuer
本文向大家介绍基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用,包括了基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用的使用技巧和注意事项,需要的朋友参考一下 在上篇基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概
最后,我们要给绘图程序增加打印和打印预览功能。我们希望文档分两页打印,第一页为封面,打印文档名字。第二页输出文档内容,并在页眉上打印文档名字。虽然AppWizard已经自动生成了打印和打印预览的代码,但是许多情况下,并不能符合要求。 这是因为: 1.打印机和窗口(屏幕)显示的分辨率不同:打印机的分辨率用每英寸多少个点来描述,屏幕分辨率用单位面积的像素点来表示。对于同样的Arial字体下的一个字
问题内容: 我正在使用AJAX将表单数据发送到建立并发送html电子邮件的服务器php文件。我在服务器php文件中回显了部分数据。回显的html生成一个表,我希望用户在纸上打印。我想打开默认的浏览器打印对话框,以便用户可以打印他/她看不到的表。我不在乎是否必须打开一个新选项卡才能显示回显的内容。这有可能吗? 问题答案: 返回该html表单ajax请求,然后使用javascript打印 此代码未经测
问题内容: 我偶然发现了以下新的Java Web框架:播放 http://www.playframework.org/ http://www.playframework.org/documentation/1.0/home 如此惊人的功能列表,令我惊讶的是,我之前从未听说过它。 听起来像Java Web开发的承诺之地… 有人尝试过吗?有任何实际经验吗?您认为值得研究吗? 问题答案: 我同意杰森的观
本文向大家介绍浅析基于WEB前端页面的页面内容搜索的实现思路,包括了浅析基于WEB前端页面的页面内容搜索的实现思路的使用技巧和注意事项,需要的朋友参考一下 在网页做查询以前都是这么做的 表单获取关键字 –> 传入后端SQL语句处理 –>数据返回给前端显示 今天突然到游览器的Ctrl+F的这个功能怎么实现的,把数据一次放在页面上,然后在用JS 去匹配页面的内容。 不管怎么样,现在完成了功能,然