<template>
<PageWrapper>
<div class="detail-container">
<div class="center">
<vue-pdf-embed ref="pdfRef1" :source="imgList" style="height: 70%; width:100%;"
</div>
</div>
</PageWrapper>
</template>
<script>
//主要使用的是这个插件组件
import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'
export default {
components: {
DataUpload,VuePdfEmbed
},
data() {
return {
applyInfo: {},//页面表单对象
materialData_rules: {},
imgList: '',//PDF存放路径
HasPdf: false,//根据后端返回情况是否有pdf控制器
currentRotation: 0,
currentPage: 1,
pageCount: 1,
loading: true,//按钮防抖
showAllPages: false,//是否显示所有页面
rotations: [0, 90, 180, 270],//旋转角度
};
},
created() {
},
mounted(){
},
methods: {
//翻页
handleCurrentChange(e) {
this.currentPage = e
},
//打印功能
onPrint() {
this.$refs.pdfRef1.print(200,'定值报告',true);
},
// 获取指导书PDF接口
getFixedValueReport() {
}
};
</script>
<style lang="scss" scoped>
</style>
//说一下思路吧,删了很多功能代码,只留了主体部分。
//先引入上面的插件,注意上面的写法只兼容vue2版本,v3的引入方式不一样,给组件定制宽高后,根据后端接口返回接口文件数据,生成对应的ulr地址,扔进组件中的source就可以啦,不懂得可以私
父组件