显示PDF

Question

Currently I have code that displays PNG images and comments from a database linked to each Image. 目前，我有显示PNG图像和链接到每个图像的数据库中的注释的代码。 I realized that I will also need to do this for PDF files. 我意识到我也需要对PDF文件执行此操作。

How would I edit the current code to display PDF documents instead of PNG Images? 如何编辑当前代码以显示PDF文档而不是PNG图片？

Any help would be much appreciated. 任何帮助将非常感激。

Thanks, 谢谢，

<!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

Given that there is no straightforward way to display pdfs inline in a similar manner to images, you could consider the following: 鉴于没有直接的方式以类似于图像的方式内联显示pdf，您可以考虑以下几点：

Use cfpdf action = "thumbnail" to convert the pdf to a series of images . 使用cfpdf action = "thumbnail" 将pdf转换为一系列图像。
Then, load the images for a given pdf in a jquery carousel to make them available to review. 然后，在jquery轮播中将给定pdf的图像加载以供查看。

Using a carousel to contain and display the pages of the 'pdf' would give you a result similar to when you display a single image for review and would probably let you retain a similar look and feel to your page. 使用轮播来包含和显示“ pdf”页面时，将获得与显示单个图像以供查看时相似的结果，并且可能使您保留与页面相似的外观。

显示PDF

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-01-09 05:07:36

显示PDF

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-01-09 05:07:36

解决方案1
4 已采纳 2014-01-09 05:07:36