vue3使用pdfjs实现pdf嵌入

原文：https://www.csdn.net/tags/MtTaEgwsMjU4OTktYmxvZwO0O0OO0O0O.html

pdfjs-dist 版本号：2.5.207

此方式已验证成功：

页面截图：

​​​​​​​

 

npm装包： cnpm  i pdfjs-dist@2.5.207

封装p.vue组件：

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

<script>
import { reactive, toRefs, nextTick, watchEffect } from 'vue'
import * as pdfjs from 'pdfjs-dist'
import 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 => {
        console.log(pdf,'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 = 900 + '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) {
      	// 展示加载loading
        Toast.loading({
          message: '加载中...',
          overlay: true,
          forbidClick: true,
          duration: 0,
        });

        resolvePdf(props.url)
      }
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

在页面中使用：

<div class="pdf">
<PdfViewer url="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"></PdfViewer>
</div>

引入：import PdfViewer from "@/components/p.vue"

 另外分享，数据移入页面的时候，显示滚动条：

 ::-webkit-scrollbar {
    width: 3px;
    background-color: #fff;
  }
  .start-content::-webkit-scrollbar-thumb:vertical {
    width: 3px;
    background-color: #fff;
  }
  .start-content::-webkit-scrollbar-track-piece {
   /*鼠标移动上去再显示滚动条*/
    background-color: #fff;
  }
  .start-content:hover::-webkit-scrollbar-track-piece {
   /*鼠标移动上去再显示滚动条*/
    background-color: #fff;
    /* 滚动条的背景颜色 */
    border-radius: 6px;
    /* 滚动条的圆角宽度 */
  }
  .start-content:hover::-webkit-scrollbar-thumb:vertical {
    background-color: #e2e8ed;
    border-radius: 3px;
    // outline: 2px solid rgb(250, 20, 20);
    // outline-offset: -2px;
    // border: 2px solid #777b80;
}
 

//.start-content 是内容所在的盒子
//.start-content里面需要有：overflow-y: auto