vue开发 实现pdf预览iframe形式
/**
* @Author: 858834013@qq.com
* @Name: pdf
* @Date: 2022-04-11
* @Desc:
*/
<template>
<div class="pdfbodys">
<iframe :src="src" width="100%" height="100%" frameborder="0"></iframe>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: "pdfs",
components: {pdf},
props: {
item: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
status: '',
pdfFile: "", //pdf文件地址
currentPage: 0, // 页码
pageCount: 0, // 总页数
}
},
computed: {
src: function () {
return this.item.pdfFileUrl
}
},
watch: {},
mounted() {
},
methods: {}
}
</script>
<style lang="scss" scoped>
.pdfbody {
position: relative;
width: 100%;
height: calc(100% - 80px);
overflow: scroll;
}
.pageButton {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
height: 80px;
.pagesnum {
margin-left: 20px;
margin-right: 20px;
color: #FEFEFF;
font-size: 16px;
}
}
.pdfbodys {
position: relative;
width: 100%;
height: 100%;
}
.pdfs {
width: 100%;
height: calc(100% - 100px);
position: relative;
}
</style>