`
tiwson
  • 浏览: 333030 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

JS打印和报表输出

阅读更多
JS打印和报表输出2008-07-15 22:16一打印:

转自:http://hi.baidu.com/afei0211/blog/item/20523955ca8bebc2b745ae98.html

(1) 在实际应用中!特别是一些公司需要报表输出和打印!这个时候我们就会用到JS的打印和报表输出功能!当然打印很简单就是window.print();你也可以在按钮的onclick事件中写上return print()可以实现打印效果!这个时候打印你会发现打印出来的是整个页面,包裹着网站的logo和一些其他不需要的按钮!这个时候我们可以使用div控制一下。把不需要打印的东西用<div class="noPrint">不 打印的内容 </div> 然后

<style type="text/css" media="print">
    .noprint{display:none;}
    </style>

这个时候就可以实现打印时不打印其他信息的效果!


说明:
1.除去页眉页脚:通过浏览器的"页面设置"选项把其中的"页眉"和"页脚"的内容清空即可.
2.打印出背景色:通过浏览器的"工具"-"internet选项"-"高级"-"打印"-"打印背景色和图像"选中即可.

(2) 同时可以使用使用WebBrowser打印.(ie内置组件无需安装,可实现打印预览等功能)

使用方法在页面中放置如下代码:<object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0">
</object>

在按钮中调用OnClick="return userPrint()"

function userPrint()
{
    document.WebBrowser.Execwb(7,1);//打印预览
    return false;
}

调用WebBrowser进行打印等操作(参数列表)

WebBrowser.ExecWB(1,1) 打开
WebBrowser.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口
WebBrowser.ExecWB(4,1) 保存网页
WebBrowser.ExecWB(6,1) 打印
WebBrowser.ExecWB(7,1) 打印预览
WebBrowser.ExecWB(8,1) 打印页面设置
WebBrowser.ExecWB(10,1) 查看页面属性
WebBrowser.ExecWB(15,1) 好像是撤销,有待确认
WebBrowser.ExecWB(17,1) 全选
WebBrowser.ExecWB(22,1) 刷新
WebBrowser.ExecWB(45,1) 关闭窗体无提示

效果图:




如果要一个页面显示2个表格,打印时让2个分页的话可以使用div隔开2个表格在他们中间加:<div class="PageNext"></div> 样式:<style media="print" type="text/css">
.PageNext{page-break-after: always;}
</style>
二:输出到Word或Excel中(转自《灰灰虫的家》)

实现思路,用JavaScript创建word或Excel对象,然后复制页面中需要输出的内容,粘贴在Word或Excel对象的文档中去.
//输出到Word中
function Button2_onclick() {
//创建Word应用程序对象
var oWD = new ActiveXObject("Word.Application");
//向Word应用程序对象中添加一个文档对象,并取出其中的Range(0)
var oRange =oWD.documents.add().Range(0,0);
//根据HTML页面创建TextRange对象,以便定位到要打印的元素中
var sel = document.body.createTextRange();
//定位到TextRage对象中要打印的元素上,GridView1是要打印的元素的ID
sel.moveToElementText(GridView1);
//选中GridView1元素的所有HTML内容
sel.select();
//将选中的内容复制到剪切板上
sel.execCommand("Copy");
//粘贴到Word文档对象中去
oRange.Paste();
//显示Word程序和文档内容
oWD.Application.Visible = true;
//调用Word的打印程序
//oWD.application.printout();
//关闭word文档对象,参数0代表不保存文档
//oWD.application.activedocument.close(0);
//退出word程序
//oWD.application.quit();
}
//输出到Excel中
function Button3_onclick() {
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;
var sel=document.body.createTextRange();
sel.moveToElementText(GridView1);
sel.select();
sel.execCommand("Copy");
oSheet.Paste();
oXL.Visible = true;
}



总结:这种方式可以快速地将页面的内容转换到Word或Excel中,其功能是在客户端实现,减轻了服务器的压力.
这里在使用的时候浏览器会提示"是否允许对剪切板的访问",可以在IE的Internet选项中的"安全"中进行设置.
这种方式只适合在Windows平台上的转换.

三.根据己有的word或excel文件样式输出报表(转自《灰灰虫的家》)
实现思路:在服务器端建立一个Word或Excel文档,文档中加入书签,然后把要添写的内容写入标签中.
(1)创建一个Word文档,在该文档中设计好要打印的会议记录的格式,并将其保存到实例根目录下,名称为student.doc。

(2)在创建好的Word文档中的指定位置插入书签。插入书签首先选中需要替换的文本,然后选择“插入”→“书签”选项,在打开的对话框中输入书签名,并单击“添加”按钮即可。

(3)编写自定义JavaScript函数,用于将表单收集的数据导出到Word中,并进行自动打印,代码如下:
服务器端
   protected void Page_Load(object sender, EventArgs e)
    {
        string str = Request.Url.ToString();
        string s = str.Substring(0, str.LastIndexOf("/"));
        //将当前页面的父路径存入Hidden中
        this.Hidden1.Value = s + "/";
    }
客户端
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <title>无标题页</title>
<script language="javascript" type="text/javascript">
function Button1_onclick() {
//取出Hidden中的内容
var ss = document.form1.Hidden1.value;
//创建word应用程序对象
var wordapp = new ActiveXObject("word.application");
//显示word应用程序窗口
wordapp.visible=true;
//设置word文件模板的路径
var s = ss+"student.doc";
//打开要填写的模板
var worddoc = wordapp.application.documents.open(s);
var range;
//取出word中相应的书签,并把页面文本框中的内容替换进去
range = wordapp.activedocument.Bookmarks("sname").Range;
range.text = document.form1.txtName.value;
range = wordapp.activedocument.bookmarks("sage").range;
range.text = document.form1.txtAge.value;
range = wordapp.activedocument.bookmarks("sschool").range;
range.text = document.form1.txtSchool.value;
//wordapp.activedocument.printout();
//关闭word文档
wordapp.activedocument.close(0);
//关闭word应用程序
wordapp.quit();
}
</script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
    
         姓名:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
         <br />
         年龄:<asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
         <br />
         学校:<asp:TextBox ID="txtSchool" runat="server"></asp:TextBox>
         <br />
         <input id="Button1" type="button" value="ToBookMark" onclick="return Button1_onclick()" /><input runat=server id="Hidden1" name="Hidden1" type="hidden" /></div>
     </form>
</body>
</html>

分享到:
评论

相关推荐

    原生JS打印插件之jQuery.EasyPrint.js使用文档

    原生JS打印插件之jQuery.Easy...JS打印和报表输出;原生js打印插件Print.js;js控制分页打印、打印分页示例;js 打印插件;js使用window.print()实现打印功能;代码仅5kb; 自主研发的一个轻量级超简单的js打印插件。

    web打印报表控件Lodop

    Web打印报表控件Lodop是一款专为网页打印设计的组件,它提供了强大的网页打印功能,使得用户在浏览器中即可方便地完成各种复杂的打印任务。Lodop以其简单易用和高效实用的特点,在IT行业内获得了广泛的应用。下面将...

    aa.rar_html_html 报表_web 打印_报表打印

    6. **JavaScript库和框架**:有些库如Puppeteer(Node.js库)可以控制Chrome浏览器进行自动化操作,包括生成高质量的PDF打印版本。 7. **服务器端处理**:在某些情况下,服务器端处理可能会更有效,例如生成PDF文件...

    echart报表加打印

    - **第三方库**:如`printThis.js`,它可以更方便地控制打印样式和内容,包括隐藏元素、添加页眉页脚等。 5. **示例项目实践** 在这个"报表Echart加打印"项目中,开发者将ECharts图表与打印功能相结合,创建了一...

    报表打印模块

    1. 需求分析:首先,需要明确报表打印的需求,包括报表的种类、内容、格式、输出方式(如打印、PDF导出)等。 2. 数据源设计:报表的数据来源可能是数据库、文件或者API接口,需要设计合理的数据获取和处理机制。 3....

    Java实现Web报表打印功能.

    ### Java实现Web报表打印功能:基于iText组件的实践 #### 概述 在Web应用领域,打印功能一直是开发者面临的挑战之一。...通过本文的探讨,相信读者对如何在Web应用中实现报表打印有了更深入的理解和实践指南。

    hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑

    1. **打印与打印设计**:hiprint允许用户自定义打印内容,不仅仅局限于简单的页面输出,而是可以设计复杂的布局和格式。这对于企业内部的报告、发票、证书等文档的生成非常有帮助,用户可以根据自己的需求定制打印...

    Excel报表之js版 Excel报表之js版

    ### Excel报表之JS版知识点详解 #### 一、概述 在现代办公自动化环境中,Excel作为数据处理和报表制作的重要工具,被广泛应用于各行各业。对于Web应用开发者而言,能够利用前端技术(如JavaScript)来动态生成...

    WEB报表打印到PDF

    标题中的“WEB报表打印到PDF”指的是在网页中展示的报表转换为PDF格式的技术,这在数据呈现和分享中十分常见。PDF(Portable Document Format)文件格式能够保持文档的原始布局和格式,使得用户无论在何种设备或操作...

    LodopFuncs.js 和打印工具

    无论是简单的文档输出,还是复杂的报表生成,Lodop都能以简洁的API和广泛的兼容性,让打印工作变得简单易行。对于需要在网页环境中实现打印功能的项目,LodopFuncs.js无疑是一个值得考虑的优秀选择。

    js 前端打印demo

    总结来说,"js 前端打印demo"是一个帮助开发者理解和实践前端打印功能的示例,它涵盖了如何利用JavaScript和CSS实现打印优化的关键技术。通过学习和实践这个demo,我们可以提高前端项目的用户体验,特别是在需要提供...

    Lodpo6.0js打印组件

    Lodop6.0js打印组件是一款高效且功能丰富的JavaScript打印解决方案,专为网页开发者设计,以满足在浏览器环境中进行多样化的打印需求。这个组件能够帮助开发者轻松地实现在网页上进行打印预览、局部打印以及自定义...

    Silverlight教程之打印报表和图形

    在本文中,我们将深入探讨Silverlight 4.0的一个关键特性——打印报表和图形。Microsoft在PDC2009上发布的Silverlight 4 Beta版引入了许多开发者期待的新功能,其中包括对报表打印的全面支持。这使得开发人员能够...

    ReportX报表打印预览控件

    支持输入输出RPXE专用文件、XML文本、Excel文件、PDF文件 、Base64文本、HTML文件、TEXT文件,支持报表打印预览、打印设置、打印,支持各种行列操作,支持文本、下拉列表、按钮、复选、单选、日期、时间、链接、图表...

    asp.net报表打印(table方式)

    ASP.NET报表打印是Web开发中的一个重要功能,尤其在企业级应用中,用于展示和输出数据。本示例中,我们关注的是使用HTML Table元素来构建报表,并实现打印功能。Table是一种常见的方式来组织和呈现结构化数据,易于...

    pdf报表打印

    例如,Java有iText和Apache PDFBox,Python有PyPDF2和ReportLab,JavaScript有PDF.js等。这些库提供了API,可以用于生成、读取和修改PDF内容。 2. **模板设计**:PDF模板通常包含固定布局和占位符,如表格、图表和...

    网页打印 js代码

    通过JavaScript(简称JS)实现网页打印,不仅可以使用户轻松地将网页内容输出为纸质或PDF格式,还能根据需求定制打印样式,排除不必要的元素,从而提高打印效率和质量。本文将深入探讨如何利用JavaScript实现网页...

    报表工具FineReport中如何把报表放到网页中显示

    如果需要调用FineReport内部的JavaScript方法(例如打印功能),可以通过`&lt;iframe&gt;`获取报表对象,然后调用相应的方法。具体的实现细节可以在FineReport的官方文档中找到。 #### 五、总结 本文详细介绍了如何将...

    ASP报表设计源代码

    Cell 插件用于开发B/S结构程序,使用Asp, Asp.net, Jsp, VbScript, JavaScript等语言开发,可以在浏览器中直接打印报表(非IE打印),带有国际化数字签名,让用户使用更方便,更安全。 · 具备Cell组件的所有特色...

Global site tag (gtag.js) - Google Analytics