FlexPaper 实现百度文库式应用
最近有个项目,需要实现类似百度文库的东西。在参照了博客园几个文章之后实现了这个效果。
【准备工作】
先下载FlexPaper,这个东西在网上搜下吧,版本变化快,还是现用现搜比较好。
把FlexPaper里的两个文件添加到项目中。 1:FlexPaperViewer.swf; 2:viewer.swf;
还有两个JS文件,可以放到你项目对应的JS目录中。 2:swfobject.js; 2:flexpaper_flash.js;
我是把这个功能放到了用户控件当中。控件中代码如下:
<script type="text/javascript" src="../script/swfobject/swfobject.js"></script>
<script type="text/javascript" src="../script/flexpaper_flash.js"></script>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript">
var swfVersionStr = "9.0.124";
var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {
SwfFile: "../UploadFiles/<%=getVal()%>",
Scale: 1,
ZoomTransition: "linear",
ZoomTime: "greater",
ZoomInterval: 0.1,
FitPageOnLoad: false,
FitWidthOnLoad: false,
PrintEnabled: true,
FullScreenAsMaxWindow: false,
ProgressiveLoading: false,
PrintToolsVisible: true,
ViewModeToolsVisible: true,
ZoomToolsVisible: true,
FullScreenVisible: true,
NavToolsVisible: true,
CursorToolsVisible: true,
SearchToolsVisible: false,
localeChain: "zh_CN"
};
var params = {
}
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "FlexPaperViewer";
attributes.name = "FlexPaperViewer";
swfobject.embedSWF(
"FlexPaperViewer.swf", "flashContent",
"680", "505",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
swfobject.createCSS("#flashContent", "display:none;text-align:left;");
</script>
<div id="flashContent">
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
<%--document.write("<a href='http://www.adobe.com/go/getflashplayer'>"); --%>
</script>
</div>
上面代码基本无需改动,可能你需要调整大小或者相关的界面设置,查看该插件的文档即可找到。
唯一需要改动的地方可能就是你使用的版本号,还有第11行:SwfFile:"../UploadFiles/<%=getVal()%>"
这行代码指明你要读取的文件所在位置,这个文件必须是SWF结尾的文件。
效果如图:
现在说说怎么把WORD,PPT,EXCEL变成这个swf文件。
还需要一个辅助工具,SWFTools。下载这个文件,并安装。需要用到里面的pdf2swf.exe进行PDF到SWF的转换。
先上代码。
/// <summary> /// 上传按钮 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Button1_Click(object sender, EventArgs e) { ////获取文件信息 string FileName = FileUpload1.FileName; string file_str = "文件名称:" + FileName + "<br>"; file_str = "文件类型:" + FileUpload1.PostedFile.ContentType + "<br>"; file_str = "文件长度:" + FileUpload1.PostedFile.ContentLength.ToString() + "KB<br>"; //上传文件到服务器 //string _FileName = FileUpload1.PostedFile.FileName.Substring(FileName.LastIndexOf("\\") + 1);// 取出文件名的路径(不包括文件的名称) string upload_file = Server.MapPath("./upload/") + FileName;//取出服务器虚拟路径,存储上传文件 FileUpload1.PostedFile.SaveAs(upload_file);//开始上传文件 string sWebPath = Request.MapPath(""); string sFile = sWebPath + "\\upload\\56.pdf"; string dFile = sFile.Replace(".pdf", ".swf"); if (!File.Exists(dFile)) { if (!Doc2Swf(@"C:\SWFTools\pdf2swf.exe", sFile, dFile,FileName)) { Response.Write("该文档被加密,不能转换!"); } } } private Boolean Doc2Swf(string appPath, string Source, string Des,string filename) { Process pc = new Process(); ProcessStartInfo psi = new ProcessStartInfo(appPath, Source + " " + Des); try { pc.StartInfo = psi; pc.Start(); pc.WaitForExit(); val = filename.Replace(".pdf", ".swf"); //getVal(val); } catch { return false; throw; } finally { pc.Close(); } return File.Exists(Des); }上传的文件必须是PDF格式的文件。先把后缀Replace成swf.
再通过这行代码 执行文件的实质转换Doc2Swf(@"C:\SWFTools\pdf2swf.exe",sFile,dFile,FileName)
其中需要改的也就是第一个参数,刚才装的软件路径。
以上出现的代码,是项目和我写测试时候代码结合。因为项目中有些东西又封装了,看起来没有这样清晰。
基本这样就算完成。下面还有一个情况就是,这个文件必须是PDF,那WORD,PPT,EXCEL又如何转PDF呢。
因为项目没有那么强烈说,需要直接上传WORD,PPT这样的要求,所以我也没研究用程序转换的方法。
这里我再提供一个工具,微软提供,免费使用。
SaveAsPDFandXPS 这个软件装完后,你的WORD,PPT,EXCEL就可以直接保存成PDF。
感谢大家。这篇博文,我只是留作保存,并非一个教学文章,也是希望对有需要的朋友有些帮助。
另外这个插件里面的LOGO部分,应该需要**去除,因为我也不太懂FLASH,所以没有去除LOGO版的,如果哪位朋友有,可以留言给我。