前端 - PDF.js 转 canvas 页面不平铺的问题?

Question

使用PDF.js 转成canvas放到页面上不会平铺
目前效果是:

期望实现的效果:

请问各位社区大佬应该怎么去解决？

function renderPage(num: number) {  pdfDoc.getPage(num).then((page: any) => {    const canvas: any = document.getElementById(`pdfSource${num}`)    const ctx = canvas.getContext('2d')    const dpr = window.devicePixelRatio || 1    const bsr =      ctx.webkitBackingStorePixelRatio ||      ctx.mozBackingStorePixelRatio ||      ctx.msBackingStorePixelRatio ||      ctx.oBackingStorePixelRatio ||      ctx.backingStorePixelRatio ||      1    const ratio = dpr / bsr    const viewport = page.getViewport({ scale: state.pdfScale })    canvas.width = viewport.width    canvas.height = viewport.height    state.pdfWidth = `${viewport.width}px`    ctx.setTransform(ratio, 0, 0, ratio, 0, 0)    // 将 PDF 页面渲染到 canvas 上下文中    const renderContext = {      canvasContext: ctx,      viewport    }    page.render(renderContext)  })}

目前代码是这样的缩放倍率为1

• pdf.js的版本是3.2.146
• vue3+ts+vite

Answer 1

在创建时 给canvas一个固定宽，渲染后再为这个canvas设置样式width:100%即可解决。

function createTargeCanvas(num) {  let targetContainer = document.getElementById('target')  let canvas = document.createElement('canvas')  canvas.id = 'target' + num  canvas.width = 770  targetContainer?.appendChild(canvas)}

function loadFileTarget(url: string) {  PDF.getDocument(url).promise.then((p: any) => {    pdfDoc = p    const { numPages } = p    state.pdfPages = numPages    targetTotal.value = numPages    CreateCanvasTarget(state.pdfPages)    for (let i = 1; i <= state.pdfPages; i++) {      let canvas = document.getElementById(`target${i}`)      canvas!.style.width = '100%'    }    for (let i = 1; i <= state.pdfPages; i++) {      renderPageTarget(i)    }  })}