vue3使用pdfjs-dist查看pdf文件

安装npm 依赖

npm install --save pdfjs-dist

vue 子组件代码

<template>
  <template v-for="item in pageNum"
            :key="item">
    <canvas :id="`pdf-canvas-${item}`"
            class="pdf-page" />
  </template>
  aaa
</template>

<script>
import { reactive, toRefs, nextTick, watchEffect } from 'vue'
import * as pdfjs from 'pdfjs-dist'
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
import { Toast } from 'vant'

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker

export default {
  name: 'PdfViewer',
  props: {
    url: {
      type: String,
      default: '',
    }, // pdf文件路径
  },
  setup(props, { emit }) {
    const state = reactive({
      pageNum: 0,
      pdfCtx: null,
    })

    const resolvePdf = (url) => {
      const loadingTask = pdfjs.getDocument(url)
      loadingTask.promise.then((pdf) => {
        state.pdfCtx = pdf
        state.pageNum = pdf.numPages
        nextTick(() => {
          renderPdf()
        })
      })
    }

    const renderPdf = (num = 1) => {
      state.pdfCtx.getPage(num).then((page) => {
        const canvas = document.getElementById(`pdf-canvas-${num}`)
        const ctx = canvas.getContext('2d')
        const viewport = page.getViewport({ scale: 1 })
        // 画布大小,默认值是width:300px,height:150px
        canvas.height = viewport.height
        canvas.width = viewport.width
        // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
        const clientWidth = document.body.clientWidth
        canvas.style.width = clientWidth + 'px'
        // 根据pdf每页的宽高比例设置canvas的高度
        canvas.style.height =
          clientWidth * (viewport.height / viewport.width) + 'px'
        page.render({
          canvasContext: ctx,
          viewport,
        })
        if (num < state.pageNum) {
          renderPdf(num + 1)
        } else {
          emit('onRendered')
          Toast.clear() // 取消加载loading
        }
      })
    }

    watchEffect(() => {
      if (props.url) {
        console.log(props.url)
        // 展示加载loading
        Toast.loading({
          message: '加载中...',
          overlay: true,
          forbidClick: true,
          duration: 0,
        })

        resolvePdf(props.url)
      }
    })
    return {
      ...toRefs(state),
    }
  },
}
</script>
<style scoped>
.pdf canvas {
  display: block;
  margin: 0 auto;
}
</style>

父组件代码

<template>
  <div>

    <Pdfcomp :url="pdfUrl"></Pdfcomp>
    <div class="btn">
      <div class="btn_text">保存pdf文件</div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, computed, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Pdfcomp from './pdfcomp.vue'
export default defineComponent({
  components: {
    Pdfcomp: Pdfcomp,
  },
  setup() {
    let pdfUrl = ref('')
    const router = useRouter(),
      route = useRoute()
    onMounted(() => {
        //根据业务需求给pdfUrl赋值 做处理即可
      console.log(route.query.tempFilePaths)
      if (route.query.tempFilePaths) {
        pdfUrl.value = route.query.tempFilePaths
      }
    })
    return { pdfUrl }
  },
})
</script>

<style scoped>
.btn {
  height: 50px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  /* line-height: 50px; */
  background-color: slateblue;
  box-sizing: border-box;
  padding: 20px;
  position: fixed;
  bottom: 0;
}
.btn_text {
  background-color: slategray;
  width: 300px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  color: white;
}
</style>



原文地址：vue3.0使用pdfjs-dist查看pdf文件_geejkse_seff的博客-CSDN博客