<template>
|
<j-modal :centered="true" :title="title" :visible="visible" :fullScreen="true" @cancel="handleCancel" style="top:-50px;">
|
<div>
|
<!-- <el-button-group>
|
<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-group>
|
<div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div> -->
|
|
<pdf v-for="i in pageTotalNum" :key=i ref="pdf" :page=i :src="url"></pdf>
|
</div>
|
<template slot="footer">
|
</template>
|
</j-modal>
|
</template>
|
|
<script>
|
import pdf from 'vue-pdf'
|
import Vue from 'vue'
|
export default {
|
name: "PdfView",
|
components: {
|
pdf
|
},
|
data() {
|
return {
|
title: '',
|
confirmLoading: false,
|
visible: false,
|
url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
|
pageNum: 1,
|
pageTotalNum: 0, // 总页数
|
loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
|
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
// 计算pdf页码总数
|
getNumPages() {
|
|
let loadingTask = pdf.createLoadingTask(this.url)
|
loadingTask.promise.then(pdf => {
|
if (pdf.numPages <= 50) {
|
this.pageTotalNum = pdf.numPages
|
} else {
|
this.pageTotalNum = 50;
|
}
|
|
}).catch(err => {
|
console.error('pdf 加载失败', err);
|
})
|
},
|
|
showPdf(url) {
|
// url = "https://mes-dejg.app.cmfg.cn/sys/mes/sys/common/static//2022-12/27/cb6dc5217e8b276850e0abc6f6b69e3d40f906d38cf84a8227e4f9cfa0f10c60"
|
let ssoLoginFlag = Vue.ls.get("ssoLoginFlag");
|
let deployMode = Vue.ls.get("deployMode");
|
|
if (ssoLoginFlag && deployMode == "container") {
|
var baseProject = "/" + Vue.ls.get("baseProject") + "/";
|
var prefix = "";
|
console.log("baseProject==>" + baseProject)
|
if (url.lastIndexOf(".cn") != -1) {
|
var prefix = url.substring(0, url.lastIndexOf(".cn") + 3);
|
}
|
var suffix = url.substring(url.lastIndexOf(baseProject));
|
this.url = (prefix + suffix).trim();
|
} else {
|
this.url = url;
|
|
}
|
|
this.getNumPages();
|
this.visible = true
|
},
|
// 上一页
|
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
|
},
|
|
close() {
|
this.$emit('close')
|
this.visible = false
|
},
|
handleCancel() {
|
this.close()
|
},
|
},
|
mounted() {
|
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
</style>
|
