mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 02:46:44 +08:00
提交修改
This commit is contained in:
daihh
199
src/components/PdfPreview/view.vue
Normal file
199
src/components/PdfPreview/view.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template><!--pdf连接分页处理-->
|
||||
<div class="pdf-perView" id="pdf-perView">
|
||||
<div class="pdf-box">
|
||||
<transition name="progress">
|
||||
<el-progress v-if="showProgress" :percentage="Math.floor(loadedRatio * 100)" :text-inside="true" :show-text="false"></el-progress>
|
||||
</transition>
|
||||
<pdf
|
||||
v-for="i in showPages"
|
||||
:key="i"
|
||||
:src="src"
|
||||
:page="i"
|
||||
@progress="loadedRatio = $event"
|
||||
@page-loaded="loadedPageHandle"
|
||||
@loaded="loadPdfHandle"
|
||||
style="display: inline-block; width:100%">
|
||||
<div>每行的间隔内容</div>
|
||||
</pdf>
|
||||
<!-- <pdf
|
||||
ref="pdf"
|
||||
:src="pdfUrl"
|
||||
:page="currentPage"
|
||||
@progress="loadedRatio = $event"
|
||||
@num-pages="pageCount = $event"
|
||||
@page-loaded="currentPage = $event"
|
||||
@loaded="loadPdfHandler"
|
||||
@link-clicked="currentPage = $event">
|
||||
</pdf> -->
|
||||
</div>
|
||||
<div v-if="totalPages>initNum" class="pdf-footer" >
|
||||
<!-- <el-button icon="el-icon-arrow-left" @click="prePage('footer')" :disabled="loadedRatio !== 1"></el-button>
|
||||
<span v-if="loadedRatio !== 1" style="margin:0 10px;">0 / 0</span>
|
||||
<span v-else style="margin:0 10px;">{{ currentPage }} / {{ pageCount }}</span>
|
||||
<el-button @click="nextPage('footer')" :disabled="loadedRatio !== 1" icon="el-icon-arrow-right"></el-button> -->
|
||||
<el-button type="primary" @click="clickMore()">加载更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import pdf from "vue-pdf";
|
||||
export default {
|
||||
components: { pdf },
|
||||
props: {
|
||||
filePath: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
scrollToID: {
|
||||
type: String,
|
||||
default: "pdf-perView",
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
src: "",
|
||||
showPages: undefined,
|
||||
totalPages:0,
|
||||
initNum:3,
|
||||
scale: 100, //放大系数
|
||||
loadedRatio:0,// 加载进度
|
||||
showProgress:true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// /case/demo.pdf
|
||||
if(this.filePath){
|
||||
this.loadInitPdf(this.filePath);
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
filePath(newVal){
|
||||
if(newVal){
|
||||
this.loadInitPdf(newVal);
|
||||
}
|
||||
},
|
||||
loadedRatio(newVal){
|
||||
// 直接使用loadedRatio控制进度条没有加载效果
|
||||
if(newVal == 1){
|
||||
let that = this;
|
||||
setTimeout(function(){
|
||||
that.showProgress = false;
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadProgress(e){
|
||||
console.log(e,'loadProgress');
|
||||
},
|
||||
loadedPageHandle(e){
|
||||
console.log(e,'loadedPageHandle');
|
||||
},
|
||||
loadPdfHandle(e){
|
||||
console.log(e,'loadPdfHandle');
|
||||
},
|
||||
clickMore(){
|
||||
if(this.totalPages>this.showPages){
|
||||
this.showPages++;
|
||||
}
|
||||
},
|
||||
//加载页面
|
||||
loadInitPdf(url) {
|
||||
if(url && url.indexOf('.pdf')>-1){
|
||||
let loadingTask = pdf.createLoadingTask(url);
|
||||
this.src=loadingTask;
|
||||
loadingTask.promise.then((pdf) =>{
|
||||
this.totalPages=pdf.numPages;
|
||||
if(pdf.numPages>this.initNum){
|
||||
this.showPages = this.initNum;
|
||||
}else{
|
||||
this.showPages =pdf.numPages;
|
||||
}
|
||||
}).catch((err) =>{
|
||||
this.$message.error("加载内容失败,请联系管理员");
|
||||
});
|
||||
}
|
||||
},
|
||||
initSrc(url){
|
||||
if(url && url.indexOf('.pdf')>-1){
|
||||
//this.src = url;
|
||||
}
|
||||
},
|
||||
prePage(type) {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--;
|
||||
if(type === 'footer'){
|
||||
this.scrollTo();
|
||||
}
|
||||
}
|
||||
},
|
||||
nextPage(type) {
|
||||
if (this.currentPage < this.pageCount) {
|
||||
this.currentPage++;
|
||||
if(type === 'footer'){
|
||||
this.scrollTo();
|
||||
}
|
||||
}
|
||||
},
|
||||
scrollTo(){
|
||||
if(!this.autoScroll){
|
||||
return;
|
||||
}
|
||||
document.getElementById(this.scrollToID).scrollIntoView({ block: 'start', behavior: 'smooth' })
|
||||
},
|
||||
//放大
|
||||
scaleD() {
|
||||
if (this.scale == 200) {
|
||||
return;
|
||||
}
|
||||
this.scale += 5;
|
||||
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
|
||||
},
|
||||
//缩小
|
||||
scaleX() {
|
||||
if (this.scale == 50) {
|
||||
return;
|
||||
}
|
||||
this.scale += -5;
|
||||
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pdf-perView {
|
||||
.pdf-box {
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
//border: 1px solid #dfdfdf;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
>span{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.pdf-header,.pdf-footer {
|
||||
//border: 1px solid #dfdfdf;
|
||||
//background: #dfdfdf;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
/* ------------------- 进度条 ------------------- */
|
||||
//类名：隐藏到显示过程所需要的时间
|
||||
.progress-leave-active{
|
||||
transition: opacity 2s;
|
||||
}
|
||||
.progress-leave-to{
|
||||
opacity: 0;
|
||||
}
|
||||
.el-progress .el-progress-bar .el-progress-bar__outer{
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -18,7 +18,7 @@
|
||||
<span>工号：{{ authorInfo.code }}</span>
|
||||
<span>部门：{{ authorInfo.orgInfo }}</span>
|
||||
<!-- <span>案例编号：{{ caseDetail.id }}</span> -->
|
||||
<span>{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
|
||||
<span v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
|
||||
<interactBar :views="false" :data="caseDetail" :type="3" :comments="false" :shares="false"></interactBar>
|
||||
</div>
|
||||
<div class="btn-div">
|
||||
@@ -31,7 +31,7 @@
|
||||
<!-- <div class="content">
|
||||
{{ caseDetail.content }}
|
||||
</div> -->
|
||||
<pdfPreview :filePath="basePath+caseDetail.filePath"></pdfPreview>
|
||||
<pdfPreview v-if="pdfPath" :filePath="pdfPath"></pdfPreview>
|
||||
</el-card>
|
||||
<!-- :authorId="articleDetailData.sysCreateAid" -->
|
||||
<el-row><comments @success="success" v-if="resolveId != ''" :obj-type="3" :obj-id="resolveId" :authorId="caseDetail.sysCreateAid"></comments></el-row>
|
||||
@@ -70,7 +70,7 @@
|
||||
import { mapGetters } from 'vuex';
|
||||
import portalHeader from '@/components/PortalHeader.vue';
|
||||
import portalFooter from '@/components/PortalFooter.vue';
|
||||
import pdfPreview from '@/components/PdfPreview/index.vue';
|
||||
import pdfPreview from '@/components/PdfPreview/view.vue';
|
||||
|
||||
import interactBar from '@/components/Portal/interactBar.vue';
|
||||
import comments from '@/components/Portal/comments.vue';
|
||||
@@ -88,6 +88,7 @@ export default {
|
||||
return {
|
||||
resolveId: '',
|
||||
basePath:process.env.VUE_APP_FILE_BASE_URL,
|
||||
pdfPath:'',
|
||||
caseDetail: {
|
||||
id:'',
|
||||
filePath:''
|
||||
@@ -124,8 +125,9 @@ export default {
|
||||
},
|
||||
getCaseUserDetail() {
|
||||
apiUser.getByIds([this.caseDetail.sysCreateAid]).then(res => {
|
||||
if (res.status == 200) {
|
||||
if (res.status == 200 && res.result.length>0) {
|
||||
this.authorInfo = res.result[0];
|
||||
//console.log(res.result,'res.result');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user