Javascript Pdf-навигация для pdf.js

Question

Можно ли использовать pdf.js для рендеринга PDF-файла на html-странице и управлять его навигацией? Для навигации я имею в виду масштабирование и панорамирование. Моя цель - добавить кнопку с панорамированием (вверх, вниз, влево, вправо) для увеличения (увеличение, уменьшение, масштабирование по умолчанию), и, если это возможно, автоматически панорамировать документ, центрирующий его в позиции щелчка.

Answer 1

Весь смысл pdf.js заключается в рендеринге .pdf документов в HTML5. Поэтому то, что вы говорите, должно быть достижимо. Проект является quite well documented на Github и должен быть хорошей отправной точкой. Что касается навигационных и других кнопок переключения для масштабирования и панорамирования, то они были четко реализованы here и here.

Итак, вы можете сначала просмотреть источник этих демоверсий, а затем просмотреть документацию в соответствии с вашими потребностями. Надеюсь, это поможет вам начать в правильном направлении. Я отправляю некоторый соответствующий фрагмент код из одной из демок:

var pdfDoc = null, 
    pageNum = 1, 
    pageRendering = false, 
    pageNumPending = null, 
    scale = 0.8, 
    canvas = document.getElementById('the-canvas'), 
    ctx = canvas.getContext('2d'); 

/** 
    * Get page info from document, resize canvas accordingly, and render page. 
    * @param num Page number. 
    */ 
function renderPage(num) { 
    pageRendering = true; 
    // Using promise to fetch the page 
    pdfDoc.getPage(num).then(function(page) { 
     var viewport = page.getViewport(scale); 
     canvas.height = viewport.height; 
     canvas.width = viewport.width; 

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

     // Wait for rendering to finish 
     renderTask.promise.then(function() { 
      pageRendering = false; 
      if (pageNumPending !== null) { 
       // New page rendering is pending 
       renderPage(pageNumPending); 
       pageNumPending = null; 
      } 
     }); 
    }); 

    // Update page counters 
    document.getElementById('page_num').textContent = pageNum; 
} 

/** 
* If another page rendering in progress, waits until the rendering is 
* finised. Otherwise, executes rendering immediately. 
*/ 
function queueRenderPage(num) { 
    if (pageRendering) { 
     pageNumPending = num; 
    } else { 
     renderPage(num); 
    } 
} 

/** 
* Displays previous page. 
*/ 
function onPrevPage() { 
    if (pageNum <= 1) { 
     return; 
    } 
    pageNum--; 
    queueRenderPage(pageNum); 
} 

document.getElementById('prev').addEventListener('click', onPrevPage); 

... 

/** 
* Asynchronously downloads PDF. 
*/ 
PDFJS.getDocument(url).then(function (pdfDoc_) { 
    pdfDoc = pdfDoc_; 
    document.getElementById('page_count').textContent = pdfDoc.numPages; 

    // Initial/first page rendering 
    renderPage(pageNum); 
}