Vue：embed结合ElementUI中dialog实现PDF文件预览，web前端开发中心

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="PDF 文件预览"
    @open="openPdf"
    @close="closePdf"
  >
    <embed
      :src="pdfUrl"
      type="application/pdf"
      width="100%"
      height="500px"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      pdfUrl: ''
    };
  },
  methods: {
    openPdf() {
      // 在这里可以处理打开对话框时需要进行的逻辑，比如加载PDF文件等
      this.pdfUrl = 'path/to/your/pdf/file.pdf';
    },
    closePdf() {
      // 在这里可以处理关闭对话框时需要进行的逻辑
    }
  }
};
</script>

这个代码示例展示了如何在Vue组件中使用Element UI的<el-dialog>组件和一个<embed>标签来实现PDF文件的预览。当用户打开对话框时，openPdf方法被触发，并且PDF文件被加载进<embed>标签中。当对话框关闭时，closePdf方法被触发，可以进行清理工作。这个例子简洁明了，并且遵循了Vue和Element UI的最佳实践。