利用FlashPaper在web页面中显示PDF文件(兼容各浏览器)
2015-02-07 10:57
441 查看
应项目需求要把PDF内嵌到网页中显示,其中有了很多办法,比如用<embed/>元素放入PDF文件,但是效果不理想,浏览器兼容不理想,在ie9/8(其他版本没有测试)显示会提示下载pdf文件。当然这不是我想要的效果,这种做法可以轻易地在网络上找到,我这里不就细说。
下面介绍的是另一种办法,就是借用FlashPaper软件改用swf格式来实现,各大浏览器对flash的支持已经相当友好了,除非用户禁止了现在flash。
同类产品还有iSpring和Print2Flash,注意的是FlashPaper不支持64为系统,如需安装在64位系统上推荐使用Print2Flash。
iSpring和Print2Flash都可以将PPT转flash。iSpring是专门的PPT转flash软件,而且它也只能转PPT。FlashPaper可以支持任何类型文件转flash文件。更重要的是FlashPaper转换出来的Flash文件是基于网页式的浏览模式,而iSpring转换出来的Flash文件能保持好对原有PPT的浏览模式,如果需要将PPT转Flash我们极力推荐iSpring软件。
然后把我们的PDF文件直接拖放进去,然后出现该解析过程
解析完成后出现界面如下
然后点file>exit就可以生成一个.swf的文件供我们网页使用。但是这样生成的文件 是带有一个Logo的。因为到这里为止,我们一直在用FlashPaper为我们提供的默认组件。该提供的默认组件包括如下图所示:
按照 FlashPaper 工作原理(利用原有的flash模版来把文档转换为swf文档)也就是说,如果我们想去掉LOGO我们就必须要自己定义 FlashPaper 组件,修改它里面的flash文件。
。
当然你也可以按照自己的需要定制属于自己的 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
的里面加入自己定制的内容。
3:将自定义好的"DefaultViewer2.fla"导出为DefaultViewer2.swf"文件(命名为DefaultViewer2.swf),找到FlashPaper的安装路径FlashPaper 2\Interface,覆盖下面的swf文件即可完成你的定义。
API 就可以通过相应的函数获取FlashPaper文档的相关信息和对其进行控制。
我们只需修改安装FlashPaper目录中的“DefaultViewer2.fla”即可对FlashPaper进行修改。
属性摘要
UIElements属性的图示
事件摘要
方法摘要
下面介绍的是另一种办法,就是借用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 2\Interface,覆盖下面的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 中调用 FlashPaperAPI 就可以通过相应的函数获取FlashPaper文档的相关信息和对其进行控制。
我们只需修改安装FlashPaper目录中的“DefaultViewer2.fla”即可对FlashPaper进行修改。
属性摘要
属性 | 说明 |
documentPath:String | FlashPaper文件的路径. |
borderThickness:Number | 边框宽度. |
borderColor:String | 边框颜色. |
UIElements:Object | 外观元素的可见性. |
currentZoom:Object | 默认缩放比例. |
width:Number | FlashPaper文件的宽度. |
height:Number | FlashPaper文件的高度. |
事件摘要
事件 | 说明 |
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, type:String, errorCode:String) {} | 当FlashPape文件未能加载时调用. |
onDisplay = function(target:FlashPaper, type:String) {} | 当FlashPape文件已经显示时调用. |
onUnload = function(target:FlashPaper, type:String) {} | 当卸载FlashPape文件时调用. |
onPageChanged = function(target:FlashPaper, type:String, newPageNumber:Number) {} | 当FlashPape文件翻页时调用. |
onZoomChanged = function(target:FlashPaper, type:String, percent:Number) {} | 当FlashPape文件缩放时调用. |
onSelection = function(target:FlashPaper, type:String) {} | 当FlashPape文件的文字被选择时调用. |
onToolChanged = function(target:FlashPaper, type:String, newTool:String) {} | 当更换FlashPape文件的工具时调用. |
onEnableScrolling = function(target:FlashPaper, type:String, 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()返回的对象不同,这个函数总是返回一个FlashPaper.SelectionRange,这是一个明确定义的对象, 你可以检查,分解或者构造一个新的对象. |
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文档界面六:下载
本文用到的软件工具和文件下载相关文章推荐
- 利用FlashPaper在web页面中显示PDF文件(兼容各浏览器)
- Firefox 插件 JSview是一套比较实用的JS,CSS文件查看工具,很方便,很快捷地查看页面引用了哪些文件,作为Web前端开发者是一套必备的插件,由于Firefox升级过快,插件很快不兼容了,这里对插件做了一些调整,可以兼容最新Firefox浏览器(目前FireFox 21)
- net控件中数据导到Excel的格式 首先,我们了解一下excel从web页面上导出的原理。当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取它,所以把mime类型设为:application/vnd.ms-excel,当excel读取文件时会以每个cell的格式呈现数据,如果cell没有规定的格式,则excel会以默认的格式去呈现该cell的数据。这样就给我们提供了自定义数据格式的空间,当然我们必须使用excel支持的格式。下面就列出常用的一些格式: 1) 文本
- 关于在web项目中将pdf文件显示成swf文件的相关详细说明
- tomcat问题,jsp页面无法编译,web页面一片空白,log显示空指针,在tomacat的work文件夹下没有生成相应的Java文件
- WEB页面打印预览、打印 兼容所有浏览器
- Webx框架Velocity上传文件控件不同浏览器显示兼容处理
- Web中显示pdf文件
- ASP.NET 用 FlexPaper 在页面上显示 PDF 文件
- 利用JSP在Web页面中显示随机数字验证码图片
- [mobile开发碎碎念]手机页面上显示PDF文件
- SharePoint页面中显示PDF文件的问题
- Sharepoint 使用 Office Web Apps 在线浏览器查看 PDF文件
- 读取pdf并且在web页面中显示
- 在web页面中显示多页的tif文件
- Web浏览器限制此文件显示可能访问您的计算机的活动内容--解决方法
- Java平台要实现类似豆丁百度文科的文档在线阅读,总体思路是讲doc docx等文件格式利用jcom转换成pdf再用swftools转为swf。再用flexpaper组件显示swf。
- object、param标签及页面显示PDF文件的方法
- 同一页面多次使用kindEditor的上传文件——兼容大部分浏览器
- C# 输出pdf文件流在页面上显示