<template>
|
<div class="imgbox">
|
<img
|
ref="image"
|
:onLoad="initFun"
|
:onDragStart="dragStart"
|
:onWheel="handleScroll"
|
:src="currentPageSrc"
|
alt=""
|
/>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "pdf_view",
|
props: {
|
md5: {
|
type: String,
|
},
|
title: {
|
type: String,
|
},
|
},
|
data() {
|
return {
|
currentPageSrc: "",
|
fileLoading: false,
|
visible: true,
|
close: null,
|
currentPage: 1,
|
totalPage: 1,
|
rcViewerOptions: {
|
// inline: true
|
},
|
zoom: 1,
|
catalogVisible: false,
|
tocData: [],
|
generateList: [],
|
expandedKeys: [],
|
searchValue: "",
|
autoExpandParent: true,
|
drawerSize: "default",
|
};
|
},
|
watch: {
|
md5: {
|
handler(newVal, oldVal) {
|
if (newVal) {
|
this.getFileInfo();
|
}
|
},
|
},
|
},
|
created(){
|
this.getFileInfo();
|
},
|
methods: {
|
initFun() {
|
// 初始化拖拽
|
let image = this.refs.image;
|
let imageBox = this.refs.imageBox;
|
let initLeft = imageBox.offsetWidth / 2 - image.offsetWidth / 2;
|
image.style.left = initLeft + "px";
|
image.style.top = 0 + "px";
|
let canMove = false;
|
let offsetX, offsetY, oldLeft, oldTop;
|
image.onmousedown = function (e) {
|
canMove = true;
|
offsetX = e.x;
|
offsetY = e.y;
|
oldLeft = parseFloat(image.style.left.split("px")[0]);
|
oldTop = parseFloat(image.style.top.split("px")[0]);
|
};
|
imageBox.onmousemove = function (e) {
|
if (canMove == true) {
|
let left = e.clientX - offsetX;
|
let top = e.clientY - offsetY;
|
image.style.left = oldLeft + left + "px";
|
image.style.top = oldTop + top + "px";
|
}
|
};
|
image.onmouseup = function () {
|
canMove = false;
|
};
|
this.fileLoading = false;
|
},
|
dragStart(e) {
|
if (e && e.preventDefault) {
|
e.preventDefault();
|
} else {
|
window.event.returnValue = false;
|
}
|
},
|
handleScroll(e) {
|
if (e.nativeEvent.deltaY <= 0) {
|
if (this.zoom < 3) {
|
let newZoom = this.zoom + 0.1;
|
this.zoom = newZoom;
|
this.refs.image.style.height = newZoom * 100 + "%";
|
}
|
} else {
|
if (this.zoom > 0.5) {
|
let newZoom = this.zoom - 0.1;
|
this.zoom = newZoom;
|
this.refs.image.style.height = newZoom * 100 + "%";
|
}
|
}
|
},
|
getFileInfo() {
|
// 获取目录
|
// this.MG.file
|
// .GetPdfToc({ md5: this.md5 })
|
// .then((tocRes) => {
|
// console.log(tocRes, "3232---3232----32");
|
// if (tocRes && tocRes.length && tocRes[0]) {
|
// let tocDataList = [];
|
// for (let i = 0; i < tocRes.length; i++) {
|
// const tacItem = tocRes[i];
|
// if (tacItem) {
|
// let itemInfo = tacItem.split(" ");
|
// let obj = {
|
// page: itemInfo[0],
|
// level: itemInfo[1],
|
// title: itemInfo[2] + " ( " + itemInfo[0] + " )",
|
// children: [],
|
// };
|
// tocDataList.push(obj);
|
// }
|
// }
|
// let cLevel = 0;
|
// let tocData = [];
|
// let generateList = []; // 用于检索的Data
|
// let memorySrc = null;
|
// for (let j = 0; j < tocDataList.length; j++) {
|
// const tocItem = tocDataList[j];
|
// if (tocItem.level == 0) {
|
// tocItem.key = tocData.length;
|
// tocData.push(tocItem);
|
// generateList.push(tocItem);
|
// cLevel = 0;
|
// } else if (tocItem.level == cLevel) {
|
// tocItem.key = memorySrc.key + "-" + memorySrc.children.length;
|
// memorySrc.children.push(tocItem);
|
// generateList.push(tocItem);
|
// } else if (tocItem.level > cLevel) {
|
// memorySrc = this.handleDocData(tocData, cLevel);
|
// tocItem.key = memorySrc.key + "-" + memorySrc.children.length;
|
// memorySrc.children.push(tocItem);
|
// generateList.push(tocItem);
|
// cLevel = tocItem.level;
|
// } else if (tocItem.level < cLevel) {
|
// memorySrc = this.handleDocData(tocData, tocItem.level - 1);
|
// tocItem.key = memorySrc.key + "-" + memorySrc.children.length;
|
// memorySrc.children.push(tocItem);
|
// generateList.push(tocItem);
|
// cLevel = tocItem.level;
|
// }
|
// }
|
// this.tocData = tocData;
|
// this.generateList = generateList;
|
// console.log(tocData, generateList, 1221212121211);
|
// }
|
|
// 获取总页数
|
this.MG.file
|
.getPdfInfo({ md5: this.md5 })
|
.then((res) => {
|
console.log(res, 79879879879797979);
|
this.totalPage = res.totalPages;
|
this.getPageImage(this.currentPage - 1);
|
})
|
.catch((err) => {
|
console.error(err);
|
});
|
// })
|
// .catch((err) => {
|
// console.error(err);
|
// });
|
},
|
getPageImage(page) {
|
console.log(page, "page");
|
const ctx = process.env.VUE_APP_API_URL;
|
this.fileLoading = true;
|
this.currentPageSrc =
|
ctx +
|
"/file/Preview/GetPageImage" +
|
"?md5=" +
|
this.md5 +
|
"&index=" +
|
page +
|
"&dpi=150";
|
},
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
.imgbox {
|
width: 100%;
|
height: 100%;
|
background-color: aquamarine;
|
img {
|
width: 100%;
|
}
|
}
|
</style>
|
