使用pdf.js将PDF嵌入网页

Question

pdf.js 对于像我这样的新手来说是一个比较庞大的项目。正如大多数帖子所说，这个项目是将 PDF 文件嵌入到 Web 中的绝佳工具。但是，我很难弄清楚如何使用它。

我想知道的是，如何使用 pdf.js 嵌入本地 PDF 文件？

- user2785929

---

我不确定，因为我不是PC用户，但是尝试使用var url = 'file:///C:/';。 - Ruben Kazumov

我本地有两个PDF文件，一个是test.pdf，另一个是another test.pdf。我尝试了这些路径file:///C:/resource/pdf/another%20test.pdf和file:///C:/resource/pdf/test.pdf，但它们都无法工作。 - user2785929

file://C:/resource/pdf/test.pdf file://C:\resource\pdf\test.pdf 的翻译是什么？ - Ruben Kazumov

错误是不允许加载本地资源：file:///C:/%0Desourcepdf%09est.pdf。我真的不理解这个。或者从本地路径加载不是真正可能的吗？ - user2785929

使用相对于网页的路径，而不是从文件系统根目录向上遍历的绝对路径。 - user229044

Answer 1

你可以提供相对路径，例如 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);
    });
} 

- Amit S