Вставить PDF, используя pdf.js на домашнюю страницу

Question

pdf.js - это немного большой проект для новичка, подобного мне. Поскольку большинство сообщений сказали, что этот проект - отличный инструмент для встраивания PDF-файла в Интернет. Но мне очень трудно понять, как это использовать.

Что я хочу знать как я могу вставить локальный файл PDF, используяpdf.js?

Answer 1

Вы можете указать относительный URL-адрес, например pdfPath="pdf/TestDocument.pdf".

Ниже приведен пример кода, созданный из примеров, приведенных на Github:

PDFJS.workerSrc ='PATH_TO_WORKER_LOADER/worker_loader.js'; 
pdfDoc = PDFJS.getDocument(pdfPath); 
pdfDoc.then(renderPdf); 

function renderPdf(pdfDoc) { 

     pdfNumPages = pdfDoc.numPages; 

    pdfDoc.getPage(1).then(renderPage); 
} 

function renderPage(page) { 

    var viewport = page.getViewport(scale); 
    var $canvas = jQuery("<canvas></canvas>"); 
    //Set the canvas height and width to the height and width of the viewport 
    var canvas = $canvas.get(0); 
    var context = canvas.getContext("2d"); 
    canvas.height = viewport.height; 
    canvas.width = viewport.width; 

    //Append the canvas to the pdf container div (refer a div in your HTML file) 
    var $editorTextArea = jQuery("#editorTextArea"); 
    $editorTextArea.css("height", canvas.height + "px").css("width", canvas.width + "px"); 
    $editorTextArea.append($canvas); 

    var canvasOffset = $canvas.offset(); 
    var $textLayerDiv = jQuery("<div />") 
     .addClass("textLayer") 
     .css("height", viewport.height + "px") 
     .css("width", viewport.width + "px") 
     .offset({ 
      top: canvasOffset.top, 
      left: canvasOffset.left 
     }); 

    //The following few lines of code set up scaling on the context if we are on a HiDPI display 
    var outputScale = getOutputScale(context); 
    if (outputScale.scaled) { 
     var cssScale = 'scale(' + (1/outputScale.sx) + ', ' + 
      (1/outputScale.sy) + ')'; 
     CustomStyle.setProp('transform', canvas, cssScale); 
     CustomStyle.setProp('transformOrigin', canvas, '0% 0%'); 
    } 

    context._scaleX = outputScale.sx; 
    context._scaleY = outputScale.sy; 
    if (outputScale.scaled) { 
     context.scale(outputScale.sx, outputScale.sy); 
    } 
     var renderContext = { 
      canvasContext: context, 
      viewport: viewport, 
      textLayer: textLayer 
     }; 
     page.render(renderContext); 
    }); 
}