jQuery对话框小部件是否能够显示word文档或pdf?

时间:2014-01-19 19:03:32

标签: jquery jquery-ui pdf jquery-ui-dialog

jQuery对话框小部件是否能够显示word文档(或PDF) - 即,而不是纯文本或HTML?

1 个答案:

答案 0 :(得分:0)

仅供参考 - 这说明了(某种程度上)我想要完成的事情 - 对于那些面临同样问题/问题的人来说...... - 这是一个包含滚动PDF文档的弹出/对话框。

下面,我发布了一个正在做这个的工作示例的关键部分......

FWIW,我在互联网上找不到任何做这样做的例子...... - 如果有更好的方法来实现这一点 - 即没有第三方产品 - 请发布!  : - )

(正如你所看到的那样,我不需要一款名为“Lightbox”的产品 - 有人有点谦逊地建议 - 这样做)

  • (注意:在这个粗略的例子中,当用户选中复选框时,会出现一个“协议”对话框 - 其中包含一个PDF文档)*:

的index.xhtml

    <!DOCTYPE html>
    <%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="x-ua-compatible" content="IE=8" />
            <meta charset="UTF-8"/>
            <meta http-equiv="cache-control" content="no-cache"/>
            <meta http-equiv="pragma" content="no-cache" />
            <meta http-equiv="expires" content="0"/>

            <title>jquerydialogpdf</title>

            <link   type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.23.custom.css" />        
            <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>        
            <script type="text/javascript">
                /* <![CDATA[ */

                var context = "${pageContext.request.contextPath}";

                function showAgreementDialog(url)
                {
                    var okay_to_close_window = false;  //i.e., force user to use buttons in modal dialog...    
                    var tag = $("<div></div>");
                    $("<object  style='height: 100% !important; width: 100% !important;' data='" + url + "' type='application/pdf'></object>").appendTo(tag);
                    tag.dialog(
                            {
                                closeOnEscape: false,
                                width: 640,
                                height: 480,
                                resizable: true,
                                autoOpen: false,
                                modal: true,
                                title: "<h2 style='padding-bottom: .8em; color: red;text-align: center !important;text-decoration:underline !important;'>AGREEMENT</h2><h3 style='color: blue;text-align: center !important;'>I have read and acknowledged the agreement.</h3><h4 style='color: black;text-align: center !important; font-weight: normal !important; font-style: italic !important; font-size: 8pt !important;'>(Use the buttons below to indicate agreement).</h3>",
                                buttons: [
                                    {text: "I agree", click: function()
                                        {
                                            okay_to_close_window = true;
                                            $("#testdialog").attr('checked', true);
                                            $(this).dialog("close");
                                            return false;
                                        }
                                    },
                                    {text: "I do not agree", click: function()
                                        {
                                            okay_to_close_window = true;
                                            $("#testdialog").attr('checked', false);
                                            $(this).dialog("close");
                                            return false;
                                        }
                                    }],
                                beforeclose: function() {
                                    return okay_to_close_window;
                                }
                            }).dialog('open');

                    $('a.ui-dialog-titlebar-close').remove();

                }

                $(document).ready(function()
                {
                    $("#testdialog").on("click", function(e)
                    {
                        if ($("#testdialog").is(":checked") === true)
                        {
                            showAgreementDialog("data/getAgreement");
                        }
                        else
                        {
                            $("#testdialog").attr('checked', false);
                        }
                    });
                });

                /* ]]> */
            </script>

        </head>
        <body>
            <input id="context" type="hidden" value="${pageContext.request.contextPath}"/> 
            <form>
                <label for="testdialog">check to invoke agreement dialog</label>
                <input id="testdialog" type="checkbox" name="testdialog" value="false"/>      
            </form>
        </body>
    </html>

IndexController.java

        package aaa.bbb.ccc.war;

        import java.io.File;
        import java.io.IOException;
        import javax.servlet.ServletOutputStream;
        import javax.servlet.http.HttpServletRequest;
        import org.springframework.stereotype.Controller;
        import org.springframework.web.bind.annotation.RequestMapping;
        import org.springframework.web.bind.annotation.RequestMethod;
        import org.springframework.web.bind.annotation.ResponseBody;
        import javax.servlet.http.HttpServletResponse;
        import org.springframework.context.annotation.Scope;
        import javax.servlet.http.HttpSession;
        import org.apache.commons.io.FileUtils;

        @Controller
        @Scope("session")
        public class IndexController
        {

            @RequestMapping(value = "/getAgreement", method = RequestMethod.GET)
            @ResponseBody
            public void getAgreement(HttpServletResponse response, HttpServletRequest request, HttpSession session) throws IOException, Exception
            {
                byte[] bytes = FileUtils.readFileToByteArray(new File("C:\\agreement.pdf"));

                ServletOutputStream stream = response.getOutputStream();
                response.setContentType("application/pdf");
                response.addHeader("Content-Type", "application/pdf");
                response.addHeader("Content-Disposition", "inline;filename=agreement.pdf");
                response.setContentLength((int) bytes.length);
                stream.write(bytes);

                stream.flush();
                stream.close();
            }
        }