Vue3实现pdf预览及打印

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

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

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

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

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

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

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

github.com/hrynko/vue-...

项目创建完毕, 我们需要安装一下依赖

复制代码

npm install vue-pdf-embed

我们创建一个组件

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

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

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

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

javascript 复制代码

import VuePdfEmbed from "vue-pdf-embed";

将预览插件引入进来之后, 我们在页面中进行使用, 使用之前, 我们需要定义几个数据

javascript 复制代码

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

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

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

ini 复制代码

import { ref, watchEffect } from "vue";
const loading = ref(true);
watchEffect(() => {  
    if (state.numPages > 0) {    
    loading.value = true;  
}})

因为, 我们的总页面肯定不会是0, 所以, 我才这么显示, 大家也可以在加载完pdf之后, 再将其值改为true, 这也是可以的

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

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

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

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

ini 复制代码

# html
<div class="page-tool-item" @click="lastPage">上一页</div>
<div class="page-tool-item" @click="nextPage">下一页</div>
# js
function lastPage() {  
if (state.pageNum > 1) {    
    state.pageNum -= 1;
}}
function nextPage() {  
if (state.pageNum < state.numPages) {    
    state.pageNum += 1;  
}}

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

csharp 复制代码

# html
<div class="page-tool-item" @click="pageZoomOut">放大</div><div class="page-tool-item" @click="pageZoomIn">缩小</div>
# js
function pageZoomOut() {  
if (state.scale < 2) {    
    state.scale += 0.1;
}}
function pageZoomIn() {  
if (state.scale > 1) {    
    state.scale -= 0.1;
}}

我们自定义样式, 传递给预览组件, 这里使用计算属性最好不过, 因为需要依赖数据进行计算

javascript 复制代码

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

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

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

ini 复制代码

# html
<div class="page-tool-item" @click="printPdf">打印</div>
# js
// 打印
const pdfRef = ref();
const printPdf = () => {  pdfRef.value.print(100, "test", true)}

我们发现, 打印功能也可以正常实现

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

ini 复制代码

# html
<div class="page-tool-item" @click="downloadPdf">下载</div>
# js
const downloadPdf = () => {  pdfRef.value.download("test.pdf");}

我们发现下载功能也可以正常下载

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

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

gitee.com/lv-zirui/pd...

今天, 我们就讲解到这里

我们下期见