Vue-Pdf-Embed 项目中获取PDF页面尺寸的技术指南

最新推荐文章于 2025-06-10 09:11:20 发布

魏腾遥Sirena

最新推荐文章于 2025-06-10 09:11:20 发布

阅读量224

点赞数 4

本文链接：https://blog.csdn.net/gitblog_07726/article/details/148507280

版权

Vue-Pdf-Embed 项目中获取PDF页面尺寸的技术指南

vue-pdf-embed PDF embed component for Vue 2 and Vue 3 项目地址: https://gitcode.com/gh_mirrors/vu/vue-pdf-embed

在使用vue-pdf-embed组件时，开发者经常需要获取原始PDF页面的尺寸信息（宽度、高度或缩放比例）以实现更精确的布局控制或自定义功能。本文将详细介绍如何在PDF渲染完成后访问内部PDF.js实例及其方法。

核心概念

vue-pdf-embed组件内部封装了PDF.js库，这个库是Mozilla开发的开源PDF渲染引擎。当PDF文档加载完成后，组件会暴露出PDF.js实例，开发者可以通过这个实例访问PDF文档的元数据和页面属性。

获取PDF.js实例的两种方式

1. 通过模板引用(Template Ref)

在Vue 3的组合式API中，可以使用模板引用来获取组件实例：

import { ref } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'

const pdfRef = ref(null)

在模板中绑定引用：

<VuePdfEmbed ref="pdfRef" source="/example.pdf" />

PDF加载完成后，可以通过pdfRef.value.doc访问PDF.js实例。

2. 通过useVuePdfEmbed组合函数

vue-pdf-embed提供了专用的组合函数来更优雅地管理PDF文档：

import { useVuePdfEmbed } from 'vue-pdf-embed'

const { doc } = useVuePdfEmbed({
  source: '/example.pdf',
})

这种方式返回的doc对象就是PDF.js实例，可以直接使用。

获取页面尺寸信息

获取到PDF.js实例后，可以通过以下方式获取页面尺寸：

// 假设已经获取到doc实例
async function getPageDimensions() {
  // 获取第一页
  const page = await doc.getPage(1)
  
  // 获取页面原始尺寸
  const viewport = page.getViewport({ scale: 1.0 })
  
  console.log('原始宽度:', viewport.width)
  console.log('原始高度:', viewport.height)
  
  // 获取当前缩放比例
  const currentViewport = page.getViewport({ scale: doc.scale })
  console.log('当前缩放比例:', doc.scale)
}