Javascript 使用PDF.js将PDF嵌入网页

对于像我这样的新手来说，

pdf.js

是一个有点大的项目。正如大多数帖子所说的，这个项目是将PDF文件嵌入web的绝佳工具。但是我很难弄明白如何使用它

---

我想知道的是如何使用

PDF.js

嵌入本地PDF文件

您可以给出相对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);
    });
} 

PDFJS.workerSrc='PATH_TO_WORKER_LOADER/WORKER_LOADER.js'；
pdfDoc=PDFJS.getDocument（pdfPath）；
pdfDoc.then（renderPdf）；
函数renderPdf（pdfDoc）{
pdfNumPages=pdfDoc.numPages；
获取页面（1）。然后（渲染页面）；
}
函数呈现页面（第页）{
var viewport=page.getViewport（比例）；
var$canvas=jQuery（“”）；
//将画布的高度和宽度设置为视口的高度和宽度
var canvas=$canvas.get（0）；
var context=canvas.getContext（“2d”）；
canvas.height=viewport.height；
canvas.width=viewport.width；
//将画布附加到pdf容器div（参考HTML文件中的div）
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（“”）
.addClass（“textLayer”）
.css（“高度”，viewport.height+“px”）
.css（“宽度”，viewport.width+“px”）
.抵消({
top:canvasOffset.top，
左：canvasOffset.left
});
//如果我们在HiDPI显示器上，下面几行代码将在上下文上设置缩放
var outputScale=getOutputScale（上下文）；
if（输出比例。缩放）{
var cssScale='scale（+（1/outputScale.sx）+'，'+
（1/outputScale.sy）+’）；
setProp（'transform'，canvas，cssScale）；
setProp（'transformOrigin'，canvas，'0%0%'）；
}
上下文。_scaleX=outputScale.sx；
上下文。_scaleY=outputScale.sy；
if（输出比例。缩放）{
scale（outputScale.sx，outputScale.sy）；
}
var renderContext={
背景：背景，
视口：视口，
textLayer:textLayer
};
page.render（renderContext）；
});
} 

var url='1http://localhost/path/file.pdf';

@RubenKazumov路径将以

c://

开头？我不确定，因为我不是电脑用户，但请尝试

var url=file:///C:/';

我在本地有两个pdf文件，一个是

test.pdf

，一个是

另一个test.pdf

。我尝试了这个路径

file:///C:/resource/pdf/another%20test.pdf

和

file:///C:/resource/pdf/test.pdf

它们都不工作。您是否有机会打开浏览器并检查文件资源的可用性？