【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>
相关推荐
Jenlybein7 分钟前
学完 Vue3 记不牢?快来看这篇精炼Vue3笔记复习一下 [ Route 篇 ]
前端·vue.js
页面魔术10 分钟前
[译]专访尤雨溪: 2025年有什么计划?
前端·vue.js·vite
Enti7c12 分钟前
定时器的定义
javascript
m0_555762901 小时前
单例模式(Singleton Pattern)
开发语言·javascript·单例模式
糯糯机器1 小时前
天啦噜,Vue生命周期加上async并不会阻塞子组件的加载
vue.js
ElasticPDF_新国产PDF编辑器2 小时前
Vue 项目 PDF 批注插件库在线版 API 示例教程
javascript
yufei-coder2 小时前
配置Next.js环境 使用vscode
开发语言·javascript·vscode·next.js
aiweker2 小时前
Python PDF解析利器:pdfplumber | AI应用开发
python·pdf
小old弟2 小时前
vue3模板中ref的实现原理
前端·vue.js
阿白的白日梦2 小时前
JSX 元素隐式具有类型 "any",因为不存在接口 "JSX.IntrinsicElements"。ts 无法使用 JSX,除非提供了 "--js
前端·javascript·typescript