用vue.pdf实现弹窗预览 ,不过一次只能预览一页,什么功能都有的
效果图:
页面代码,页面功能按钮,以及pdf内容显示
<template>
<div class="pdf">
<div class="pdf_footer">
<div class="info">
<div>当前页数/总页数:{{ pageNum }}/{{ numPages }}</div>
</div>
<div class="operate">
<div class="btn" @click.stop="clock">顺时针</div>
<div class="btn" @click.stop="counterClock">逆时针</div>
<div class="btn" @click.stop="prePage">上一页</div>
<div class="btn" @click.stop="nextPage">下一页</div>
<div class="btn" @click="scaleD">放大</div>
<div class="btn" @click="scaleX">缩小</div>
<div class="btn" @click="downLoadFile(fileSrc, 'pdf文件')">下载</div>
</div>
</div>
<div class="show" id="lookPdf">
<pdf ref="pdf" :rotate="pageRotate" :src="src" :page="pageNum" style="display: inline-block; width: 100%;"></pdf>
</div>
</div>
</template>
js代码,把文件转为文件流的形式,获取pdf内容,页码,按钮功能等实现,
<script>
import pdf from "vue-pdf";
import {
workLook
} from "@/api/system/notice";
export default {
name: "AppPdf",
components: {
pdf,
},
props: {
fileSrc: {
type: String,
require: true,
default: "",
},
},
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
src: "",
numPages: undefined,
pageNum: 1,
// 加载进度
loadedRatio: 0,
// 页面加载完成
curPageNum: 0,
// 放大系数 默认百分百
scale: 80,
// 旋转角度 ‘90’的倍数才有效
pageRotate: 0,
};
},
mounted() {
this.get()
// this.loadUPDf(this.fileSrc);
},
methods: {
get() {
workLook({
fileName: this.fileSrc,
}).then((res) => {
if (res) {
var fileName = this.fileSrc.split(".");
this.src =
fileName[0].indexOf("/dev-api") !== -1 ?
fileName[0] + ".pdf" :
this.baseUrl + fileName[0] + ".pdf";
console.log('dddddddd', this.src);
this.loadUPDf(this.src)
// window.open( this.pdf);
} else {
this.msgError("预览失败");
}
});
},
loadUPDf(url) {
console.log(url);
this.src = pdf.createLoadingTask(url);
this.src.promise.then((pdf) => {
this.numPages = pdf.numPages; //获取pdf页数
this.$nextTick(() => {
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
setTimeout(() => {
let message = document.getElementById("lookPdf")
message.scrollTop = 100
}, 50);
})
});
},
//下载PDF
fileDownload(data, fileName) {
window.location.href = data;
},
//放大
scaleD() {
this.scale += 5;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
// this.$refs.pdf.$el.style.marginLeft = 'atuo'
},
//缩小
scaleX() {
// scale 是百分百展示 不建议缩放
// if (this.scale == 100) {
// return;
// }
this.scale += -5;
console.log(parseInt(this.scale) + "%");
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
// this.$refs.pdf.$el.style.marginLeft = 'atuo'
},
// 切换上一页
prePage() {
var p = this.pageNum;
p = p > 1 ? p - 1 : this.numPages;
this.pageNum = p;
// let message = document.getElementById("onePage")
let message = document.getElementById("lookPdf")
message.scrollTop = 30
},
// 切换下一页
nextPage() {
var p = this.pageNum;
p = p < this.numPages ? p + 1 : 1;
this.pageNum = p;
// let message = document.getElementById("onePage")
let message = document.getElementById("lookPdf")
message.scrollTop = 30
},
// 顺时针选中角度
clock() {
this.pageRotate += 90;
},
// 逆时针旋转角度
counterClock() {
this.pageRotate -= 90;
},
//很重要,父组件关闭前,清空子组件的值,不然第二次预览打开空白
resetPageNum() {
this.numPages = undefined;
},
},
};
</script>
样式
<style lang="scss" scoped>
.pdf {
.show {
overflow: auto;
margin: auto;
max-width: 90%;
height: 70vh;
max-height: 580px;
display: flex;
// align-items: center;
justify-content: center;
}
}
.pdf_footer {
position: sticky;
bottom: 0;
left: 0;
right: 0;
padding: 10px 0;
background-color: rgba(255, 255, 255, 0.5);
.info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
div {
width: 30%;
}
}
.operate {
margin: 10px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
div {
// width: 80px;
text-align: center;
font-size: 15px;
}
.btn {
cursor: pointer;
margin: 5px 10px;
width: 120px;
border-radius: 10px;
padding: 5px;
color: #fff;
background-color: #3dcbbc;
}
}
}
</style>