vue3.0使用pdfjs-dist查看pdf文件

最新推荐文章于 2025-04-10 17:09:09 发布

果酱丶

最新推荐文章于 2025-04-10 17:09:09 发布

阅读量6k

点赞数 7

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/m0_63366509/article/details/121862275

版权

本文介绍了如何在Vue3.0项目中使用pdfjs-dist库创建一个PDF预览组件，并实现了简单的缩放功能。首先在main.js中全局注册组件，然后在组件中通过pdfUrl参数传递PDF文件地址。后期更新增加了工具栏，提供了页面缩放和当前页码显示。关键在于利用pdfjs的scale属性和CSS进行缩放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

pdf预览组件

前情：项目要的急，就简单的能看pdf文件，没有其他功能

使用的 pdfjs-dist 版本号：2.5.207

接下来，直接上代码 ♫

封装组件

<template>
  <template v-for="item in pageNum" :key="item">
    <canvas :id="`pdf-canvas-${item}`" class="pdf-page" />
  </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 => {
   
        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)

最低0.47元/天解锁文章