上次写过一篇博客《巧用数据流让 Word 文档在线阅读》,其原理,主要就是把Word转成Html格式,然后通过数据流读取,并显示出来!发现一个问题,Word中有图片该怎么办?我们其实经常使用这样的工具,像豆丁网、百度文库等,他们是如何实现的呢?
office文档在线预览大致有两种形式:
1)使用Microsoft的Office组件将文件直接转换为html文件(优点:代码实现最简单,工作强度最小。缺点:效果极差),也就是上篇博客的效果。
2)使用Microsoft的Office组件将文件转换为PDF格式文件,再使用插件转换为swf文件,然后flash文件通过另一个插件展示出来(优点:预览效果能接受,缺点:代码量大)。百度文库就是基于这种思路。
Pdf2swf:用于的把PDF格式文件,转换为swf文件
1、 Flexpaper的用法
我们可以查看下载的Flexpape文件夹中index.html源代码,这里不多说,直接看它的用法吧:
在前端的用法如下:
代码如下:
office文档在线预览大致有两种形式:
1)使用Microsoft的Office组件将文件直接转换为html文件(优点:代码实现最简单,工作强度最小。缺点:效果极差),也就是上篇博客的效果。
2)使用Microsoft的Office组件将文件转换为PDF格式文件,再使用插件转换为swf文件,然后flash文件通过另一个插件展示出来(优点:预览效果能接受,缺点:代码量大)。百度文库就是基于这种思路。
将office文件转换为PDF格式文件,这个功能还未实现,一直报错。这篇博客暂且讲PDF的在线阅读吧,也就是使用把PDF文档转换为swf文件,然后使用再展示出来。
Pdf2swf:用于的把PDF格式文件,转换为swf文件
Flexpaper:这是一个flash播放器,它可以播放一帧一页的flash。
1、 Flexpaper的用法
我们可以查看下载的Flexpape文件夹中index.html源代码,这里不多说,直接看它的用法吧:
在前端的用法如下:
<!--首先要引入jquery库及相关的js-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/flexpaper_flash.js"></script>
<script type="text/javascript" src="js/flexpaper_flash_debug.js"></script>
html中的代码,只需声明一个a标签即可
<div style="position: absolute; left: 20px; top: 20px;">
<a id="viewerPlaceHolder" style="width: 600px; height: 800px; display: block;"></a>
<!--设置一个隐蔽控件来得到要显示的文件的名字-->
<input type="hidden" id="file" value='<%=FileURL %>' />
<script type="text/javascript">
var fileURL = $("#file").val();
var fp = new FlexPaperViewer(
'FlexPaper/FlexPaperViewer',
'viewerPlaceHolder',
{
config: {
SwfFile: escape('TestSWF/' + fileURL),
Scale: 0.6,
ZoomTransition: 'easeOut',
ZoomTime: 0.5,
ZoomInterval: 0.2,
FitPageOnLoad: false,
FitWidthOnLoad: false,
PrintEnabled: true,
FullScreenAsMaxWindow: false,
ProgressiveLoading: false,
MinZoomSize: 0.2,
MaxZoomSize: 5,
SearchMatchAll: false,
InitViewMode: 'Portrait',
ViewModeToolsVisible: true,
ZoomToolsVisible: true,
NavToolsVisible: true,
CursorToolsVisible: true,
SearchToolsVisible: true,
localeChain: 'en_US'
}
}
);
</script>
</div>
这样一来,基本上就可以在前端显示你的Flexpaper了.
代码如下:
private static void ConvertCmd(string fileName)
{
using (Process p = new Process())
{
string cmdStr = HttpContext.Current.Server.MapPath("~/SWFTools/pdf2swf.exe");
string savePath = HttpContext.Current.Server.MapPath("~/TestSWF/");
// @"""" 相当于一个双引号,之所以要加@"""" 就是为了防止要转换的过程中,文件夹名字带有空格,导致失败
string sourcePath = @"""" + savePath + fileName + @"""";
string targetPath = @"""" + savePath + fileName.Substring(0, fileName.LastIndexOf(".")) + ".swf" + @"""";
string argsStr = " -t " + sourcePath + " -s flashversion=9 -o " + targetPath;
//调用新进程 进行转换
ProcessStartInfo psi = new ProcessStartInfo(cmdStr, argsStr);
p.StartInfo = psi;
p.Start();
p.WaitForExit();
}
}
其中,我把pdf文件存放在~/TextSWF/文件夹下,转换后的swf也是存放在同一文件夹下了。按照以上的做法,应该没什么问题,就可以做出类似于百度文库的效果了。
三、最后看一下效果:
图1-PDF上传界面
图2-转成的Flash预览效果
是不是很帅气?可惜,至今没弄成功office文档转成PDF,要不效果更完美,可以与百度文库相媲美了。革命尚未成功,继续折腾,看我下篇博客的成效吧!
工具链接地址链接:http://pan.baidu.com/s/1qWqKfnQ