码迷,mamicode.com
首页 > Web开发 > 详细

调用MyReport实现js直接打印

时间:2015-02-05 21:57:43      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:flex   myreport   报表   报表引擎   flex打印   

生成MyReport打印控件

打开Flash Builder添加一个应用,命名为MyReportPrintApp

 技术分享

封装myreport的打印方法让外部js能够访问,MyReportPrintApp.mxml代码如下:

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:myreport="myreport.*"

minWidth="800" minHeight="600" backgroundColor="0xffffff" creationComplete="Init()"

fontFamily="Simsun" layout="horizontal" paddingBottom="0" paddingLeft="0"

paddingRight="0" paddingTop="0">

<!--

该文件把MyReport打印功能打包成独立的swf应用,通过jshtml页面交互调用。

-->

<mx:Style source="Index.css"/>

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import myreport.MyReportEvent;

import myreport.ReportEngine;

  

private function Init():void

{

//注册打印事件

ReportEngine.AddEventListener(myreport.MyReportEvent.PRINT, OnPrint);

AddExtInterface();

OnMyReportInitialized();

}

 

private function OnPrint(event:MyReportEvent):void

{

//处理打印事件

OnMyReportPrinted();

}

 

private function AddExtInterface():void

{

if(ExternalInterface.available)

{

ExternalInterface.addCallback("loadAndPrint", LoadAndPrint);

}

}

//==============定义外部访问接口====================

/**

 * 加载完成时调用,通知外部初始化加载已完成

 * (主动调用)

 */ 

private function OnMyReportInitialized():Object

{

if(!ExternalInterface.available)

return 0;

return ExternalInterface.call("onMyReportInitialized");

}

 

/**

 * 打印时调用,通知外部执行了打印功能

 * (主动调用)

 */ 

private function OnMyReportPrinted():Object

{

if(!ExternalInterface.available)

return 0;

return ExternalInterface.call("onMyReportPrinted");

}

/**

 * 加载报表和数据并且打印

 * (被动调用,必须在onMyReportInitialized执行后调用)

 */ 

private function LoadAndPrint(url:String, params:Object, table:Array):void

{

ReportEngine.LoadAndPrint(url, new ArrayCollection(table), params);

}

]]>

</mx:Script>

 

</mx:Application>

 

编译生成MyReportPrintApp.swf,拷贝出来使用。

 技术分享

 

调用MyReport打印控件

MyReportPrintApp.swf嵌入到html页面,编写js调用myreport,实现直接打印。

html/js代码如下:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>js与flash交互:js直接打印</title>

    <script type="text/javascript" src="swfobject.js"></script>

    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        //一下脚本用于动态创建swf节点

        var swfVersionStr = "11.1.0";

        var xiSwfUrlStr = "playerProductInstall.swf";

        var flashvars = {};

        var params = {};

        params.quality = "high";

        //params.bgcolor = "#ffffff";//去掉背景色

        params.allowscriptaccess = "sameDomain";

        params.allowScriptAccess = "always";

        params.allowfullscreen = "true";

        var attributes = {};

        attributes.id = "MyReportPrintApp";

        attributes.name = "MyReportPrintApp";

        attributes.align = "middle";

        swfobject.embedSWF("MyReportPrintApp.swf""flashContent""10px""10px", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);

    </script>

    <script type="text/javascript">

        $(document).ready(function () {

            onPageLoad();

        });

 

        var myReportAPI; //定义MyReport接口对象

        var myReportInit = false//定义MyReport初始化变量

 

        //页面加载完成时调用

        function onPageLoad() {

            myReportAPI = document.getElementById("MyReportPrintApp");

 

        }

 

        //自定义打印方法1

        function loadAndPrint1(){

            var url = "xml/ReportStyle1.xml"//报表模板请求地址

 

            //报表参数数据,这里为了测试方便使用了静态的数据,实际使用时应该向服务端动态请求数据。

            var params = {};

            params["单据编号"] = "KA06417033944";

            params["单据日期"] = new Date();

            params["主标题"] = "销售单";

            params["公司名称"] = "XXXX贸易公司";

            params["经手人"] = "某某某";

            params["公司地址"] = "广州市天河区天河路xx号 xx大厦 xx楼";

            params["公司电话"] = "66866888";

            params["公司"] = { "地址""广州市天河区天河路xx号 xx大厦 xx楼""电话""66866888" };

 

            //报表表格数据,这里为了测试方便使用了静态的数据,实际使用时应该向服务端动态请求数据。

            var table = new Array();

            for (var i = 0; i < 25; i++) {

                table.push({ ID: i, 名称: "商品信息XXX 规格XXX 型号XXX", 数量: i + 1, 金额: (i + 1) * 10, 日期: new Date() });

            }

 

            myReportLoadAndPrint(url,params,table);

        }

 

        /**

        * 加载完成时调用,通知外部初始化加载已完成

        * (flash to js:主动调用)

        */

        function onMyReportInitialized() {

            myReportInit = true;

            //以下是自定义代码

            //alert("MyReport初始化。");

        }

 

        /**

        * 打印时调用,通知外部执行了打印功能

        * (flash to js:主动调用)

        */

        function onMyReportPrinted() {

            //以下是自定义代码

            alert("MyReport打印完成。");

        }

 

        /**

        * 加载报表和数据并且打印

        * (js to flash:被动调用,必须在onMyReportInitialized执行后调用)

        * @param url: 报表格式路径

        * @param paramList: 报表参数数据(多份数据),Array或者null

        * @param tableList: 报表表格数据(多份数据),Array或者null

        */

        function myReportLoadAndPrint(url, paramList, tableList) {

            if (!myReportAPI || !myReportInit) {

                alert("打印控件未就绪!")

                return;

            }

            myReportAPI.loadAndPrint(url, paramList, tableList);

        }

    </script>

</head>

 

<body>

<p style=" text-align:center">该示例演示在页面嵌入MyReport打印控件,使用js与flash插件进行交互,实现js直接打印</p>

 

<div style=" text-align:center"><button type="button" onclick="loadAndPrint1()">直接打印</button> </div>

 

<div id="flashContent" style="visibility: hidden">

 

</div>

</body>

</html>

 

浏览效果

 技术分享

技术分享

技术分享

 

 

 

在线效果演示

 

如何获得myreport

MyReport产品网站

 

相关文章

MyReport专栏




备注
*技术交流与合作:QQ: 791663094;Email:kong.yee@foxmail.com




调用MyReport实现js直接打印

标签:flex   myreport   报表   报表引擎   flex打印   

原文地址:http://blog.csdn.net/kong_yee/article/details/43537421

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!