FlexPaper+SWFTools 實現仿百度文庫及一些小問題

  網上已有很多FlexPaper仿百度文庫的一些文章,園子裏也有很多大牛的詳細教程。

  結合這次做的例子,在這裏詳細記錄一下使用Flexpaper實現仿百度文庫的效果,及自己在跟着園子裏的教程做的時候,遇到的一些小問題。希望能給初次接觸或者遇到同樣問題的同學們提供一些小小的幫助。(描述不足之處,請大家多多見諒,畢竟是第一次在園子裏寫文章)。

1.準備工作:下載FlexPaper及PDF轉換工具pdf2swf.exe

Flexpaper下載地址:下載 (我下的是1.4.5 Flash Version (release notes))

Pdf2swf工具下載:下載  (我下的是swftools-2011-01-23-1815.exe下載後,安裝)

2.運行官方的DEMO及Flexpaper的用法

打開剛剛下載好的Flexpaper文件夾,打開裏面的例子 index.html,

(1)運行官方的例子,不能加載任何的.swf(包括例子中的swf)(如果能正常顯示的話,請跳過這一步)

運行官方例子的時起,連所帶的Paper.swf都不能加載成功,只見到右上角的圈圈一直在動,處於等待的狀態。如下圖:

這種情況,是由於Flexpaper還沒獲得Adobe Flash的信任,這時你可以前住http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html#119065 爲FlexPaper添加信任.進入網頁之後 ,點擊左邊的 Global Security Settings papel 這個選項,然後在右邊(如下圖)

爲你的例子所在的文件夾添加信任。然後你再運行官方的例子,就會發現可以運行成功啦。

(2)Flexpaper的用法

我們可以查看index.html源代碼,這裏不多說,直接說它的用法吧:

在前端的用法如下:

<!--首先要引入jquery庫及相關的js-->
2 <script type="text/javascript" src="js/jquery.js"></script>
3 <script type="text/javascript" src="js/flexpaper_flash.js"></script>
4 <script type="text/javascript" src="js/flexpaper_flash_debug.js"></script>

 html中的代碼,只需聲明一個a標籤即可

複製代碼
 <body> 
        <div style="position:absolute;left:10px;top:10px;">
            <a id="viewerPlaceHolder" style="width:660px;height:480px;display:block"></a>         
            <script type="text/javascript"> 
                var fp = new FlexPaperViewer(    
                         'FlexPaperViewer', 
                         'viewerPlaceHolder',     <!--對應於a 標籤的id-->
                         { config : {
                         SwfFile : escape('ajax.swf'),  <!--這句是關鍵: SwfFile: 指示導入的.swf的路徑-->
                         Scale : 0.6, 
                         ZoomTransition : 'easeOut',
                         ZoomTime : 0.5,
                         ZoomInterval : 0.2,
                         FitPageOnLoad : true,
                         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>
</body>
複製代碼

 基本上,這樣就可以在前端顯示你的Flexpaper了.

  (3)只能加載官方例子所帶的swf,但不能加載其他或自己的swf

  當我們想要FlexPaper加載我們自己的swf時,發現一直處於等待狀態,無法顯示,檢查swf的路徑也沒錯,但就是一直無法加載。這種情況,很有可能就是.swf文件的版本問題啦。我們運行SWFTools的圖形工具(gpdf2swf.exe)把pdf轉換爲swf,但是轉換後的swf也不能被Flexpaper正常加載,如果你確保路徑沒錯的話,那就是版本的問題啦。

我們可以查看轉換時swf的版本,我們可以點擊 Edit->Options->Viewer

可以看到它幫我們轉換爲SWF的版本有 7,8兩項,但這都是不能正常在FlexPaper中加載的,我們必須把pdf轉換爲版本爲9的swf,才能讓它在Flexpaper中顯示。那麼如何轉換爲9的呢?我自己是使用cmd命令行工具來手工轉換的.只須在命令行添加 "-s flashversion=9" 這句,就可以轉換爲9的版本啦.示例如下:

參數說明如下:

(SWFTools我的默認安裝路徑是: E:\Program Files\)

SWFTools:pdf2swf.exe工具所在的文件夾,

-t: 源文件路徑,即待轉換的pdf文件路徑。

-s: 設置參數,這裏我們設置爲 flashversion=9 ,即可以轉換爲9 的版本啦。

-o: 輸出文件的路徑,這裏我輸出到F:盤下

好了,這樣就轉換成功啦,你就可以得到一個.swf的文件,你只需拷到你下載的Demo裏,配置好路徑後,你就會發現FlexPaper可以正常加載你的swf啦.

在這裏稍微強調一個小問題文件夾名字帶有空格

對於 -t ,-o 這兩個參數,就是對於源文件路徑來輸出文件路徑的問題,如果你的文件夾的名字中,有空格的話,這樣是不能找到你的文件的。

比如說:我要轉換的pdf源文件在 E:\Program Files\SWFTools\這個文件夾下,當我這樣寫 -t E:\Program Files\SWFTools\ajax.pdf 或者是輸出文件路徑寫成這樣 - o E:\Program Files\SWFTools\ajax.swf  這樣都是不能成功的,因爲這裏面有文件夾名含有空格,這應該是cmd命令的問題(這個我也不是很懂,希望有高手能說一下),這裏你只有在路徑的前後加上又引號就能成功啦,如: -t "E:\Program Files\SWFTools\ajax.pdf" 或  -o "E:\Program Files\SWFTools\ajax.swf" 這樣就OK啦.

3. Asp.net 調用pdf2swf.exe把PDF轉換爲SWF的用法

代碼如下:

複製代碼
 1   private static void ConvertCmd(string fileName)
 2         {
 3             
 4             using (Process p = new Process())
 5             {
 6                 string cmdStr = HttpContext.Current.Server.MapPath("~/SWFTools/pdf2swf.exe");
 7                 string savePath = HttpContext.Current.Server.MapPath("~/TestSWF/");
 8                 // @"""" 相當於一個雙引號,之所以要加@"""" 就是爲了防止要轉換的過程中,文件夾名字帶有空格,導致失敗
 9                 string sourcePath = @"""" + savePath + fileName + @"""";
10                 string targetPath = @"""" + savePath + fileName.Substring(0, fileName.LastIndexOf(".")) + ".swf" + @"""";
11                 string argsStr = "  -t " + sourcePath + " -s flashversion=9 -o " + targetPath;
12                 //調用新進程 進行轉換
13                 ProcessStartInfo psi = new ProcessStartInfo(cmdStr, argsStr);
14                 p.StartInfo = psi;
15                 p.Start();
16                 p.WaitForExit();
17             }
18         }
複製代碼

  其中,我的pdf文件存放在~/TextSWF/文件夾下,轉換後的swf也是存放在同一文件夾下。

按照以上的做法,應該沒什麼問題,就可以做出類似於百度文庫的效果了。

好了,第一次寫文章,難免會有疏漏不足這處,希望各位高手不吝嗇指出與賜教.

最後附上一個簡單的小例子源碼:PDFViewer.zip

 

發佈了10 篇原創文章 · 獲贊 7 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章