vue3实现pdf查看，pdfjs-dist实现

超简单pdf查看方式，代码复制黏贴直接就能用

首先是安装依赖

npm i pdfjs-dist@4.5.136

我这里版本很高，你不一定需要和我一样，但也不要太低

引入

css不一定需要，可以不用引入

import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.mjs'
import 'pdfjs-dist/web/pdf_viewer.css'

html代码

一个canvas完全够了

// 我这边是因为一次性将pdf所有页面展示，所以采用了遍历canvas的操作，如果你这边是翻页或单页，那么只需要一个canvas就够了
<canvas
  v-for="(_, index) in state.pdfPages"
  :key="index"
  width="500px"
  :ref="(el) => setPdfCanvasRef(el, index)"
/>

js代码

const state = reactive({
  // 文件路径
  pdfPath: pdf,
  // 总页数
  pdfPages: 1,
  // 页面缩放
  pdfScale: 1,
})
// 用于保存所有canvas的ref
const pdfCanvas = ref<any>([])

// 动态设置ref
const setPdfCanvasRef = (el: any, index: any) => {
  pdfCanvas.value[index] = el
}

// 加载pdf
const loadPDF = async (url: any) => {
  try {
    const loadingTask = pdfjsLib.getDocument({
      url,
      cMapUrl: `http//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.mjs`,
      cMapPacked: true,
    })
    const pdf = await loadingTask.promise
    state.pdfPages = pdf.numPages
    // 循环，一次性将所有页面画出
    for (let i = 1; i <= pdf.numPages; i++) {
      const page = await pdf.getPage(i)
      const viewport = page.getViewport({ scale: state.pdfScale })
      pdfCanvas.value[i - 1].height = viewport.height
      pdfCanvas.value[i - 1].width = viewport.width
      const context = pdfCanvas.value[i - 1].getContext('2d')
      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      }
      page.render(renderContext)
    }
  } catch (error) {
    console.error('Error loading PDF:', error)
  }
}

复制粘贴，直接技能用

最后，有什么不懂的地方欢迎私信

我创建了一个技术交流微信群

加我V，拉你进群，备注来意

我置顶的博客最下方有二维码，可加我V

这是我置顶博客的链接，点击跳转