pdfjs 將pdf文件渲染到canvas中

原文鏈接: pdfjs 將pdf文件渲染到canvas中

https://github.com/mozilla/pdf.js

 

安裝

yarn add pdfjs-dist

需要使用cdn將worker部署上去, 直接import會報錯

pdfjs必須使用require引入, import會報錯, 可能和我項目用的ts有關

 

<template>
  <div>
    pdfjs
    <canvas id="pdf-canvas"></canvas>
  </div>
</template>

<script>
import { defineComponent, onMounted } from "vue"
import { getUrl } from "../../utils"
// import pdfjsLib from "pdfjs-dist"
const pdfjsLib = require("pdfjs-dist")
pdfjsLib.GlobalWorkerOptions.workerSrc = getUrl("/lib/pdfjs/pdf.worker.min.js")
console.log(pdfjsLib, pdfjsLib.getDocument)
const setup = () => {
  const init = () => {
    const url = getUrl("/file/t2.pdf")
    const res = pdfjsLib.getDocument(url)
    res.promise
      .then(pdf => {
        return pdf.getPage(1)
      })
      .then(page => {
        // 設置展示比例`
        const scale = 1.5
        // 獲取pdf尺寸
        const viewport = page.getViewport({ scale })
        console.log("viewport", viewport)
        // 獲取需要渲染的元素
        const canvas = document.getElementById("pdf-canvas")
        const context = canvas.getContext("2d")
        canvas.height = viewport.height || 500
        canvas.width = viewport.width || 500
        const renderContext = {
          canvasContext: context,
          viewport: viewport,
        }
        page.render(renderContext)
      })
  }
  onMounted(init)
}
export default defineComponent({ setup })
</script>

<style></style>