-
vue-pdf在vue框架中的使用
在components目录下新建PdfViewer/index.vue
vue-pdf版本为4.3.0
- <div :id="containerId" v-if="hasProps" class="container">
- <div class="right-btn">
- <div class="pageNum">
- <input v-model.number="currentPage" type="number" class="inputNumber" @input="inputEvent()"> / {{pageCount}}
- div>
- <div @click="changePdfPage('first')" class="turn">首页div>
- <div @click="changePdfPage('pre')" class="turn-btn" :style="currentPage===1?'cursor: not-allowed;':''">上一页div>
- <div @click="changePdfPage('next')" class="turn-btn" :style="currentPage===pageCount?'cursor: not-allowed;':''">下一页div>
- <div @click="changePdfPage('last')" class="turn">尾页div>
- <div @click="scaleUp()" class="turn-btn">放大div>
- <div @click="scaleDown()" class="turn-btn">缩小div>
- <div @click="rotate()" class="turn-btn">旋转div>
- <div @click="downPDF()" class="turn" v-if="isShowDownloadBtn">下载div>
- div>
- <div class="pdfArea">
- <pdf :src="src" :ref="pdfRef" :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%" />
- div>
- div>
- template>
- <script>
- import pdf from 'vue-pdf'
- export default {
- name: "pdfViewer",
- props: {
- // src pdf资源路径
- src: {
- type: String,
- default: () => {
- return null;
- },
- },
- // 该pdf-viewer组件唯一id
- containerId: {
- type: String,
- default: () => {
- return null;
- },
- },
- // 该pdf-viewer组件唯一ref
- pdfRef: {
- type: String,
- default: () => {
- return null;
- },
- },
- // 是否展示下载按钮
- isShowDownloadBtn: {
- type: Boolean,
- default: () => {
- return false;
- }
- },
- },
- components: {
- pdf
- },
- computed: {
- hasProps() {
- return this.src && this.containerId && this.pdfRef;
- }
- },
- created() { },
- mounted() {
- this.$nextTick(() => {
- this.prohibit();
- })
- },
- data() {
- return {
- scale: 100, // 开始的时候默认和容器一样大即宽高都是100%
- rotation: 0, // 旋转角度
- currentPage: 0, // 当前页数
- pageCount: 0, // 总页数
- }
- },
- methods: {
- rotate() {
- this.rotation += 90;
- this.$refs[this.pdfRef].$el.style.transform = `rotate(${this.rotation}deg)`;
- console.log(`当前旋转角度: ${this.rotation}°`);
- },
- // 页面回到顶部
- toTop() {
- document.getElementById(this.containerId).scrollTop = 0
- },
- // 输入页码时校验
- inputEvent() {
- if (this.currentPage > this.pageCount) {
- // 1. 大于max
- this.currentPage = this.pageCount
- } else if (this.currentPage < 1) {
- // 2. 小于min
- this.currentPage = 1
- }
- },
- // 切换页数
- changePdfPage(val) {
- 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()
- }
- this.$refs[this.pdfRef].$el.style.transform = `rotate(0deg)`;
- this.rotation = 0;
- },
- // pdf加载时
- loadPdfHandler(e) {
- // 加载的时候先加载第一页
- // console.log(e);
- this.currentPage = 1
- },
- // 禁用鼠标右击、F12 来禁止打印和打开调试工具
- prohibit() {
- let node = document.querySelector(`#${this.containerId}`);
- node.oncontextmenu = function () {
- return false
- }
- node.onkeydown = function (e) {
- console.log("禁用", e);
- if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e.keyCode === 117)) {
- return false
- }
- if (e.keyCode === 18 || e.keyCode === 123) {
- return false
- }
- }
- },
- //放大
- scaleUp() {
- if (this.scale == 300) {
- return;
- }
- this.scale += 5;
- this.$refs[this.pdfRef].$el.style.width = parseInt(this.scale) + "%";
- this.$refs[this.pdfRef].$el.style.height = parseInt(this.scale) + "%";
- console.log(`当前缩放倍数: ${this.scale}%`);
- },
- //缩小
- scaleDown() {
- if (this.scale == 30) {
- return;
- }
- this.scale += -5;
- this.$refs[this.pdfRef].$el.style.width = parseInt(this.scale) + "%";
- this.$refs[this.pdfRef].$el.style.height = parseInt(this.scale) + "%";
- console.log(`当前缩放倍数: ${this.scale}%`);
- },
- // 下载
- downPDF() { // 下载 pdf
- var url = this.src
- var tempLink = document.createElement("a");
- tempLink.style.display = "none";
- tempLink.href = url;
- tempLink.setAttribute("download", 'XXX.pdf');
- if (typeof tempLink.download === "undefined") {
- tempLink.setAttribute("target", "_blank");
- }
- document.body.appendChild(tempLink);
- tempLink.click();
- document.body.removeChild(tempLink);
- },
- }
- }
- script>
- <style lang="scss" scoped>
- #container {
- overflow: auto;
- height: 800px;
- font-family: PingFang SC;
- width: 100%;
- display: flex;
- /* justify-content: center; */
- position: relative;
- }
- .container {
- position: relative;
- }
- /* 右侧功能按钮区 */
- .right-btn {
- // position: fixed;
- position: absolute;
- right: 10%;
- // bottom: 15%;
- top: 5%;
- width: 120px;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- z-index: 99;
- user-select: none;
- }
- .pdfArea {
- width: 80%;
- }
- /* ------------------- 输入页码 ------------------- */
- .pageNum {
- margin: 10px 0;
- font-size: 18px;
- }
- /*在谷歌下移除input[number]的上下箭头*/
- input::-webkit-outer-spin-button,
- input::-webkit-inner-spin-button {
- -webkit-appearance: none !important;
- margin: 0;
- }
- .inputNumber {
- border-radius: 8px;
- border: 1px solid #999999;
- height: 35px;
- font-size: 18px;
- width: 60px;
- text-align: center;
- }
- .inputNumber:focus {
- border: 1px solid #00aeff;
- background-color: rgba(18, 163, 230, 0.096);
- outline: none;
- transition: 0.2s;
- }
- /* ------------------- 切换页码 ------------------- */
- .turn {
- background-color: #888888;
- opacity: 0.7;
- color: #ffffff;
- height: 70px;
- width: 70px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 5px 0;
- }
- .turn-btn {
- background-color: #000000;
- opacity: 0.6;
- color: #ffffff;
- height: 70px;
- width: 70px;
- border-radius: 50%;
- margin: 5px 0;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .turn-btn:hover,
- .turn:hover {
- transition: 0.3s;
- opacity: 0.5;
- cursor: pointer;
- }
- /* ------------------- 进度条 ------------------- */
- .progress {
- position: absolute;
- right: 50%;
- top: 50%;
- text-align: center;
- }
- .progress > span {
- color: #199edb;
- font-size: 14px;
- }
- style>
main.js中引用，全局注册
- import PdfViewer from "@/components/PdfViewer"
- Vue.component('PdfViewer', PdfViewer)
在项目中使用
- <el-dialog>
- <PdfViewer :src="pdf地址" containerId="id，自定义" pdfRef="ref，自定义" :isShowDownloadBtn="布尔值，是否开启下载功能">PdfViewer>
- el-dialog>
使用效果
-
相关阅读:
给小白的 PostgreSQL 容器化部署教程（上）
leetcode算法题--生成特殊数字的最少操作
OPENCV简单阈值中的参数详解
牛客网刷题篇
【已解决】npm install卡主不动的情况
clickhouse远程访问Oracle 11g数据库（clickhouse-jdbc-bridge）
ESP32网络开发实例-Web控制按钮与硬件状态同步
Modbus入门
uniapp IOS上架AppStore因打开相机、相册提示不明确被拒
盲打键盘的正确指法指南
- 原文地址：https://blog.csdn.net/RumbleWx/article/details/134457854
