【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>
相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端14 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧14 小时前
Promise 的使用
前端·javascript
用户516816614584116 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅16 小时前
JavaScript 作用域
前端·javascript
前端缘梦16 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试