Javascript 如何在没有iframe的页面中嵌入PDF.JS查看器

我很惊讶地看到，关于PDF.JS的文档和教程相对较少，特别是在代码重构

PDFJS->pdfjsLib

之后，考虑到这个库的使用非常广泛

我想做的是相对简单的，我只想直接在网页中嵌入PDF，即不带

，

或

标签。我还想使用文本层，因为我想访问JavaScript中的文本，并在一些句子上添加工具提示

我认为使用查看器可能是一个解决方案，但我不想将

viewer.html

、

viewer.css

和

viewer.js

中的所有代码都包含在我的网页中，因为我确信它会崩溃。如果我只需要显示PDF并选择文本就足够了，我不一定需要查看器的复杂用户界面

这是我的代码，但文本层显示不正确：

document.addEventListener（'DOMContentLoaded'，（）=>{
pdfjsLib.GlobalWorkerOptions.workerSrc='0https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.js';
});
函数displayReport（）{
const file=document.getElementById（'reportInput'）。文件[0]；
const fileReader=new fileReader（）；
fileReader.onload=异步函数（）{
const data=this.result；
const pdf=await pdfjsLib.getDocument（{data:data}）；
const page=wait pdf.getPage（1）；
const viewport=page.getViewport（{比例：0.5}）；
const canvas=document.getElementById（'reportCanvas'）；
const context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
常量renderContext={
背景：背景，
视口：视口
};
等待页面.render（renderContext）.promise；
const textContent=wait page.getTextContent（）；
const{top，left，width，height}=canvas.getBoundingClientRect（）；
const textLayer=document.getElementById（'reportTextLayer'）；
textLayer.style.top=top；
textLayer.style.left=左；
textLayer.style.width=宽度；
textLayer.style.height=高度；
等待pdfjsLib.renderTextLayer({
textContent:textContent，
容器：textLayer，
视口：视口，
textDivs:[]
});
log（“页面呈现！”）；
};
fileReader.readAsBinaryString（文件）；
}

#reportTextLayer{
位置：绝对位置；
溢出：隐藏；
不透明度：0.2；
线高：1.0；
}
#reportTextLayer>div{
颜色：透明；
位置：绝对位置；
空白：预处理；
光标：文本；
变换原点：0%0%；
}

选择一个PDF文件：

这对我很有用：

[script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.js"][/script]
[script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.worker.js"][/script]
[style type="text/css"]
#signature {
    margin-left:120px;
    margin-top:10px;
}
[/style]


    <canvas id='the-canvas'></canvas>
    <div id='signature'></div>

    [script]

    var url = "Agreement.pdf";
    var loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(function(pdf) {
    pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale, });

    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = 640;
    canvas.width = viewport.width;

    var renderContext = {
    canvasContext: context,
    viewport: viewport
    };
    page.render(renderContext);

    });    
    });

   document.getElementById('signature').innerHTML = 'Signed By Yogi on 1/26/2021'

   [/script]

[script type=“text/javascript”src=”https://mozilla.github.io/pdf.js/build/pdf.js“][/script]
[script type=“text/javascript”src=”https://mozilla.github.io/pdf.js/build/pdf.worker.js“][/script]
[style type=“text/css”]
#签名{
左边距：120像素；
边缘顶部：10px；
}
[/style]
[文字]
var url=“Agreement.pdf”；
var loadingTask=pdfjsLib.getDocument（url）；
loadingTask.promise.then（函数（pdf）{
getPage（1）。然后（函数（第页）{
var标度=1.5；
var viewport=page.getViewport（{scale:scale，}）；
var canvas=document.getElementById（'the-canvas'）；
var context=canvas.getContext（'2d'）；
canvas.height=640；
canvas.width=viewport.width；
var renderContext={
背景：背景，
视口：视口
};
page.render（renderContext）；
});    
});
document.getElementById（'signature'）.innerHTML='2021年1月26日由Yogi签署'
[/script]

这对我很有用：

[script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.js"][/script]
[script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.worker.js"][/script]
[style type="text/css"]
#signature {
    margin-left:120px;
    margin-top:10px;
}
[/style]


    <canvas id='the-canvas'></canvas>
    <div id='signature'></div>

    [script]

    var url = "Agreement.pdf";
    var loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(function(pdf) {
    pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale, });

    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = 640;
    canvas.width = viewport.width;

    var renderContext = {
    canvasContext: context,
    viewport: viewport
    };
    page.render(renderContext);

    });    
    });

   document.getElementById('signature').innerHTML = 'Signed By Yogi on 1/26/2021'

   [/script]

[script type=“text/javascript”src=”https://mozilla.github.io/pdf.js/build/pdf.js“][/script]
[script type=“text/javascript”src=”https://mozilla.github.io/pdf.js/build/pdf.worker.js“][/script]
[style type=“text/css”]
#签名{
左边距：120像素；
边缘顶部：10px；
}
[/style]
[文字]
var url=“Agreement.pdf”；
var loadingTask=pdfjsLib.getDocument（url）；
loadingTask.promise.then（函数（pdf）{
getPage（1）。然后（函数（第页）{
var标度=1.5；
var viewport=page.getViewport（{scale:scale，}）；
var canvas=document.getElementById（'the-canvas'）；
var context=canvas.getContext（'2d'）；
canvas.height=640；
canvas.width=viewport.width；
var renderContext={
背景：背景，
视口：视口
};
page.render（renderContext）；
});    
});
document.getElementById（'signature'）.innerHTML='2021年1月26日由Yogi签署'
[/script]