将svg元素放置在pdf查看器上

如何解决将svg元素放置在pdf查看器上

我使用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>

将svg元素放置在pdf查看器上

如何解决将svg元素放置在pdf查看器上

相关推荐