【vue-pdf】简单封装pdf预览组件

在Vue中使用vue-pdf来展示PDF文件，首先需要安装vue-pdf：

npm i vue-pdf

或者

yarn add vue-pdf

然后在Vue组件中引入并使用vue-pdf：

/**
* @描述: pdf预览组件
* @作者: xingyue
* @创建时间: 2024-11-05 14:27:19
*/
<template><a-layout><a-layout-header class="header"><div class="flex justify-between"><div><a-button @click.stop="clock" class="xf-margin-right-sm">顺时针</a-button><a-button @click.stop="counterClock" class="xf-margin-right-sm">逆时针</a-button><a-button @click="$refs.pdf.print()" icon="printer" class="xf-margin-right-sm">打印</a-button><!--          <a-button icon="plus" @click="enlarge">放大</a-button>--><!--          <a-button icon="minus" @click="reduce">缩小</a-button>--></div><div><a-button @click.stop="prePage">上一页</a-button><span class="text-white xf-margin-lr">{{ pageNum }}/{{ pageTotalNum }}</span><a-button @click.stop="nextPage">下一页</a-button></div></div></a-layout-header><a-layout-content style="max-height: calc(100vh - 275px);overflow: auto;"><pdf ref="pdf":src="pdfUrl":page="pageNum":rotate="pageRotate"@progress="loadedRatio = $event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum=$event"@error="pdfError($event)"@link-clicked="page = $event"></pdf></a-layout-content></a-layout>
</template><script lang="ts">
import {Vue, Component, Prop, Watch,
} from 'vue-property-decorator';import pdf from 'vue-pdf';@Component({name: 'GPdfPreview',components: { pdf },
})
export default class GPdfPreview extends Vue {@Prop({type: String,default: '',}) pdfUrl: string | undefined;pageNum = 1;pageTotalNum = 1;pageRotate = 0;// 加载进度 dloadedRatio = 0;curPageNum = 0;// 缩放系数// scale = 100;prePage() {let p = this.pageNum;p = p > 1 ? p - 1 : this.pageTotalNum;this.pageNum = p;}nextPage() {let p = this.pageNum;p = p < this.pageTotalNum ? p + 1 : 1;this.pageNum = p;}clock() {this.pageRotate += 90;}counterClock() {this.pageRotate -= 90;}pageLoaded(e) {this.curPageNum = e;}pdfError(error) {console.error(error);}// // 放大// enlarge() {//   this.scale += 5;//   // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";//   debugger;//   this.$refs.pdf.$el.style.width = `${parseInt(this.scale)}%`;// }//// // 缩小// reduce() {//   if (this.scale == 100) {//     return;//   }//   this.scale += -5;//   this.$refs.pdf.$el.style.width = `${parseInt(this.scale)}%`;// }
}
</script><style lang="less"></style>