文章来源地址https://www.toymoban.com/news/detail-601291.html
1.组件previewPdf
<template>
<el-drawer
:title="drawerName"
:visible.sync="drawerVal"
:direction="direction"
:append-to-body="true"
size="100%"
:before-close="drawerClose">
<iframe :src="url" width="100%" height="100%" />
</el-drawer>
</template>
<script>
export default {
props: {
drawerName: {
type: String
},
drawerVal: {
type: Boolean,
default: () => false
},
url: {
type: String,
default: () => ''
}
},
data () {
return {
direction: 'rtl'
}
},
methods: {
drawerClose () {
this.url = ''
this.$emit('update:drawerVal', false)
}
}
}
</script>
2.页面引用
<preview-pdf :drawerName="drawerName" :drawerVal.sync="drawerVal" :url="url" />
import previewPdf from './BasicData/Agreement/components/previewPdf.vue'
export default {
components: {
previewPdf
},
data(){
return{
url:'',
drawerName:'',
drawerVal:'',
}
},
methods: {
handlePreview(file) {
this.url = file.url;
this.drawerName = '质检报告';
this.drawerVal = true;
},
}
}
文章来源：https://www.toymoban.com/news/detail-601291.html
到了这里，关于element+vue 之预览pdf组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
