<template>
<div class="FileDeteil">
<el-dialog
:title="''"
:lock-scroll="false"
:append-to-body="true"
:visible.sync="dialogVisible"
width="100%"
top="0"
:fullscreen="true"
@close="closeDialog"
:show-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<div class="content">
<div style="display: flex">
<div class="left" @click="imgOrPdfLeft"></div>
<el-select
class="Select"
v-model="fileHeading"
value-key="id"
@change="changeSelect"
placeholder="请选择"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.innerFileName"
:value="item"
>
</el-option>
</el-select>
<div class="right" @click="imgOrPdfright"></div>
</div>
<div class="pdfShow" v-show="showPDF">
<div class="tools">
<!-- 上一页 -->
<el-button class="button" type="text" @click="changePdfPage(0)">
<i class="el-icon-arrow-left"></i>
</el-button>
<!-- 页数 -->
<p class="total">
<b>{
{
currentPage }}</b
> /
<b>{
{
pageCount }}</b>
</p>
<!-- 下一页 -->
<el-button
class="button elright"
type="text"
@click="changePdfPage(1)"
>
<i class="el-icon-arrow-right"></i>
</el-button>
<!-- 放大 -->
<div class="scaleD" @click="scaleD()">
<img src="../../../assets/login/组 3217.png" alt="" />
<span>放大</span>
</div>
<!-- 缩小 -->
<div class="scaleX" @click="scaleX()">
<img src="../../../assets/login/组 3216.png" alt="" />
<span>缩小</span>
</div>
<!-- 旋转 -->
<div class="counterClock" @click="counterClock()">
<img src="../../../assets/login/组 3215.png" alt="" />
<span>旋转</span>
</div>
</div>
<div class="main">
<pdf
ref="pdf"
id="pdf"
:src="src"
:page="currentPage"
:rotate="pageRotate"
@num-pages="pageCount = $event"
@page-loaded="currentPage = $event"
@loaded="loadPdfHandler"
></pdf>
</div>
</div>
<el-image
ref="imgDiv"
id="image"
class="elImage"
:src="mainImgUrl"
fit="contain"
v-show="showImg"
:preview-src-list="srcList"
>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
</el-dialog>
</div>
</template>
<script>
import pdf from "vue-pdf";
export default {
name: "FileDeteil",
components: {
pdf },
props: {
dialogStyle: String,
getFileId: String
},
data() {
return {
mapImg: "",
windowHeight: window.innerHeight,
pdfh5: null,
windowHeight: window.innerHeight,
dialogVisible: false,
imgActiveIndex: 0, // 当前移动图片的索引值
imgActiveIndex: 0, // 当前移动图片的索引值
imgDistance: 0, // 移动的距离
allDistance: 0, // 总移动距离
value: 1,
src: "",
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
scale: 100,
pageRotate: 0,
mainImgUrl: "",
showPDF: false, // 是否显示pdf
showImg: false, // 图片是否展示
srcList: [],
options: [],
fileHeading: ""
};
},
methods: {
// 文件详情左箭头
imgOrPdfLeft() {
if (this.imgActiveIndex > 0) {
this.imgActiveIndex--; //
this.options.forEach((item, index) => {
if (this.imgActiveIndex === index) {
let type = item.innerFileName.substring(
item.innerFileName.lastIndexOf(".") + 1
);
if (type === "pdf") {
this.previewInnerFilePDF(item);
} else {
this.previewInnerFile(item);
}
this.fileHeading = item.innerFileName;
}
});
}
},
// 文件详情右箭头
imgOrPdfright() {
// debugger;
if (this.imgActiveIndex < this.options.length - 1) {
this.imgActiveIndex++;
this.options.forEach((item, index) => {
if (this.imgActiveIndex === index) {
let type = item.innerFileName.substring(
item.innerFileName.lastIndexOf(".") + 1
);
if (type === "pdf") {
this.previewInnerFilePDF(item);
} else {
this.previewInnerFile(item);
}
this.fileHeading = item.innerFileName;
}
});
}
// else if (this.imgActiveIndex === this.options.length - 1) {
// // 到达最后一张图片，再点击跳转回第一张
// this.imgActiveIndex = 0;
// let type = this.options[0].innerFileName.substring(
// this.options[0].innerFileName.lastIndexOf(".") + 1
// );
// if (type === "pdf") {
// this.previewInnerFilePDF(this.options[0]);
// } else {
// this.previewInnerFile(this.options[0]);
// }
// this.fileHeading = this.options[0].innerFileName;
// var index = 0;
// const temp = window.setInterval(() => {
// // 利用定时器实现图片左右移动的动画效果
// if (index < Math.abs(this.allDistance / 2)) {
// // 取绝对值再除
// this.imgDistance += 2; // 每次向左移动的距离 (移动总距离为48*this.imgDistance)
// index++;
// return;
// } else {
// window.clearInterval(temp); // 移动完清除定时器
// }
// }, 1);
// }
},
// pdf加载时
loadPdfHandler() {
this.value = this.currentPage = 1; // 加载的时候先加载第一页
},
// 改变PDF页码,val 传过来区分上一页下一页的值,0 上一页,1 下一页
changePdfPage(val) {
if (val === 0 && this.currentPage > 1) {
this.currentPage--;
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++;
}
this.value = this.currentPage;
this.isExit = false;
},
// 放大
scaleD() {
this.scale += 5;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
},
// 缩小
scaleX() {
if (this.scale === 100) {
return;
}
this.scale += -5;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
},
// 逆时针
counterClock() {
this.pageRotate -= 90;
},
// 获取文件详情
getInnerFiles(file, options) {
this.dialogVisible = true;
this.options = options;
this.fileHeading = file.innerFileName;
let type = this.fileHeading.substring(
this.fileHeading.lastIndexOf(".") + 1
);
if (type === "pdf") {
this.previewInnerFilePDF(file);
} else {
this.previewInnerFile(file);
}
},
// 图片展示
previewInnerFile(data) {
const loading = this.$loading({
lock: true,
text: "拼命加载中",
customClass: "create-isLoading",
spinner: "el-icon-loading",
background: "transparent"
});
this.srcList = [];
this.mainImgUrl = "";
this.$http.login.previewInnerFile(data).then(res => {
if (res.status === 200) {
this.showImg = true;
this.showPDF = false;
let blob = new Blob([res.data], {
type: "image/jpeg" });
const imageUrl = URL.createObjectURL(blob);
this.mainImgUrl = imageUrl;
this.srcList.push(imageUrl);
setTimeout(function () {
loading.close();
}, 2000);
}
});
},
// pdf预览
previewInnerFilePDF(obj) {
const loading = this.$loading({
lock: true,
text: "拼命加载中",
customClass: "create-isLoading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
this.currentPage = 1;
this.$http.login.previewInnerFile(obj).then(res => {
if (res.status === 200) {
loading.close();
this.showImg = false;
this.showPDF = true;
const type = res.data.type;
if (type === "application/pdf") {
var binaryData = [];
binaryData.push(res.data);
// 记得一定要设置application的类型
this.src = window.URL.createObjectURL(
new Blob(binaryData, {
type: "application/pdf;charset=utf-8"
})
);
// this.pdfh5 = new Pdfh5("#demo", {
// pdfurl: url
// });
}
}
});
},
changeSelect(val) {
let type = val.innerFileName.substring(
val.innerFileName.lastIndexOf(".") + 1
);
if (type === "pdf") {
this.previewInnerFilePDF(val);
} else {
this.previewInnerFile(val);
}
},
closeDialog() {
const loading = this.$loading({
background: "rgba(0, 0, 0, 0.7)"
});
this.currentPage = 1;
this.src = "";
this.srcList = [];
this.mainImgUrl = "";
this.$emit("closeDialog");
loading.close();
}
},
created() {
},
mounted() {
}
};
</script>
<style lang="less" scoped>
.btn {
margin: 20px 0px;
}
.main {
// border: 2px solid #dcdfe6;
width: 100%;
height: 100%;
margin-top: 30px;
overflow: auto;
}
/deep/ .annotationLayer {
height: 100%;
width: 100%;
}
.tools {
display: flex;
justify-content: center;
align-items: center;
}
.button {
color: #fff;
width: 26px;
height: 38px;
border: 1px solid #ffffff;
border-radius: 0;
}
.elright {
margin-right: 20px;
}
.scaleD,
.counterClock,
.scaleX {
width: 80px;
height: 38px;
margin-left: 10px;
border: 1px solid #ffffff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
img {
width: 16px;
height: 16px;
}
span {
font-size: 16px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #ffffff;
margin-left: 5px;
}
}
.total {
width: 80px;
font-size: 22px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.main::-webkit-scrollbar {
width: 6px;
}
/* 修改 滚动条的 下面 的 样式 */
.main::-webkit-scrollbar-track {
background-color: white;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
/* 修改 滑块 */
.main::-webkit-scrollbar-thumb {
background-color: #dcdfe6;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.Select {
width: 530px;
margin: 0 20px;
/deep/ .el-input__inner {
background: transparent;
color: #fff;
border: 1px solid #ffffff;
}
}
/deep/ .el-dialog__headerbtn {
top: 52px;
right: 83px;
}
.elImage {
width: 100%;
height: 100%;
margin-top: 30px;
}
.pdfShow {
width: 70%;
height: 97%;
display: flex;
flex-direction: column;
align-items: center;
}
.pdfAndImg {
width: 100%;
height: 100%;
margin-top: 40px;
text-align: center;
}
.left {
width: 25px;
height: 38px;
background: url("../../../assets/login/组 3213.png");
background-size: 100% 100%;
cursor: pointer;
}
.right {
width: 25px;
height: 38px;
background: url("../../../assets/login/组 3214.png");
background-size: 100% 100%;
cursor: pointer;
}
.content {
display: flex;
padding-top: 60px;
height: 100%;
flex-direction: column;
align-items: center;
}
/deep/ .el-dialog__header {
height: 0px;
padding: 0;
}
/deep/ .el-dialog__title {
color: #fff;
font-size: 20px;
}
/deep/ .el-dialog__body {
padding: 20px;
height: 100%;
}
/deep/ .el-dialog__close {
position: relative;
&::before {
position: absolute;
content: "";
width: 38px;
height: 38px;
left: -65px;
background: url("../../../assets/login/组 3212.png");
background-size: 100% 100%;
}
}
.create-isLoading {
.el-loading-spinner {
width: 260px;
height: 260px;
top: 50%;
left: 50%;
transform: translate(-130px, -130px);
background: url("../../../assets/login/2.gif");
background-size: 100% 100%;
.el-icon-loading {
display: none;
}
.el-loading-text {
display: none;
}
}
}
/deep/ .el-dialog {
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
</style>
Effect:
