Displaying PDFs | 易学教程

问题

Currently I have code that displays PNG images and comments from a database linked to each Image. I realized that I will also need to do this for PDF files.

How would I edit the current code to display PDF documents instead of PNG Images?

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>

回答1:

Given that there is no straightforward way to display pdfs inline in a similar manner to images, you could consider the following:

Use cfpdf action = "thumbnail" to convert the pdf to a series of images.
Then, load the images for a given pdf in a jquery carousel to make them available to review.

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.

来源：https://stackoverflow.com/questions/21005480/displaying-pdfs

标签

javascript

ms-access

pdf

coldfusion