本文內容
- 必要條件
- 演示 ASP.NET 用 FlexPaper 在頁面上顯示 PDF 文件
- 軟件環境
- 解決方案結構
- 簡單顯示 SWF 文件
- 上傳並顯示 PDF 文件
- 常見問題
- 參考資料
其實，雖說是顯示 PDF 文件，但只是將 PDF 文件轉換成 SWF，再用 Adobe Flash 插件播放。
另外，如果是 Word 文檔，那么客戶可以先利用 Office 插件或其他三方工具將 Word 文檔轉換成 PDF，再上傳，也可以利用 Office COM 組件編寫代碼，將客戶上傳的 Word 文檔直接轉換成 PDF 文件。網上有很多這樣的資料。
必要條件
演示 ASP.NET 用 FlexPaper 在頁面上顯示 PDF 文件
軟件環境
- VS 2010 framework 4.0
- Windows 7 旗艦版
解決方案結構
- FlexPaper.PDFViewer
- SaveAsPDFandXPS.exe
- swftools-2013-02-19
- FlexPaper 目錄。FlexPaper 必需。
- SWFTools 目錄。SWFTools 工具，將 PDF 轉換成 SWF。
- TestSWF 目錄。上傳目錄，並且是 SWFTools 工具的輸出目錄。
- SimpleViewer 頁面。簡單顯示 SWF 文件。
- PDFUploadViewer 頁面。上傳 PDF 到 Web 服務器，並顯示 PDF 文件（轉換成 SWF 的文件）。
- Viewer 頁面。上傳后，顯示指定文件的頁面。
簡單顯示 SWF 文件
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="FlexPaper/js/jquery.js" type="text/javascript"></script>
<script src="FlexPaper/js/flexpaper_flash.js" type="text/javascript"></script>
<script runat="server">
public string FileURL
{
get;
set;
}
protected void Page_Load(object sender, EventArgs e)
{
FileURL = "Paper.swf";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="position: absolute; left: 20px; top: 20px;">
<a id="viewerPlaceHolder" style="width: 600px; height: 500px; 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>
</form>
</body>
</html>
Paper.swf 是官方給的文件，運行結果如下圖所示：
上傳並顯示 PDF 文件
前台代碼，如下所示：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PDFUploadViewer.aspx.cs"
Inherits="FlexPaper.PDFViewer.PDFUploadViewer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="margin: 50px auto; border: #e3e3e3 1px solid; height: 300px; width: 350px;
background-color: #8ABAE3; padding: 20px 20px 20px 20px;">
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<br />
<asp:Button ID="Btn_Upload" runat="server" Text="上傳" OnClick="Btn_Upload_Click" />
<br />
<br />
選擇列表框中的文件，查看:
<br />
<asp:ListBox ID="ListBox1" runat="server" Height="205px" Width="290px"></asp:ListBox>
<asp:Button ID="Btn_Viewer" runat="server" Text="查看" OnClick="Btn_Viewer_Click" />
<br />
<br />
</div>
</form>
</body>
</html>
后台代碼，如下所示：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Diagnostics;
namespace FlexPaper.PDFViewer
{
public partial class PDFUploadViewer : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// 上傳 PDF，並轉換成 SWF
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Btn_Upload_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
try
{
string fileName = FileUpload1.FileName;
string fileExtention = FileUpload1.FileName.Substring(fileName.LastIndexOf(".") + 1);
string filePath = HttpContext.Current.Server.MapPath("~/TestSWF\\") + fileName;
FileUpload1.SaveAs(filePath);
Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('上傳成功')</script>");
//切記，使用pdf2swf.exe 打開的文件名之間不能有空格，否則會失敗
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" + @"""";
//@"""" 四個雙引號得到一個雙引號，如果你所存放的文件所在文件夾名有空格的話，要在文件名的路徑前后加上雙引號，才能夠成功
// -t 源文件的路徑
// -s 參數化（也就是為pdf2swf.exe 執行添加一些窗外的參數(可省略)）
string argsStr = " -t " + sourcePath + " -s flashversion=9 -o " + targetPath;
ExcutedCmd(cmdStr, argsStr);
ListBox1.Items.Add(new ListItem(fileName.Substring(0, fileName.LastIndexOf(".")) +
".swf", fileName.Substring(0, fileName.LastIndexOf(".")) + ".swf"));
}
catch
{
}
}
}
/// <summary>
/// 轉換成 SWF 文件
/// </summary>
/// <param name="cmd">命令</param>
/// <param name="args">命令參數</param>
private static void ExcutedCmd(string cmd, string args)
{
using (Process p = new Process())
{
ProcessStartInfo psi = new ProcessStartInfo(cmd, args.Replace("\"", ""));
p.StartInfo = psi;
p.Start();
p.WaitForExit();
}
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Btn_Viewer_Click(object sender, EventArgs e)
{
string url = "Viewer.aspx?id=" + HttpUtility.HtmlEncode(ListBox1.SelectedValue);
string script = @"
<script>window.open('" + url +
"','newwindow','height=600,width=700,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=yes,location=no, status=no');</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "", script);
}
}
}
上傳 PDF 文檔，並在后台轉換成 SWF 文件，以便在頁面上顯示
上傳后顯示
常見問題
- 無法顯示 Flexpaper
如果連 Flexpaper 都無法顯示，並顯示如下界面，說明你還沒安裝 Adobe Flash 插件。
- 可以顯示 Flexpaper，但無法顯示 SWF 文件
如果官方的 Paper.swf 都不能加載成功，並顯示，右上角的加載裝載狀態一直是等待狀態，如下圖：
這是由於 Flexpaper 還沒獲得 Adobe Flash 插件信任，點擊 http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html#119065 為 FlexPaper 添加信任。點擊第三個 Tab 頁“全局安全設置（Global Security Settings ）”，如下圖所示：
添加信任的 SWF 文件或其目錄。此時就可以正常實現。
- 官方的 SWF 可以顯示，但不能加載顯示其他或自己的
這可能是 .swf 文件的版本問題。可以運行 SWFTools 圖形工具，嘗試把 PDF 轉換為 SWF，用程序加載顯示，看看什么命令行參數好使。
參考資料
