利用FlashPaper在web页面中显示PDF文件(兼容各浏览器）

发布时间：2020-12-15 17:26:35 所属栏目：百科来源：网络整理

导读：应项目需求要把PDF内嵌到网页中显示，其中有了很多办法，比如用embed/元素放入PDF文件，但是效果不理想，浏览器兼容不理想，在ie9/8（其他版本没有测试）显示会提示下载pdf文件。当然这不是我想要的效果，这种做法可以轻易地在网络上找到，我这里不就细说。

应项目需求要把PDF内嵌到网页中显示，其中有了很多办法，比如用<embed/>元素放入PDF文件，但是效果不理想，浏览器兼容不理想，在ie9/8（其他版本没有测试）显示会提示下载pdf文件。当然这不是我想要的效果，这种做法可以轻易地在网络上找到，我这里不就细说。

下面介绍的是另一种办法，就是借用FlashPaper软件改用swf格式来实现，各大浏览器对flash的支持已经相当友好了，除非用户禁止了现在flash。

一：FlashPaper

开始使用这款软件之前，花点时间来认识它，FlashPaper是Macromedia公司旗下的一款产品，它可以将Word,Excel,Powerpoint等文档转换为swf且不会影响到原来的图片和排版,使用户可以很方便的将其插入到网页中。

同类产品还有iSpring和Print2Flash，注意的是FlashPaper不支持64为系统，如需安装在64位系统上推荐使用Print2Flash。

iSpring和Print2Flash都可以将PPT转flash。iSpring是专门的PPT转flash软件，而且它也只能转PPT。FlashPaper可以支持任何类型文件转flash文件。更重要的是FlashPaper转换出来的Flash文件是基于网页式的浏览模式，而iSpring转换出来的Flash文件能保持好对原有PPT的浏览模式，如果需要将PPT转Flash我们极力推荐iSpring软件。

二：先下载安装FlashPaper软件。

安装后界面如下

然后把我们的PDF文件直接拖放进去，然后出现该解析过程

解析完成后出现界面如下

然后点file>exit就可以生成一个.swf的文件供我们网页使用。但是这样生成的文件是带有一个Logo的。因为到这里为止，我们一直在用FlashPaper为我们提供的默认组件。该提供的默认组件包括如下图所示：

按照?FlashPaper 工作原理（利用原有的flash模版来把文档转换为swf文档）也就是说，如果我们想去掉LOGO我们就必须要自己定义?FlashPaper 组件，修改它里面的flash文件。

三，自定义?FlashPaper

我这里有一个定义好了的“DefaultViewer2.swf”，你可以直接把它复制到你的Macromedia FlashPaper 2安装目录Interface中进行替换，重启软件后就可以使用自定义过的?FlashPaper 。

当然你也可以按照自己的需要定制属于自己的?FlashPaper 。

1：利用flash的反编译软件将.swf文件转换为.fla文件。我在这里使用的是“硕思闪客精灵7.1”。

现在进入到你的Macromedia FlashPaper 2安装目录Interface中找到“DefaultViewer2.swf”文件，把它拖进到“硕思闪客精灵”软件中，待完全放进去后，点击软件的上方“导出FLA/FLEX按钮，选择你要保存的位置和flash版本后点击确定，就可得到”DefaultViewer2.fla"文件。

2：用flash软件打开反编译过来的"DefaultViewer2.fla“文件，对其进行自定义。

在第三针位置即第二个a的位置按f9调出动作窗口，在最后一个if

if (gMainView === undefined)
{
    fpLocalizations_o = new Object();
    fpLocalizations_o.en = new FlashPaper.Localization.English();
    fpLocalizations_o.de = new FlashPaper.Localization.German();
    fpLocalizations_o.fr = new FlashPaper.Localization.French();
    fpLocalizations_o.ja = new FlashPaper.Localization.Japanese();
    fpLocalizations_o.es = new FlashPaper.Localization.Spanish();
    fpLocalizations_o.it = new FlashPaper.Localization.Italian();
    fpLocalizations_o.ko = new FlashPaper.Localization.Korean();
    gMainView = new FlashPaper.MainView(this);
    gMainView.addListener(this);
} // end if

的里面加入自己定制的内容。

if (gMainView === undefined)
{
? ? fpLocalizations_o = new Object();
? ? fpLocalizations_o.en = new FlashPaper.Localization.English();
? ? fpLocalizations_o.de = new FlashPaper.Localization.German();
? ? fpLocalizations_o.fr = new FlashPaper.Localization.French();
? ? fpLocalizations_o["zh-TW"] = new FlashPaper.Localization.TChinese();
? ? fpLocalizations_o.es = new FlashPaper.Localization.Spanish();
? ? fpLocalizations_o.it = new FlashPaper.Localization.Italian();
? ? fpLocalizations_o["zh-CN"] = new FlashPaper.Localization.SChinese();
? ? gMainView = new FlashPaper.MainView(this);
? ? gMainView.addListener(this);
? ? gMainView.showUIElement("PrevNext",true);
? ? gMainView.showUIElement("Print",false);
? ? gMainView.showUIElement("Find",true);
? ? gMainView.showUIElement("Tool",false);
? ? gMainView.showUIElement("Pop",false);
? ? gMainView.showUIElement("Zoom",true);
? ? gMainView.showUIElement("Page",true);
? ? gMainView.showUIElement("Overflow",true);
} // end if

3：将自定义好的"DefaultViewer2.fla"导出为DefaultViewer2.swf"文件（命名为DefaultViewer2.swf），找到FlashPaper的安装路径FlashPaper 2Interface，覆盖下面的swf文件即可完成你的定义。

四：将pdf转换好的.swf文件插入到网页中

然后在按正常的插入.swf文件的方式插入即可。我这里测试的IE7+

<embed src="name.swf" ?type="application/x-shockwave-flash" ?width="100%" height="1000px">

五：?FlashPaper ?API

API（应用程序编程接口）是组件里预先定义的一些函数，目的是提供应用程序与开发人员访问组件，而又无须访问源码或者理解内部工作代码。为了用户能更好地对FlashPaper文档进行管理和进一步开发，FlashPaper也提供了一套API以供用户使用。用户只需要在Flash ActionScript 中调用?FlashPaper API 就可以通过相应的函数获取FlashPaper文档的相关信息和对其进行控制。

我们只需修改安装FlashPaper目录中的“DefaultViewer2.fla”即可对FlashPaper进行修改。

属性摘要

属性	说明
documentPath:String	FlashPaper文件的路径.
borderThickness:Number	边框宽度.
borderColor:String	边框颜色.
UIElements:Object	外观元素的可见性.
currentZoom:Object	默认缩放比例.
width:Number	FlashPaper文件的宽度.
height:Number	FlashPaper文件的高度.

UIElements属性的图示

事件摘要

事件	说明
onLoadStart = function(target:FlashPaper,type:String) {}	当FlashPape文件已开始下载文件时调用.
onLoadProgress = function(target:FlashPaper,type:String,bytesLoaded:Number,bytesTotal:Number) {}	每当FlashPape文件写入硬盘时调用.
onLoadComplete = function(target:FlashPaper,type:String) {}	当FlashPape文件完全下载时调用.
onLoadInit = function(target:FlashPaper,type:String) {}	当执行FlashPape文件第一帧上的动作时调用.
onLoadError = function(target:FlashPaper,errorCode:String) {}	当FlashPape文件未能加载时调用.
onDisplay = function(target:FlashPaper,type:String) {}	当FlashPape文件已经显示时调用.
onUnload = function(target:FlashPaper,type:String) {}	当卸载FlashPape文件时调用.
onPageChanged = function(target:FlashPaper,newPageNumber:Number) {}	当FlashPape文件翻页时调用.
onZoomChanged = function(target:FlashPaper,percent:Number) {}	当FlashPape文件缩放时调用.
onSelection = function(target:FlashPaper,type:String) {}	当FlashPape文件的文字被选择时调用.
onToolChanged = function(target:FlashPaper,newTool:String) {}	当更换FlashPape文件的工具时调用.
onEnableScrolling = function(target:FlashPaper,enable:Boolean) {}	当FlashPape文件滚动时调用.
onVisibleAreaChanged = function(target:FlashPaper,type:String) {}	当FlashPape文件的哭件区域变化时调用.

方法摘要

方法

说明

load(path:String) : Void

载入一个FlashPape文件.

destroy() : Void

卸载FlashPape文件.

move(x:Number,y:Number) : Void

移动FlashPape组件).

toString() : String

返回组件的名称.

getIFlashPaper() : FlashPaper.IFlashPaper

返回一个实现IFlashPaper接口的对象.
如果这个函数未定义,那么载入的SWF文件不是一个FlashPaper 2.0文件.
如果这个函数存在,但是返回null或undefined,那么载入的SWF文件是一个FlashPaper 2.0文件,但是还没有载入足够的内容去实现这个API;你必须等待载入足够的内容并且再次调用它.

getViewerType() : String

返回一个描述包含SWF文件的接口的类型的字符串.
这个Macromedia FlashPaper标准阅读器总是返回Macromedia FlashPaper Default Viewer.

getViewerVersion() : Number

返回一个标识这个文件接口版本代号整数.
返回的整数不是连续的,但是这个整数显示阅读器最近的版本,而且可以显示除错或增强的功能.
比如FlashPaper 2.01返回 218.

getCurrentPage() : Number

返回当前页数(与工具栏显示的相同).第一页是1.

setCurrentPage(pageNumber:Number) : Void

设置当前页数.需要保证此页是可显示的,但不必调节缩放.

getNumberOfPages() : Number

返回文件总页数.
注意: 也许不是所有的页都是可显示的,屈就于连接速度.

getLoadedPages() : Number

返回当前载入的页数(可显示的).
这个数值一定在0到getNumberOfPages()之间.
当

getLoadedPages() == getNumberOfPages()

时,这个文件便完全载入.

showUIElement(part:String,flag:Boolean) : Void

应藏或者显示FlashPaper文件外观的部件.区分大小写:

"PrevNext" 前一页和后一页按钮的隐藏或显示.
注意:?如果这些按钮是隐藏的,当前页文字框回失效,但不会隐藏.

"Print" 打印按钮的隐藏或显示.

"Tool"所有工具选择按钮的隐藏或显示.

"Zoom" 所有所放控制按钮的隐藏或显示.

"Find"文字搜索框的隐藏或显示.

"Pop" 在浏览器中打开文件按钮的隐藏或显示.

"Sidebar"边框 (显示文件边框)按钮的隐藏或显示.
注意:?这个变量无论这个文件是否包括边框i; 没有边框的文件从不显示边框按钮.

"Page" 当前页和总页数按钮的隐藏或显示

"Overflow" 超出菜单的隐藏或显示.
注意:这个菜单仅在工具条太狭窄而不能显示时;你不能用这个变量强制显示超出菜单.

"ZoomKeys" 这个参数不影响外观;他控制是否能用快捷键所放文件(例如,+,-,p,w).

"Brand" 品牌按钮的隐藏或显示.[注：此属性设置false也无法隐藏左上角FlashPaper的标志，估计是因为Adobe不太希望自己的标志被隐藏，既然这样，不知道这个Brand还存在于API中还有什么意义]

"Close" 关闭按钮的隐藏或显示.

traceUIElements() : Void

输出UI Elements的可见性.

printTheDocument() : Boolean

模仿用户单击答应按钮. 在调用函数前,文件必须完全载入.

getCurrentZoom() : Number

返回当前缩放水平.
注意: 缩放水平总是返回一个数值r;不会返回页面宽度.

setCurrentZoom(percent:Object) : Void

设置当前缩放水平.你可以传入一个数值指示所放百分比 (例如,100表示100%)..你也可以传入一个字符串 "width"适合页面宽度,或者传入字符串 "page"适合到页.

setSize(w:Number,h:Number) : Boolean

设置组件的显示排列,单位是象素.
如果成功设置则返回true,不成功则返回false.

goToLinkTarget(linktarget:String,window:Object) : Void

触发锚点或URL连接请求.
如果传入的字符串是锚点名称:foo,当前视图会移动到那个锚点.window参数会被忽视.如果foo不是一个有效的锚点名称,则不会执行动作.对于其它的字符串,会执行getURL(linktarget,window) (想了解更多的信息,请见ActionScript文档).

enableScrolling(flag:Boolean) : Boolean

阻止用户滚动文件.当滚动被禁止时:

滚动条不可用,但是可见.
滚动按钮不可用.
使用鼠标滚轮滚动不可用.

getCurrentTool() : String

返回当前活动的工具.如果没有活动的工具,则返回空字符串.以下是现在支持的值:

"" (没有工具)
"pan" (手形工具)
"select" (文字选择工具)

setCurrentTool(tool:String) : Boolean

设置活动工具.如果参数错误或者该工具不可用则返回false.以下是现在支持的值:

"" (没有工具)
"pan" (手形工具)
"select" (文字选择工具)

getTextSelectionRange() : FlashPaper.SelectionRange

返回一个描述当前选择文字的对象.如果没有选择文字,则返回null.
注意:与getVisibleArea()返回的对象不同,这个函数总是返回一个FlashPaper.SelectionRange,这是一个明确定义的对象,你可以检查,分解或者构造一个新的对象.

setTextSelectionRange(sel:FlashPaper.SelectionRange,skipBroadcast:Boolean) : Void

选择特定的文字.你可以传入null,从而取消选定所有的文字.无效的范围(没有页面)会被省略(它允许你设定范围从0到一个很大的数,例如999999,从而选定所有文档).如果skipBroadcast是false (或未定义),会广播onVisibleAreaChanged(). 如果skipBroadcast是true,则不会广播onVisibleAreaChanged().
注意:与getVisibleArea()返回的对象不同,分解或者构造一个新的对象.

getSelectedText() : String

以Unicode编码的字符串返回选择的文字.如果每有被选择的文字,会返回空字符串.

getSidebarWidth() : Number

返回其他按钮的宽度.
没有边框的文件会返回0.

setSidebarWidth(w:Number) : Void

设置其他按钮的宽度.
传入0从而完全隐藏其他按钮.
没有边框的文件会忽视调用.

getFindText() : String

以Unicode编码的字符串返回查找的文字.

setFindText(s:String) : Void

设置文字查找框的文字.
这个函数不会执行查找操作或改变当前选择.

findNext() : Boolean

查找文字查找框中输入的文字.
从当前选择文字的后面开始查找.
要从文档的开头查找,请先调用setSelectionRange(null).
如果找到了文字,调用getTextSelectionRange()返回详细的范围.

getVisibleArea() : Object

返回描述文档当前可见区域的对象.返回的对象有如下作用:

传入setVisibleArea().
这个可以用来在不同的计算机上观看同一文档,而且可以保持同步.

与先前getVisibleArea()返回的对象进行比较,测试可见区域是否改变.

返回的对象应该被认为是封闭的数据结构.不要试图分解返回的对象,因为在将来的版本中内容的格式可能不同.
这个对象唯一不变的方法是:

function equals(that:Object):Boolean;

我们可以用它比较两个可见区域是否相同.

setVisibleArea(area:Object,skipBroadcast:Boolean) : Void

调节当前可见的页/缩放/滚动从而匹配给定的区域对象.
如果skipBroadcast是false (或未定义),会广播onVisibleAreaChanged().如果skipBroadcast是true,则不会广播onVisibleAreaChanged().
传入的对象必须是先前由getVisibleArea返回的对象.
不要试图创建你自己的对象,因为在将来的版本中内容的格式可能不同.

五：参考文献

调用FlashPaper API控制FlashPaper文档界面

六：下载

本文用到的软件工具和文件下载

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!