问题描述
我使用pdf.js呈现多页pdf。我想要一个svg
元素来覆盖整个pdf,而仅覆盖pdf(而不是整个窗口)。
每个页面都呈现到不同的画布。由于我从另一个堆栈溢出页面复制了代码,并且仅作了一些调整,所以我不太了解画布的样式如何工作以及为什么将画布放置在中间。在下面的代码中,我包括了渲染pdf的方式以及尝试定位svg
的尝试。
我在宽度和边距方面都处于正确的位置,但是我不能正确设置height属性。
var pdfjsLib = window['pdfjs-dist/build/pdf'];
var svg = document.getElementById('svg');
var finishedRender = false;
var pdfHeight = 0;
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
var myState = {
thePdf: null,scale: 1,currentPage: 1,}
var viewer = document.getElementById('canvas_container');
var eCanvas;
pdfjsLib.getDocument(url).promise.then(async function(pdf) {
myState.thePdf = pdf;
for (myState.currentPage; myState.currentPage <= myState.thePdf.numPages; myState.currentPage++) {
canvas = document.createElement("canvas");
canvas.className = 'pdf-page-canvas';
eCanvas = canvas;
viewer.appendChild(canvas);
await renderPage(canvas);
}
svg.style.marginLeft = window.getComputedStyle(eCanvas,null).getPropertyValue("margin-left");
svg.style.marginRight = window.getComputedStyle(eCanvas,null).getPropertyValue("margin-right");
svg.style.width = eCanvas.width;
svg.style.height = pdfHeight;
finishedRender = true;
});
async function renderPage(canvas) {
var page = await myState.thePdf.getPage(myState.currentPage).then(page => {
var viewport = page.getViewport({
scale: myState.scale
});
canvas.height = viewport.height;
canvas.width = viewport.width;
pdfHeight += viewport.height;
page.render({
canvasContext: canvas.getContext('2d'),viewport: viewport
});
});
}
.pdf-page-canvas {
display: block;
margin: 5px auto;
border: 1px solid rgba(0,0.2);
z-index: 0;
}
.canvas_container {
width: 100%;
height: 100%;
z-index: 0;
position: absolute;
}
#svg {
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
<div id="my_pdf_viewer">
<div id="zoom-controls">
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
</div>
<svg id='svg'
xmlns="http://www.w3.org/2000/svg"
onload="makeDraggable(evt)">
<rect x="0" y="0"
rx="5" ry="5"
width="40" height="40"
fill="#007bff"
class="draggable" />
<rect x="0" y="0"
rx="5" ry="5"
width="40" height="40"
fill="#007bff"
class="draggable" />
</svg>
<div id="canvas_container"
class="canvas_container"></div>
</div>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)