admin管理员组文章数量:1648562
首先要安装 vue-pdfa
npm安装: npm install --save vue-pdf
<template>
<el-dialog :visible.sync="dialogFormVisible2" style="width:120%;height:100%;margin-left:-100px"
@close='closeDialog'>
<div style="text-align: center;font-size: 16px;">第{{this.myfile.pdfIndex+1}}页</div>
<div style="margin-bottom: 15px; text-align: right">
<el-button type="primary" size="small" @click.stop="previousPage">
上一页
</el-button>
<el-button type="primary" size="small" @click.stop="nextPage">
下一页
</el-button>
</div>
<div>
<pdf :src="src" style="display: inline-block; width: 100%"></pdf>
</div>
</el-dialog>
</template>
<script>
import {
getPdf,
getPdfIndex
} from '@/api/scoremanage'
import pdf from 'vue-pdf';
export default {
data() {
return {
src: null,
myfile: {
//获取pdf后端所需要传的字段
},
myfiles: {
//获取pdf数量后端所需要传的字段
},
}
},
methods:{
//查看pdf
check_suggest(row) {
(获取后端所需要传的字段值,myfile,myfiles)
getPdf(this.myfile).then(response => {
console.log(response);
})
this.src = '(https://api.ahutwyc.tech:9000)请求数据的地址/api/student/getPdf?projectName=' + this.myfile.projectName +
'&gradeCode=' + this.myfile.gradeCode + '&level=' + this.myfile.level + '&sex=' + this.myfile.sex +
'&pdfIndex=' + this.myfile.pdfIndex + '&schoolId=' + this.myfile.schoolId;
}
},
//上一页
previousPage() {
this.src = ''
//向后端获取总pdf数量
getPdfIndex(this.myfiles).then(res => {
this.data = res.data
})
if (this.myfile.pdfIndex > 0) {
this.myfile.pdfIndex = this.myfile.pdfIndex - 1
} else {
this.myfile.pdfIndex = this.data.length - 1
}
getPdf(this.myfile).then(response => {
console.log(response);
})
this.src = '(https://api.ahutwyc.tech:9000)请求数据的地址/api/student/getPdf?projectName=' + this.myfile.projectName +
'&gradeCode=' + this.myfile.gradeCode + '&level=' + this.myfile.level + '&sex=' + this.myfile.sex +
'&pdfIndex=' + this.myfile.pdfIndex + '&schoolId=' + this.myfile.schoolId;
},
//下一页
nextPage() {
this.src = ''
getPdfIndex(this.myfiles).then(res => {
this.data = res.data
})
if (this.myfile.pdfIndex + 1 >= this.data.length) {
this.myfile.pdfIndex = 0
} else {
this.myfile.pdfIndex = this.myfile.pdfIndex + 1
}
getPdf(this.myfile).then(response => {
console.log(response);
})
this.src = '(https://api.ahutwyc.tech:9000)请求数据的地址/api/student/getPdf?projectName=' + this.myfile.projectName +
'&gradeCode=' + this.myfile.gradeCode + '&level=' + this.myfile.level + '&sex=' + this.myfile.sex +
'&pdfIndex=' + this.myfile.pdfIndex + '&schoolId=' + this.myfile.schoolId;
}
}
}
</script>
版权声明:本文标题:页面中查看pdf,且可以上下翻页(不是一个pdf多页,是多个pdf) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729503922a1203402.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论