vue如何通过url用弹窗来展示pdf

首先，讲一下需求，就是需要通过后端返回的文件上传地址去获取文件并查看，而且需要用到弹窗。

我这里用的是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地址