vue3的pdf预览

### 实现 Vue3 项目中的 PDF 文件在线预览

对于在 Vue3 项目中实现 PDF 文件的在线预览，可以采用 `@vue-office/pdf` 组件来完成这一需求[^1]。

#### 安装依赖库
为了使用该组件，在项目的根目录下通过命令行工具安装所需的包：

npm install @vue-office/pdf

#### 创建 PDF 预览页面
创建一个新的 Vue 组件用于展示 PDF 文档的内容。下面是一个简单的例子说明如何配置此组件以加载来自网络地址的 PDF 文件。

<template>
  <div class="pdf-container">
    <!-- 使用 vue-office-pdf 的标签并绑定 src 属性 -->
    <vue-office-pdf :src="pdfUrl"></vue-office-pdf>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 导入 vue-office-pdf 插件
import '@vue-office/pdf';

const pdfUrl = ref('http://static.shanhuxueyuan.com/test.pdf');

onMounted(() => {
  // 可在此处处理其他逻辑，比如动态设置 pdfUrl 值
});
</script>

<style scoped lang="less">
/* 添加样式使容器适应不同屏幕尺寸 */
.pdf-container {
  width: 100%;
  height: calc(100vh - 2rem);
}
</style>

上述代码展示了如何利用 `@vue-office/pdf` 来显示远程服务器上的 PDF 文件，并设置了基本布局以便更好地查看文档内容。

另外，如果考虑更广泛的兼容性和功能扩展，也可以探索 `vue-pdf` 这一选项，它提供了丰富的 API 和更好的浏览器支持[^2]。