vue配合element 实现在线预览pdf文档

最新推荐文章于 2025-06-13 14:34:04 发布

明哥前端

最新推荐文章于 2025-06-13 14:34:04 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js javaScript小技巧文章标签：前端 vue.js es6 npm elementui

本文链接：https://blog.youkuaiyun.com/weixin_55876727/article/details/123865254

Vue.js 同时被 2 个专栏收录

5 篇文章

订阅专栏

javaScript小技巧

3 篇文章

订阅专栏

本文介绍如何在Vue项目中引入并使用vue-pdf插件实现PDF文件的预览功能，包括页面翻动、旋转及错误处理等交互操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用插件

npm install --save vue-pdf

<template>
  <div id="app">
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div>
        <pdf
          class="yansg"
          ref="pdf"
          :src="url"
          :page="pageNum"
          :rotate="pageRotate"
          @progress="loadedRatio = $event"
          @page-loaded="pageLoaded($event)"
          @num-pages="pageTotalNum = $event"
          @error="pdfError($event)"
          @link-clicked="page = $event"
        >
        </pdf>
                <div class="tools">
          <bk-button
            :theme="'default'"
            type="submit"
            :title="'基础按钮'"
            @click.stop="prePage"
            class="mr10"
          >
            上一页</bk-button
          >
          <bk-button
            :theme="'default'"
            type="submit"
            :title="'基础按钮'"
            @click.stop="nextPage"
            class="mr10"
          >
            下一页</bk-button
          >
          <span class="page">{{ pageNum }}/{{ pageTotalNum }}</span>
          <!-- <bk-button
            :theme="'default'"
            type="submit"
            :title="'基础按钮'"
            @click.stop="clock"
            class="mr10"
          >
            顺时针</bk-button
          >
          <bk-button
            :theme="'default'"
            type="submit"
            :title="'基础按钮'"
            @click.stop="counterClock"
            class="mr10"
          >
            逆时针</bk-button
          > -->
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  name: "Home",
  components: {
    pdf,
  },
  data() {
    return {
      url: "/24/61177cf1-61eb-4c81-a864-13ef421a19b1.pdf",
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
      dialogVisible: false,
    };
  },
  mounted: function () {},
  methods: {
    // 上一页函数，
    prePage() {
      var page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },

    // 页面顺时针翻转90度。
    clock() {
      this.pageRotate += 90;
    },
    // 页面逆时针翻转90度。
    counterClock() {
      this.pageRotate -= 90;
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e;
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error);
    },
  },
};
</script>

<style>
.yansg {
  width: 80%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
}
.el-dialog__body{
  padding: 0 10px !important;
  text-align: right;
}
</style>