<!--
|
* @Author: zxq
|
* @Date: 2022-04-08 14:11:32
|
* @LastEditors: zxq
|
* @LastEditTime: 2023-06-07 17:20:33
|
* @Description: Description
|
* @FilePath: \qyp_finlean_plat\src\components\previewPdf.vue
|
-->
|
<template>
|
<div class="preview-page">
|
<el-link type="primary" @click="goSeepDf(url)" style="margin-right:16px;">{{ fileName }}</el-link>
|
<el-button type="text" size="small" :disabled='!url' @click="previewPdf">查 看</el-button>
|
<el-button type="text" size="small" :disabled='!url' @click="handleSeeLoanFile">下 载</el-button>
|
<el-dialog title="查看文件" :visible.sync="imgVisible" class='dialogImageUrlbox' width='60%' top='0' :modal="false" v-if="imgVisible" v-dialogDrag>
|
<div class='op_btn'>
|
<el-button-group class=''>
|
<el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
|
<el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
<el-button type="primary" size="mini" @click="clock">顺时针旋转<i class="el-icon-refresh-right"></i></el-button>
|
<el-button type="primary" size="mini" @click="counterClock">逆时针旋转<i class="el-icon-refresh-left"></i></el-button>
|
<el-button type="primary" icon="el-icon-zoom-in" size="mini" @click="scaleD">放大</el-button>
|
<el-button type="primary" size="mini" @click="scaleX">缩小<i class="el-icon-zoom-out"></i></el-button>
|
</el-button-group>
|
<span class='op_btn_page' style="marginLeft: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</span>
|
</div>
|
<vue-draggable-resizable w="100%" h="100%" >
|
<pdf :page="pageNum" ref="pdf" :src="url" :rotate="pageRotate" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event"></pdf>
|
</vue-draggable-resizable>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
|
import VueDraggableResizable from 'vue-draggable-resizable'
|
import pdf from 'vue-pdf'
|
export default {
|
components: {
|
pdf,VueDraggableResizable
|
},
|
props:{
|
url:'',
|
fileName:""
|
},
|
data() {
|
return {
|
imgVisible:false,
|
pageNum: 1,
|
scale: 100, // 放大
|
pageTotalNum: 1, //总页数
|
loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
|
pageRotate:0,
|
};
|
},
|
created() {
|
|
},
|
mounted() {
|
|
},
|
methods: {
|
// 上一页
|
prePage() {
|
let page = this.pageNum
|
page = page > 1 ? page - 1 : this.pageTotalNum
|
this.pageNum = page
|
},
|
// 下一页
|
nextPage() {
|
let page = this.pageNum
|
page = page < this.pageTotalNum ? page + 1 : 1
|
this.pageNum = page
|
},
|
clock(){
|
this.pageRotate += 90
|
},
|
counterClock(){
|
this.pageRotate -= 90
|
},
|
handleSeeLoanFile(){
|
var a = document.createElement("a"); //页面上创建一个标签
|
var str = window.location.host;
|
if(window.location.hostname== "localhost"){
|
str ='t.finlean.com'
|
}
|
a.setAttribute("href",`https://${str}/${this.url}`);
|
a.setAttribute("target", '_blank');
|
a.click(); //出发a点击事件，下载文件
|
},
|
previewPdf(){
|
this.imgVisible = true;
|
},
|
//放大
|
scaleD() {
|
this.scale += 5;
|
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
|
},
|
//缩小
|
scaleX() {
|
// scale 是百分50%展示 不建议缩放
|
if (this.scale == 50) {
|
return;
|
}
|
this.scale += -5;
|
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
|
},
|
goSeepDf(url){
|
window.open(url);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.preview-page{
|
.el-button--small{
|
padding: 0 !important;
|
}
|
.el-dialog__body{
|
height: 900px!important;
|
overflow: scroll !important;
|
position: relative;
|
}
|
.op_btn{
|
width: 100%;
|
height: 50px;
|
background-color: #fff;
|
position:sticky;
|
top: -30px;
|
left: 30px;
|
z-index: 15000;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
}
|
</style>
|
