创建 vue3 项目我们先创建一个的 vue3 项目, 在终端中输入命令
pnpm create vite vue-pdf-preview
选择 vue-ts 回车，cd 进入项目根目录，执行 pnpm install, 等待项目依赖包安装完成。
项目依赖包安装完成后，我们来启动项目, 执行命令 pnpm run dev ,可以看到控制台输入出了如下内容
vite v2.9.9 dev server running at: > local: http://localhost:3000/ > network: use `--host` to expose ready in 780ms.
按住 control/command + 鼠标左键，项目在浏览器中打开了
项目启动成功
添加 pdf 预览插件项目启动成功后，我们安装 pdf 预览插件
pnpm install vue-pdf-embedpnpm install vue3-pdfjs
我们在 src 下新建一个文件 src/components/pdfpreview.vue，添加一些代码，初始化 vue-pdf 预览，代码如下
<template> <div class="pdf-preview"> </div></template><script setup lang="ts">import { reactive, onmounted, computed } from "vue";const props = defineprops({ pdfurl: { type: string, required: true }})onmounted(() => {});</script><style lang="css" scoped>.pdf-preview { position: relative; height: 100vh; padding: 20px 0; box-sizing: border-box; background: rgb(66, 66, 66);}.vue-pdf-embed { text-align: center; width: 515px; border: 1px solid #e5e5e5; margin: 0 auto; box-sizing: border-box;}</style>
添加完成后，我们将 pdf 预览组件引入到 app.vue 文件中，并将提前准备的 pdf 文件也引入，如下所示：
<template><div> <pdfview :pdfurl="jspdf" /></div></template><script setup lang="ts">import pdfview from "./components/pdfpreview.vue"import jspdf from "./javascript.pdf"</script>
接下来我们回到刚刚新建的 pdf 预览组件页面，来完善预览功能
我们先引入 pdf 预览插件：
import vuepdfembed from "vue-pdf-embed";import { createloadingtask } from "vue3-pdfjs/esm"; // 获得总页数
使用 vue3 的 reactive 定义一些页数，页码，pdf文件预览地址变量
const state = reactive({ source: props.pdfurl, 预览pdf文件地址 pagenum: 1, 当前页面 scale: 1, // 缩放比例 numpages: 0, // 总页数});
在 onmounted 钩子函数中使用createloadingtask 获取下 预览文件的总页数
const loadingtask = createloadingtask(state.source); loadingtask.promise.then((pdf:{numpages: number}) => { state.numpages = pdf.numpages; });
在template中加入预览插件代码：
<div class="pdf-wrap"> <vue-pdf-embed :source="state.source" : class="vue-pdf-embed" :page="state.pagenum" /></div>
打开浏览器，可以看到 pdf 文件已经加载出来了，但是样式不是很好看，我们下一步将样式优化下，并将 pdf 文件的翻页功能，缩放功能，当前页面/总页数展示功能添加完善
添加如下代码到 tempate 中
<div class="page-tool"> <div class="page-tool-item" >上一页</div> <div class="page-tool-item">下一页</div> <div class="page-tool-item">{{state.pagenum}}/{{state.numpages}}</div> <div class="page-tool-item" >放大</div> <div class="page-tool-item">缩小</div></div>
美化样式：
.pdf-preview { position: relative; height: 100vh; padding: 20px 0; box-sizing: border-box; background-color: e9e9e9;}.pdf-wrap{ overflow-y:auto ;}.vue-pdf-embed { text-align: center; width: 515px; border: 1px solid #e5e5e5; margin: 0 auto; box-sizing: border-box;}.page-tool { position: absolute; bottom: 35px; padding-left: 15px; padding-right: 15px; display: flex; align-items: center; background: rgb(66, 66, 66); color: white; border-radius: 19px; z-index: 100; cursor: pointer; margin-left: 50%; transform: translatex(-50%);}.page-tool-item { padding: 8px 15px; padding-left: 10px; cursor: pointer;}
添加文件的翻页功能，缩放功能，当前页面/总页数展示功能添加完善
const scale = computed(() => `transform:scale(${state.scale})`)function lastpage() { if (state.pagenum > 1) { state.pagenum -= 1; }}function nextpage() { if (state.pagenum < state.numpages) { state.pagenum += 1; }}function pagezoomout() { if (state.scale < 2) { state.scale += 0.1; }}function pagezoomin() { if (state.scale > 1) { state.scale -= 0.1; }}
tempalte
<div class="page-tool-item" @click="lastpage">上一页</div><div class="page-tool-item" @click="nextpage">下一页</div><div class="page-tool-item">{{state.pagenum}}/{{state.numpages}}</div><div class="page-tool-item" @click="pagezoomout">放大</div><div class="page-tool-item" @click="pagezoomin">缩小</div>
以上就是vue3+vue-pdf怎么实现pdf文件在线预览的详细内容。