ASP.NET 用 FlexPaper 在页面上显示 PDF 文件

必要条件
演示 ASP.NET 用 FlexPaper 在页面上显示 PDF 文件
- 软件环境
- 解决方案结构
- 简单显示 SWF 文件
- 上传并显示 PDF 文件
常见问题
参考资料

其实，虽说是显示 PDF 文件，但只是将 PDF 文件转换成 SWF，再用 Adobe Flash 插件播放。

另外，如果是 Word 文档，那么客户可以先利用 Office 插件或其他三方工具将 Word 文档转换成 PDF，再上传，也可以利用 Office COM 组件编写代码，将客户上传的 Word 文档直接转换成 PDF 文件。网上有很多这样的资料。

必要条件

Flexpaper。用于在页面上显示 SWF。下载地址
Pdf2swf。用于将上传的 PDF 文件转换成 SWF 文件，以便在页面上显示。下载地址

演示 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 />

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <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;", "<script>alert('上传成功')</script>");~/SWFTools/pdf2swf.exe");~/TestSWF/");""" + savePath + fileName + @"""";""" + savePath + fileName.Substring(0, fileName.LastIndexOf(".")) + ".swf" + @"""";""" 四个双引号得到一个双引号，如果你所存放的文件所在文件夹名有空格的话，要在文件名的路径前后加上双引号，才能够成功  -t " + sourcePath + " -s flashversion=9 -o " + targetPath;.")) +.swf", fileName.Substring(0, fileName.LastIndexOf(".")) + ".swf"));cmd">命令</param>args">命令参数</param>\"", ""));

                    FileUpload1.SaveAs(filePath);

                    Page.ClientScript.RegisterStartupScript(this.GetType(), "

                    //切记，使用pdf2swf.exe 打开的文件名之间不能有空格，否则会失败

                    string cmdStr = HttpContext.Current.Server.MapPath("

                    string savePath = HttpContext.Current.Server.MapPath("

                    string sourcePath = @"

                    string targetPath = @"

                    //@"

                    // -t 源文件的路径

                    // -s 参数化(也就是为pdf2swf.exe 执行添加一些窗外的参数(可省略))

                    string argsStr = "

                    ExcutedCmd(cmdStr, argsStr);

                    ListBox1.Items.Add(new ListItem(fileName.Substring(0, fileName.LastIndexOf("

                catch

        /// <summary>

        /// 转换成 SWF 文件

        /// </summary>

        /// <param name="

        /// <param name="

        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 = @" + url +

                      <script>window.open('"

                                   "','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，用程序加载显示，看看什么命令行参数好使。

参考资料

http://www.swftools.org/
http://flexpaper.devaldi.com/default.jsp

下载DEMO