使用JavaScript以編程方式更改PDF頁面？

Question

我試圖在iFrame中顯示PDF，以在iPad上爲基於PHP，HTML和CSS的網絡「應用程序」顯示PDF。但是，在iPad上查看對象或iFrame中的PDF時，無法更改正在查看的頁面。滾動似乎不起作用。

所以我的想法是，我需要創建一個下一個和上一個按鈕，使用JavaScript來更改當前查看的頁面。但是，我似乎無法找到任何有關如何在PDF中嵌入代碼的情況下實現這一目標的信息。但這不是應用程序的選項，因爲用戶顯然不知道如何將代碼嵌入到他們上傳的PDF中。

我真的很喜歡關於如何在不修改PDF的情況下實現這個解決方案的任何信息。另外，如果有另一種方法可以使用可以在iPad上運行的對象或iFrame，那也可以。

在此先感謝。

Answer 1

這可以使用PDF.js

完成

他們的網頁可以在這裏找到：http://mozilla.github.io/pdf.js/

我不想在第一次使用他們的解決方案，因爲我聽說它會呈現一些PDF的問題。不過，到目前爲止，它似乎完美呈現我們的PDF。

下面是一些代碼我用於實現過程

PDFJS.getDocument('FILE_LOCATION').then(function(pdf) { 
    state  = true; 
    cur_page = 1; 
    total_pages = pdf.numPages; 

    pdf.getPage(cur_page).then(function(page) { 
     var scale = 1.5; 
     var viewport = page.getViewport(scale); 

     // Prepare canvas using PDF page dimensions 
     var canvas = document.getElementById('the-canvas'); 
     var context = canvas.getContext('2d'); 
     canvas.height = viewport.height; 
     canvas.width = viewport.width; 

     // Render PDF page into canvas context 
     var renderContext = { 
      canvasContext: context, 
      viewport:  viewport 
     }; 
     page.render(renderContext); 
    }); 

    $(".pdf_viewer").on("click", ".prev_page", function(e) { 
     e.preventDefault(); 
     if(state && cur_page > 1) { 
      --cur_page 
      pdf.getPage(cur_page).then(function(page) { 
       var scale = 1.5; 
       var viewport = page.getViewport(scale); 

       // Prepare canvas using PDF page dimensions 
       var canvas = document.getElementById('the-canvas'); 
       var context = canvas.getContext('2d'); 
       canvas.height = viewport.height; 
       canvas.width = viewport.width; 

       // Render PDF page into canvas context 
       var renderContext = { 
        canvasContext: context, 
        viewport:  viewport 
       }; 
       page.render(renderContext); 
      }); 
     } 
    }); 

    $(".pdf_viewer").on("click", ".next_page", function(e) { 
     e.preventDefault(); 
     if(state && cur_page < total_pages) { 
      ++cur_page; 
      pdf.getPage(cur_page).then(function(page) { 
       var scale = 1.5; 
       var viewport = page.getViewport(scale); 

       // Prepare canvas using PDF page dimensions 
       var canvas = document.getElementById('the-canvas'); 
       var context = canvas.getContext('2d'); 
       canvas.height = viewport.height; 
       canvas.width = viewport.width; 

       // Render PDF page into canvas context 
       var renderContext = { 
        canvasContext: context, 
        viewport:  viewport 
       }; 
       page.render(renderContext); 
      }); 
     } 
    }); 

    $(".pdf_viewer").on("click", ".close_window", function(e) { 
     e.preventDefault(); 
     if(state) { 
      state = false; 
      pdf.destroy(); 
     } 
    }); 

編輯：固定一個錯字