Html页面与flash的加载

如下图,flash是html页面的一个插件节点。

js与flash进行交互,首先要处理好html页面和swf的加载问题。

Swf调用外部js方法,要确保js方法已存在,该条件一般都满足,因为swf加载比页面js慢。

Js访问swf的接口时,要确保swf已经加载完成,该条件则需要做特殊的处理。

如何做?

可以想到的是,只有flash插件本身才知道自己是否加载完成,所以,需要flash插件在加载完成后要主动的通知外部html页面:“我加载完啦!”,外部html页面收到这个通知后再进行后续的操作。

更复杂的情况是,页面有2次加载数据的场合:要同时保证,页面、flash、数据都加载完成后,在进行后续操作。

ExternalInterface

ExternalInterface类是实现flash外部调用的关键类,其中:

ExternalInterface.available:判断是否允许进行外部调用。

ExternalInterface.addCallback:注册外部访问flash的方法(js 2 flash)。

ExternalInterface.call:flash内部调用外部方法(flash2 js)。

关于该类的更多信息请查看帮助文档。

MyReport插件增加js访问的接口

MyReportApp.swf在加载完成后会主动调用页面的js方法onMyReportInitialized;关闭时主动调用js方法onMyReportClosed;打印时主动调用js方法onMyReportPrinted。

注册了一个loadReport方法可以让页面js进行调用。

以下是MyReportApp的flex代码

<?xmlversion="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">

<mx:Stylesource="Index.css"/>

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.events.CloseEvent;

import myreport.MyReportEvent;

import myreport.ReportEngine;

import myreport.ReportViewer;

import myreport.export.ExportEvent;

privatefunction Init():void

{

//注册关闭事件

_Report.addEventListener(CloseEvent.CLOSE, OnClose);

//注册导出事件

_Report.addEventListener(ExportEvent.EXPORT, OnExport);

//注册打印事件

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

AddExtInterface();

OnMyReportInitialized();

}

privatefunction OnClose(event:CloseEvent):void

{

//处理关闭事件

OnMyReportClosed();

}

privatefunction OnPrint(event:MyReportEvent):void

{

//处理打印事件

OnMyReportPrinted();

}

privatefunction OnExport(event:ExportEvent):void

{

varfile:FileReference;

if(event.FileType == ExportEvent.FILE_TYPE_PDF)

{

file = new FileReference();

//保存到本地,该方法要Flash player 10以上

file.save(event.Bytes, "Export1.pdf");

}

elseif(event.FileType == ExportEvent.FILE_TYPE_XLS)

{

file = new FileReference();

//保存到本地,该方法要Flash player 10以上

file.save(event.Bytes, "Export1.xls");

}

}

privatefunction AddExtInterface():void

{

if(ExternalInterface.available)

{

ExternalInterface.addCallback("loadReport", LoadReport);

}

}

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

/**

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

* (主动调用)

*/

privatefunction OnMyReportInitialized():Object

{

if(!ExternalInterface.available)

return 0;

return ExternalInterface.call("onMyReportInitialized");

}

/**

* 关闭时调用,通知外部点击了关闭按钮

* (主动调用)

*/

privatefunction OnMyReportClosed():Object

{

if(!ExternalInterface.available)

return 0;

return ExternalInterface.call("onMyReportClosed");

}

/**

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

* (主动调用)

*/

privatefunction OnMyReportPrinted():Object

{

if(!ExternalInterface.available)

return 0;

return ExternalInterface.call("onMyReportPrinted");

}

/**

* 加载报表和数据

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

*/

privatefunction LoadReport(url:String, params:Object,table:Array):void

{

_Report.Load(url, new ArrayCollection(table), params);

}

]]>

</mx:Script>

<myreport:ReportViewerid="_Report" width="100%"height="100%">

</myreport:ReportViewer>

</mx:Application>

在html页面中与MyReportApp.swf交互

MyReportEmbedDemo.html的代码,引入了swfobject.js向页面动态添加flash插件MyReportApp.swf。用jquery控制页面的加载,页面加载后调用onPageLoad方法。

<!DOCTYPEhtml 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交互:嵌入MyReport插件示例</title>

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

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

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

<script type="text/javascript">

varswfVersionStr = "11.1.0";

varxiSwfUrlStr = "playerProductInstall.swf";

varflashvars = {};

varparams = {};

params.quality = "high";

params.bgcolor = "#ffffff";

params.allowscriptaccess = "sameDomain";

params.allowScriptAccess = "always";

params.allowfullscreen = "true";

varattributes = {};

attributes.id = "MyReportApp";

attributes.name = "MyReportApp";

attributes.align = "middle";

swfobject.embedSWF("MyReportApp.swf","flashContent","955px", "600px",swfVersionStr, xiSwfUrlStr,flashvars, params,attributes);

</script>

<script type="text/javascript">

$(document).ready(function() {

onPageLoad();//该方法在myreport.js实现

});

</script>

</head>

<body>

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

<div id="flashContent">

<p>

Toview this page ensure that Adobe Flash Player version

11.1.0or greater is installed.

</p>

<script type="text/javascript">

varpageHost = ((document.location.protocol== "https:") ? "https://" : "http://");

document.write("<a href='http://www.adobe.com/go/getflashplayer'><imgsrc='"

+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif'alt='Get Adobe Flash player' /></a>" );

</script>

</div>

</body>

</html>

myreport.js的代码,关键位置加粗显示,页面加载后调用loadReport1调用加载报表方法,传入静态测试数据。

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

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

//页面加载完成时调用

function onPageLoad(){

myReportAPI = document.getElementById("MyReportApp");

loadReport1();

}

function onMyReportInitialized(){

myReportInit= true;

//以下是自定义代码

alert("MyReport初始化。");

loadReport1();

}

function onMyReportClosed() {

//以下是自定义代码

alert("MyReport关闭。");

}

function onMyReportPrinted() {

//以下是自定义代码

//alert("MyReport打印。");

}

function myReportLoad(url, params, table) {

if (!myReportAPI ||!myReportInit)

return;

myReportAPI.loadReport(url, params,table);

}

//自定义加载方法1

function loadReport1() {

if (!myReportInit)//要先判断插件是否初始化

return;

var url = "xml/ReportStyle1.xml"; //报表路径

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

var params = {};

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

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

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

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

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

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

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

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

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

vartable = new Array();

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

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

}

myReportLoad(url, params, table);

}

运行效果图

如何获取MyReport

MyReport报表引擎下载链接和相关文章索引

相关文章

MyReport专栏

Js与flash交互:在html页面中用js与MyReport插件交互的更多相关文章

  1. js父子窗口传值以及当前页面在js前台如何获得url参数

    1.首先是父页面用window.open打开窗口 <%@ Page Language="C#" AutoEventWireup="true" CodeBe ...

  2. 建立多页面vue.js项目

    介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...

  3. 前端页面js与flash交互——js获取flash对象,并传递参数

    背景介绍: 最近在搞一个项目,涉及到图片选取,裁剪,上传等,由于浏览器安全性问题,js无法获取到<input type="file">中选取的文件路径,而且对照片的裁剪 ...

  4. 使用 SWFObject.js 插入Flash

    今天学习了一下使用 SWFObject.js 这个js插入flash. 下载地址:http://code.google.com/p/swfobject/ 这个js的好处 1.IE中没有讨厌的虚框问题了 ...

  5. JS控制flash的方法

    JS控制flash的一些方法:Play() ---------------------------------------- 播放动画 StopPlay()---------------------- ...

  6. C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)

    此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...

  7. C#后台程序与HTML页面中JS方法互调

    此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...

  8. js和css文件位置对页面性能的影响

    翻译了一篇Performance上的关于页面性能的文章<DecIPhering the critical rendering path>,原文在这里.需要进一步整理和了解有关js.css等 ...

  9. 后端程序员看前端想死(二)进入页面之后js分析

    在上一篇中分析了一下以网页的组成.header中引入的乱七八糟的东西,现在进入到js中进行分析了 tuhooo啊,你是要搞前端了么? nonono,好玩,学一下 打开页面之后执行js的几种方法 直接写 ...

随机推荐

  1. java学习笔记 (2) —— Struts2类型转换、数据验证重要知识点

    1.*Action.conversion-properties 如(point=com.test.Converter.PointListConverter) 具体操作类的配置文件 2.*Action. ...

  2. Vim光标移动

    最近全面转换开发到Mac OS下,用MacVim作为IDE.记录一些Vim基本操作给自己备忘. 此次所说的都是在common-mode(c-mode,在Vim又名normal-mode,就是刚进入vi ...

  3. mongodb spring

    可参考 http://blog.csdn.net/cuiran/article/details/8287204 我修改后的代码 http://pan.baidu.com/s/1mgJYbaC

  4. 利用pyapns进行ios推送

    ios客户端的同事提供了2个证书,分别是aps_development.cer  和 pushdevelopment.p12, 我最终目的就是把这2个证书合并成1个pem证书,然后通过pyapns进行 ...

  5. Python学习笔记总结(一)对象和流程语句总结

    一.对象类型 1.数字 数字:不可变 2.字符串 字符串:不可原处修改[修改需要创建新的对象],有顺序,支持求长(len),合并(+),重复(*),索引S[0],分片(S[1:3]],成员测试(in) ...

  6. canvas个人总结

    今天做了大量的canvas作业,发现很多的步奏都是一样的,我自己就封装了一个画直线形2D图形函数.功能不是很强大. function drawModule(Json,strokeStyle,fillS ...

  7. QT中读取文本数据(txt)

    下面的代码实现读取txt文档中的数据,并且是一行一行的读取. void MainWindow::on_pushButton_clicked() { QFile file("abcd.txt& ...

  8. 多线程操作UI界面的示例 - 更新进度条

    http://blog.csdn.net/liang19890820/article/details/52186626

  9. ubuntu scp

    一.将本机文件复制到远程服务器上 scp -r /Users/Dreamover/Desktop/jsnone dreamover@localserver:/var/www/project/ /Use ...

  10. back_inserter的用法

    1,代码如下: #include<iostream> #include<list> #include<algorithm> #include<iterator ...