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

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

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

js 复制代码
npm i vue-pdf

或者

js 复制代码
yarn add vue-pdf

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

js 复制代码
/**
* @描述: 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;

  // 加载进度 d
  loadedRatio = 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>
相关推荐
over69711 分钟前
JavaScript恋爱物语:当代码学会送花,对象字面量也能当红娘!
javascript
写不来代码的草莓熊35 分钟前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
三小河43 分钟前
封装 classNames:让 Tailwindcss 类名处理更优雅
前端·javascript
起这个名字1 小时前
ESLint 导入语句的分组排序
前端·javascript
Lazy_zheng1 小时前
一场“数据海啸”,让我重新认识了 requestAnimationFrame
前端·javascript·vue.js
crary,记忆1 小时前
MFE: React + Angular 混合demo
前端·javascript·学习·react.js·angular·angular.js
Asort1 小时前
JavaScript设计模式(十七)——中介者模式 (Mediator):解耦复杂交互的艺术与实践
前端·javascript·设计模式
linda26181 小时前
String() 和 .toString()的区别
前端·javascript·面试
拖拉斯旋风1 小时前
零基础学JavaScript,简单学个设计模式吧
javascript
wyzqhhhh1 小时前
webpack
前端·javascript·webpack