在一些后台管理中, 经常会看到pdf的打印预览, 比如流程的审批, 规章制度或者财务系统的发票等等, 都要涉及到pdf的打印及其预览

现在基本搭建的项目都是基于Vue3, 所以, 我们今天就使用Vue3来实现一下我们pdf的预览及其打印, 也将最终的代码上传到gitee仓库了, 放在文章的最下面了

在之前, 我写过一篇Vue2对于文件的打印预览, 借助的是vue-office插件, 大家可以点击以下链接进行阅读

借助vue-office实现word文件预览

我们先来创建一个Vue3的项目

现在, 我们的pdf预览及其打印, 将其封装出来, 在App.vue文件进行引入

大家可以搜索下方链接查看该插件

https://github.com/hrynko/vue-pdf-embed?tab=readme-ov-file
项目创建完毕, 我们需要安装一下依赖

npm install vue-pdf-embed
我们创建一个组件

在index.vue组件中我们接收一个pdf

现在, 我们对功能进行分析, 我们需要将pdf在页面中显示, 而且如果页数过多, 我们还需要点击翻页, 甚至可以放大缩小, 打印或者下载

确认功能之后, 我们先将最基本的HTML页面写出来, 现在先将pdf预览出来, 我们再对其功能一步一步实现

将准备好的pdf传递过去, 现在, 我们只需要在组件中进行编写就OK了

import VuePdfEmbed from “vue-pdf-embed”;
将预览插件引入进来之后, 我们在页面中进行使用, 使用之前, 我们需要定义几个数据

import { reactive } from “vue”;
const state = reactive({
source: props.pdfUrl, // 预览pdf文件地址
pageNum: 1, // 当前页面
scale: 1, // 缩放比例
numPages: 0, // 总页数
});

这里, 我添加了loading效果, 因为pdf的加载, 需要一定的时间

这个loading效果, 我是这么做的, 如果加上element-plus的loading效果会好看一些, 我只是添加了文字展示

import { ref, watchEffect } from “vue”;
const loading = ref(true);
watchEffect(() => {
if (state.numPages > 0) {
loading.value = true;
}
})
因为, 我们的总页面肯定不会是0, 所以, 我才这么显示, 大家也可以在加载完pdf之后, 再将其值改为true, 这也是可以的

接下来需要做的就是获取pdf的总页码

就是在预览组件中, 绑定loaded方法

在该方法中, 可以接收一个值, 我们在其值中就可以获取页码了

现在, 我们的页面就可以正常显示了

我们先实现一下上一页和下一页这个功能

html

上一页

下一页

js

function lastPage() {
if (state.pageNum > 1) {
state.pageNum -= 1;
}
}
function nextPage() {
if (state.pageNum < state.numPages) {
state.pageNum += 1;
}
}

我们发现上一页下一页没有问题, 接下来, 我们实现一下方法和缩小

html

放大

缩小

js

function pageZoomOut() {
if (state.scale < 2) { state.scale += 0.1; } } function pageZoomIn() { if (state.scale > 1) {
state.scale -= 0.1;
}
}
我们自定义样式, 传递给预览组件, 这里使用计算属性最好不过, 因为需要依赖数据进行计算

import { computed } from “vue”;
const scale = computed(() => transform:scale(${state.scale}))

现在, 我们的放大缩小也没有问题了

我们来实现一下打印功能, 需要创建一个模版ref

html

打印

js

// 打印
const pdfRef = ref();
const printPdf = () => {
pdfRef.value.print(100, “test”, true)
}
我们发现, 打印功能也可以正常实现

就差最后的下载了, 文档也提供了下载方法

html

下载

js

const downloadPdf = () => {
pdfRef.value.download(“test.pdf”);
}
我们发现下载功能也可以正常下载

这样我们的整体功能就实现啦

我也将代码实现上传到仓库了, 大家如果对于上述代码不是很理解, 可以打开我的仓库进行查看

https://gitee.com/lv-zirui/pdf
今天, 我们就讲解到这里

我们下期见