Pan-缩放PDF (Javascript)

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.3.2/dist/panzoom.min.js"></script>
<div id="panzoom-container">
  <canvas id="the-canvas"></canvas>
<style>
#the-canvas {
  border: 1px solid black;
  direction: ltr;
</style>

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
var pdfDoc = null,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');
var container = document.getElementById("panzoom-container")
function renderPage(desiredHeight) {
  pdfDoc.getPage(1).then(function(page) {
    var viewport = page.getViewport({ scale: 1, });
    var scale = desiredHeight / viewport.height;
    var scaledViewport = page.getViewport({ scale: scale, });
    canvas.height = scaledViewport.height;
    canvas.width = scaledViewport.width;
    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: ctx,
      viewport: scaledViewport
    page.render(renderContext);
// Get the PDF
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
  // Initial/first page rendering
  renderPage(250);
var panzoom = Panzoom(container, {
  setTransform: (container, { scale, x, y }) => {
    // here I can re-render the page, but I don't know how
    // renderPage(container.getBoundingClientRect().height);
    panzoom.setStyle('transform', `scale(${scale}) translate(${x}px, ${y}px)`)
container.addEventListener('wheel', zoomWithWheel)
function zoomWithWheel(event) {
  panzoom.zoomWithWheel(event)
}

canvas.style.transform = "scale("+1/panzoom.getScale()+")"

function zoomWithWheel(event) {
    panzoom.zoomWithWheel(event)
    clearTimeout(wheelTimeoutHandler);

Pan-缩放PDF (Javascript)

1 个回答