参考博客vue实现预览功能实现PDF的预览

一、知识点：

1. <embed> 标签定义嵌入的内容，比如插件。借助它，我们可以在浏览器中实现PDF预览。
2. dialog基础对话框，可以根据需求自己定制，相当于一个弹出层。

二、完整组件代码：

<template>
  <div id="BMSHazardPointReport">
    <el-breadcrumb separator-class="el-icon-caret-right">
      <el-breadcrumb-item>地质灾害点</el-breadcrumb-item>
      <el-breadcrumb-item>灾害点报告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="HazardPointReportSelectOptions">
      <div v-for="(select,index) in selectionOptions" :key="index">
        <span v-html="select.label"></span>
        <el-select v-model="select.value" placeholder="请选择" width="50px" filterable clearable>
          <el-option
              v-for="item in select.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-button type="success" style="margin-left: 15px" @click="buttonClick('search')">查询</el-button>
      <el-button type="info" style="margin-left: 15px" @click="buttonClick('reset')">重置</el-button>
    </div>
    <div id="HazardPointReportTable">
      <el-table
          ref="multipleTable"
          :fit="true"
          :border="true"
          :stripe="true"
          :data="tableData"
          @row-dblclick="rowDBLClick"
          height="100%"
          width="100%">
        <el-table-column prop="order" label="序号" min-width="100"></el-table-column>
        <el-table-column prop="name" label="报告名称" min-width="100"></el-table-column>
        <el-table-column prop="type" label="报告类型" min-width="100"></el-table-column>
        <el-table-column prop="pipeline" label="管道类型" min-width="100"></el-table-column>
        <el-table-column prop="company" label="公司名称" min-width="100"></el-table-column>
        <el-table-column prop="organization" label="编制单位" min-width="100"></el-table-column>
        <el-table-column prop="time" label="编制时间" min-width="100"></el-table-column>
        <el-table-column prop="remarks" label="备注" min-width="100"></el-table-column>
      </el-table>
    </div>
    <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="pdfUrl" style="width: 100%; height: 800px"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "BMSHazardPointReport",
  data() {
    return {
      selectionOptions: {
        pipeline: {
          label: "所属管道：",
          value: "",
          options: [
            {
              value: '1',
              label: '1'
            },
            {
              value: '2',
              label: '2'
            },
            {
              value: '3',
              label: '3'
            },
            {
              value: '4',
              label: '4'
            },
            {
              value: '5',
              label: '5'
            }
          ]
        },
        organization: {
          label: "编制单位：",
          value: "",
          options: [
            {
              value: '1',
              label: '1'
            },
          ]
        },
        type: {
          label: "报告类型：",
          value: "",
          options: [

          ]
        },
        time: {
          label: "编制时间：",
          value: "",
          options: [

          ]
        },
        name: {
          label: "报告名称：",
          value: "",
          options: [

          ]
        }
      },
      tableData: [
        {
          order: "19623584",
          name: "报告一",
          type: "整治规划",
          pipeline: "管道",
          company: "公司",
          organization: "",
          time: "20130815",
          remarks: "",
        },
      ],
      showPdf: false,
      pdfUrl: ``, // PDF文档url
    }
  },
  methods: {
    buttonClick(flag) {
      if (flag === "search") {
        let pipeline = this.selectionOptions["pipeline"]["value"];
        let organization = this.selectionOptions["organization"]["value"];
        let type = this.selectionOptions["type"]["value"];
        let time = this.selectionOptions["time"]["value"];
        let name = this.selectionOptions["name"]["value"];

      } else if (flag === "reset") {
        this.selectionOptions["pipeline"]["value"] = "";
        this.selectionOptions["organization"]["value"] = "";
        this.selectionOptions["type"]["value"] = "";
        this.selectionOptions["time"]["value"] = "";
        this.selectionOptions["name"]["value"] = "";
      }

    },
    rowDBLClick(row, column, event) {
      let {order, time} = row;
      this.showPdf = true
    },
    closePreviewClick() {
      this.showPdf = false
    }
  },

}
</script>

<style lang="scss" scoped>
@import "./../../../../style/universal";

#BMSHazardPointReport {
  height: $occupy-all;
  width: $occupy-all;
  padding: 30px;

  ::v-deep input {
    width: 160px;
  }

  #HazardPointReportSelectOptions {
    padding-top: 15px;
    color: black;
    display: flex;

    span {
      margin-left: 15px;
    }
  }
}
</style>

三、代码运行效果：

双击表格后

四、代码解释：

1. 首先，这里通过showPdf来控制dialog弹出层是否显示
2. showPdf初始值为false
   
   通过双击表格某个单元格触发事件，更改showPdf的值
   
   
   而点击关闭按钮之前，会触发closePreviewClick事件，重新将showPdf置位false
   
3. 弹出层中主要由一个div和一个embed构成，embed预览pdf，pdf的链接为组建中的pdfUrl
4. 这是最基础的模板，可以通过别的事件，触发更改showPdf的值，同时也可以更改pdfUrl的值进行不同pdf文件的预览。