vue实现pdf在线预览业务

原创

水香木鱼 2022-09-10 06:00:35 ©著作权

文章标签 vue.js javascript 前端加载进度条 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者水香木鱼的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、博主介绍

💒首页:水香木鱼

🛫专栏：后台管理系统

✍简介: 博主:花名 “水香木鱼”，星座"水瓶座一枚"

🔰 格言: 生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。

🔋 充电：相信付出终将会得到回报!

二、笔芯文章

可直接粘贴走，拿去直接用即可。

注意：此方式唯一不足，会出现双滚动条的问题。【如何解决双滚动条的问题呢，欢迎大家在页面底部评论区留言】👇

①安装vue-pdf

npm install -D vue-pdf

②局部使用

import pdf from "vue-pdf";

③源码

<template>
  <div id="container" v-if="ispdf">
    <!-- 右侧按钮区域 -->
    <div class="right-btn">
      <el-button @click="downloadPdf">下载</el-button>
      <!-- 输入页码 -->
      <div class="pageNum">
        <input
          v-model.number="currentPage"
          type="number"
          class="inputNumber"
          @input="inputEvent()"
        />
        <!-- 总页数 -->
        / {{ pageCount }}
      </div>
      <el-button @click="changePdfPage('first')">首页</el-button>
      <!-- 在按钮不符合条件时禁用 -->
      <el-button
        @click="changePdfPage('pre')"
        :style="currentPage === 1 ? 'cursor: not-allowed;' : ''"
      >
        上一页
      </el-button>
      <el-button
        @click="changePdfPage('next')"
        :style="currentPage === pageCount ? 'cursor: not-allowed;' : ''"
      >
        下一页
      </el-button>
      <el-button @click="changePdfPage('last')">尾页</el-button>
    </div>

    <div class="pdfArea">
      <!-- :src：需要展示的pdf地址 
           :page：当前展示的pdf页码
           :num-pages:文件总页码
           :progress:加载时展示el-progress 
           :page-loaded：一开始加载的页面
           :loaded:加载事件
           :link-clicked:切换页面 -->
      <pdf
        :src="src"
        ref="pdf"
        v-show="loadedRatio === 1"
        :page="currentPage"
        @num-pages="pageCount = $event"
        @progress="loadedRatio = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
        @link-clicked="currentPage = $event"
        style="display: inline-block; width: 100%"
        id="pdfID"
      ></pdf>
    </div>
    <!-- 加载未完成时，展示进度条组件并计算进度 -->
    <div class="progress" v-show="loadedRatio !== 1">
      <el-progress
        type="circle"
        :width="70"
        color="#53a7ff"
        :percentage="Math.floor(loadedRatio * 100)"
      ></el-progress>
      <br />
      <!-- 加载提示语 -->
      <span>{{ remindShow }}</span>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  computed: {},
  created() {
    // this.src = pdf.createLoadingTask(this.src);
  },
  destroyed() {
    // 在页面销毁时记得清空 setInterval
    clearInterval(this.intervalID);
  },
  mounted() {
    // 更改 loading 文字
    this.intervalID = setInterval(() => {
      this.remindShow === this.remindText.refresh
        ? (this.remindShow = this.remindText.loading)
        : (this.remindShow = this.remindText.refresh);
    }, 4000);
  },
  data() {
    return {
      // 需要展示的pdf的地址
      src: "./static/react.pdf",
      // 后端返回的真的需要预览的地址
      pdfUrl: "./static/react.pdf",
      Item: "",
      ispdf: true,
      // ----- loading -----
      remindText: {
        loading: "加载文件中，文件较大请耐心等待...",
        refresh: "若卡住不动，可刷新页面重新加载...",
      },
      remindShow: "加载文件中，文件较大请耐心等待...",
      intervalID: "",
      // 当前页数
      currentPage: 0,
      // 总页数
      pageCount: 0,
      // 加载进度
      loadedRatio: 0,
    };
  },
  computed: {},
  methods: {
    // 页面回到顶部
    toTop() {
      document.getElementById("container").scrollTop = 0; //id.scrollTop而不是id.style.scrollTop
    },
    // 输入页码时校验
    inputEvent() {
      if (this.currentPage > this.pageCount) {
        // 1. 大于max(总页数)
        this.currentPage = this.pageCount;
      } else if (this.currentPage < 1) {
        // 2. 小于min（最小页数）
        this.currentPage = 1;
      }
    },
    // 切换页数
    changePdfPage(val) {
      // val的值分别为：first、pre、next、last，分别代表首页、上一页、下一页、尾页
      if (val === "pre" && this.currentPage > 1) {
        this.currentPage--;
        // 切换后页面回到顶部
        this.toTop();
      } else if (val === "next" && this.currentPage < this.pageCount) {
        this.currentPage++;
        this.toTop();
      } else if (val === "first") {
        this.currentPage = 1;
        this.toTop();
      } else if (val === "last" && this.currentPage < this.pageCount) {
        this.currentPage = this.pageCount;
        this.toTop();
      }
    },
    // pdf加载时
    loadPdfHandler(e) {
      // 加载的时候先加载第一页
      this.currentPage = 1;
    },
    // pdf下载
    downloadPdf() {
      var url = this.pdfUrl;
      var tempLink = document.createElement("a");
      tempLink.style.display = "none";
      tempLink.href = url;
      // tempLink.href = "#";
      // 获取文件名
      var numIndex = url.lastIndexOf("/") + 1;
      var pdfName = url.substring(numIndex);
      tempLink.setAttribute("download", `${pdfName}.pdf`);
      if (typeof tempLink.download === "undefined") {
        tempLink.setAttribute("target", "_blank");
      }
      document.body.appendChild(tempLink);
      tempLink.click();
      document.body.removeChild(tempLink);
    },
  },
  // props: ["src"],
};
</script>

<style lang="less" scoped>
@remvw:1920 /100vw;
#container {
  overflow: auto;
  height: 800 / @remvw;
  font-family: PingFang SC;
  width: 100%;
  height: 1080 / @remvw;
  display: flex;
  justify-content: center;
  position: relative;
}

/* 右侧功能按钮区 */
.right-btn {
  position: fixed;
  right: 2%;
  bottom: 35%;
  width: 120 / @remvw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 99;
}

.pdfArea {
  width: 85%;
}

//页码
.pageNum {
  margin: 10 / @remvw 0;
  font-size: 18 / @remvw;
}
/*在谷歌下移除input[number]的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
/*在firefox下移除input[number]的上下箭头*/
input[type="number"] {
  -moz-appearance: textfield;
}

.inputNumber {
  border-radius: 8 / @remvw;
  border: 1 / @remvw solid #999999;
  height: 35 / @remvw;
  font-size: 18 / @remvw;
  width: 60 / @remvw;
  text-align: center;
}
.inputNumber:focus {
  border: 1 / @remvw solid #00aeff;
  background-color: rgba(18, 163, 230, 0.096);
  outline: none;
  transition: 0.2s;
}

::v-deep .el-button {
  width: 140 / @remvw;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
//hover效果
::v-deep .el-button:hover {
  width: 140 / @remvw;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #1c57e0;
  color: #1c57e0;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

//进度条
.progress {
  position: absolute;
  right: 50%;
  top: 50%;
  text-align: center;
}
.progress > span {
  color: #199edb;
  font-size: 14 / @remvw;
}
</style>