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

【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;

  // 加载进度 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>

原文地址：https://blog.csdn.net/qq_61950936/article/details/143501746

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！