vue3+vite+pdfjs

安装

npm install pdfjs-dist

在vue文件中使用

<script setup>
import * as pdfjsDist from 'pdfjs-dist'
import * as pdfWorkerMin from 'pdfjs-dist/build/pdf.worker.min?url'
import { onMounted } from 'vue'
console.log(pdfjsDist, pdfWorkerMin.default)
onMounted(() => {
  pdfjsDist.GlobalWorkerOptions.workerSrc = pdfWorkerMin.default
  pdfjsDist.getDocument('人力资源管理服务外包协议2.0.pdf').promise.then(pdf => {
    console.log(pdf)
    pdf.getPage(1).then(page => {
      console.log(page)
    })
  })
})
</script>

示例：pdf-viewer

<script setup>
import * as pdfjsDist from 'pdfjs-dist'
import * as pdfWorkerMin from 'pdfjs-dist/build/pdf.worker.min?url'
import { onMounted, ref } from 'vue'
console.log(pdfjsDist, pdfWorkerMin.default)
const props = defineProps({
  src: {
    type: Object,
    required: true,
    default: new URL('/人力资源管理服务外包协议2.0.pdf', import.meta.url)
  },
  currentPage: {
    type: Number,
    default: 0,
  }
})
const emit = defineEmits(['loaded'])

let pdfDoc = ref(null)

onMounted(() => {
  pdfjsDist.GlobalWorkerOptions.workerSrc = pdfWorkerMin.default
  pdfjsDist.getDocument(props.src).promise.then(pdf => {
    pdfDoc.value = pdf
    const pdfPages = document.getElementsByClassName('pdf-page')
    for(let i = 0; i < pdf._pdfInfo.numPages - 1; i++) {
      pdf.getPage(i+1).then(page => {
        const viewport = page.getViewport({ scale: 1 })
        const context = pdfPages[i].getContext('2d')
        pdfPages[i].height = viewport.height
        pdfPages[i].width = viewport.width
        page.render({
          canvasContext: context,
          viewport: viewport
        })
      })
    }   
    emit('loaded', pdf)
  })
})
</script>

<template>
  <div v-if="pdfDoc">
    <template v-for="index in pdfDoc._pdfInfo.numPages" :key="index">
      <canvas class="pdf-page" v-show="currentPage <= 0 || (index==currentPage)"></canvas>
    </template>
  </div>
</template>

父组件调用

<script setup>
import { ref } from 'vue';
import PdfViewer from './PdfViewer.vue'
// import pdfUrl from '/人力资源管理服务外包协议2.0.pdf'

const pdfUrl = new URL('/人力资源管理服务外包协议2.0.pdf', import.meta.url)

let currentPage = ref(1)
setTimeout(() => {
  currentPage.value = 2
}, 5000);
</script>

<template>
  <pdf-viewer :current-page="currentPage" :src="pdfUrl"></pdf-viewer>
</template>