顯示文件

目前我有代碼顯示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>

來源

2014-01-08 Michael Downey

我建議你想要顯示的PDF文件的錨標記。 –

通過一些方法（對象標籤，嵌入標籤，各種JavaScript庫）在技術上是可行的，但通常建議不要使用它。正如Dan所說，通常最好的途徑是提供一個鏈接。 –

..即使您嵌入了pdf，您也不能*強制*瀏覽器在頁面中顯示它們。根據瀏覽器設置的不同，用戶可能會被提升爲打開/保存文件，這會導致糟糕的用戶體驗。所以不要以爲你可以在html頁面中顯示它們，就像圖像一樣。 – Leigh

由於存在以類似的方式，以圖片內嵌顯示PDF文件沒有簡單的方法，你可以考慮以下幾點：

使用cfpdf action = "thumbnail"到convert the pdf to a series of images。
然後，在jquery carousel中加載給定PDF的圖像，以使其可供查看。

使用旋轉木馬來包含和顯示'pdf'頁面會給你一個類似於當你顯示一個單一的圖像進行審查的結果，並可能讓你保持一個類似的外觀和感覺到你的網頁。

來源

2014-01-09 05:07:36 Antony

回答

相關問題