首先,讲一下需求,就是需要通过后端返回的文件上传地址去获取文件并查看,而且需要用到弹窗。
我这里用的是vue,编写工具是用HBuilderX
<template>
<el-link @click="rowDBLClick("你的文件地址")" type="primary">打开PDF</el-link>
<el-dialog :visible="showPdf === true" :append-to-body='true' :modal-append-to-body='true' :lock-scroll='true'
:destroy-on-close='true' :close-on-click-modal='false' :width="'80%'" class="dialog-div-pre-style"
:before-close="closePreviewClick" top="200px" center>
<div v-if="showPdf === true" class="dialog-body-content-base-style"
style="justify-content: center; align-items: center">
<embed :src="pictureUrl" style="width: 100%; height: 800px" />
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
showPdf: false,
pictureUrl: '',
}
},
methods: {
//关闭弹窗
closePreviewClick() {
this.showPdf = false
},
//开启
rowDBLClick(url) {
if (url.startsWith('http')) {
this.pictureUrl = url
} else {
//这里用的baseURl是我内部服务器的前缀,你们没有就可以省略
this.pictureUrl = this.baseURL + url
}
this.showPdf = true
},
}
}
</script>
文字链接的点击事件传过来的是你从后端获取到的url地址