显示PDF

Question

目前，我有显示PNG图像和链接到每个图像的数据库中的注释的代码。 我意识到我也需要对PDF文件执行此操作。

如何编辑当前代码以显示PDF文档而不是PNG图片？

任何帮助将非常感激。

谢谢，

<!DOCTYPE html>
        <html>
            <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>



        <cfquery datasource="AccessTest" name="qTest">
            SELECT P.Account, P.Image, P.Image_ID, C.Remarks, C.Users, C.Accounts, C.Date_Time
            FROM PictureDB AS P
            INNER JOIN CommentsDB AS C
            ON C.Image_ID = P.Image_ID
            ORDER BY P.Image_ID
        </cfquery>



    <script src="http://code.jquery.com/jquery-2.0.3.js">
    </script>



    <script>
        $(document).ready(function(){
          var images = {
            <cfoutput query="qTest" group="Image_ID">
                "#qTest.Image_ID#": {
                    "image": "#qTest.Image#",
                    "remarks": [
                    <cfoutput>
                        "#qTest.Users#, #qTest.Date_Time# <br> #qTest.Remarks# <br> </br>",
                    </cfoutput>
                    ]
                },
            </cfoutput>
        };
          $("button").click(function(event){
            event.preventDefault();
            var id = $(this).data("id");
            var src = images[id].image;
            var desc = images[id].remarks.toString();

            $("#theImage").attr("src", src).removeClass("hide");
            $("#theDescription").html(desc).removeClass("hide");
            });
        });
    </script>


    </head>

    <body>


    <cfoutput query="qTest" group="Account">
        <button data-id="#qTest.Image_ID#">
            <table width="230">#qTest.Account# </table>
        </button>
    </cfoutput>

    <img id="theImage" class="hide">
    <div id="theDescription" class="hide">
    </div>



    </body>
    </html>

Answer 1

鉴于没有直接的方式以类似于图像的方式内联显示pdf，您可以考虑以下几点：

• 使用cfpdf action = "thumbnail" 将pdf转换为一系列图像 。
• 然后，在jquery轮播中将给定pdf的图像加载以供查看。

使用轮播来包含和显示“ pdf”页面时，将获得与显示单个图像以供查看时相似的结果，并且可能使您保留与页面相似的外观。