vue2中点击按钮使用预览pdf,word文件,图片3种格式的写法

我这里是点击el-table的某一列,使用的插槽

<el-table-column label="附件" align="left" prop="enclosure">
        <template slot-scope="scope">
          <a
            v-if="scope.row.enclosure"
            style="color: cornflowerblue"
            @click="yuTap(scope.row.enclosure)"
            >附件</a
          >
        </template>
</el-table-column>

 methods里边的方法:

    // 预览
    yuTap(item) {
      var the = this;
      var fie = this.baseUrl + item; //文件路径有域名不需拼接,没有需要拼接一下
      var type = item.split(".")[item.split(".").length - 1];
      if (type == "jpg" || type == "png" || type == "jpeg") {
        the.images = fie;
        the.showImg = true;
      } else if (type == "pdf") {
        the.loadPdfHandler(); //重置pdf第一页展示
        the.pdfUrl = fie;
        the.showPdf = true;
      } else if (type == "doc" || "docx") {
        // the.showDoc = true;
        //word预览
        // the.fileUrl = fie;
        window.location.href = fie;
      }
    },
    closePreviewClick() {
      if (this.showDoc == true) {
        this.showDoc = false;
      } else if (this.showPdf == true) {
        this.showPdf = false;
      } else if (this.showImg == true) {
        this.showImg = false;
      }
    },
    changePdfPage(val) {
      //pdf上一页下一页操作
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    },

data中定义的数据,baseUrl是公共路径,需要根据实际情况修改

      showDoc: false, //判断如果是否为word文件显示
      showPdf: false, //判断如果是否为pdf文件显示
      showImg: false, //判断如果是否为图片显示
      fileUrl: "", //pdf链接
      images: "", //图片链接
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      pdfUrl: "", //pdf链接
      baseUrl: process.env.VUE_APP_BASE_API,

使用  npm install vue-pdf  命令下载安装,在compons里边注册一下

export default {
  name: "Projectbase",
  components: { pdf },
  data() {
    return {

 这是弹窗里边的内容

<el-dialog
      :visible="showDoc == true || showPdf == true || showImg == true"
      :show-close="true"
      :width="'80%'"
      class="dialog-div-pre-style"
      :before-close="closePreviewClick"
      center
      title="预览"
    >
      <div v-if="showImg == true" class="dialog-body-content-base-style">
        <img :src="images" style="width: 100%" />
      </div>
      <div v-if="showDoc == true" class="dialog-body-content-base-style">
        <!-- <iframe frameborder="0" :src="fileUrl" width="100%" height="450px">
        </iframe> -->
        <iframe
          :src="`https://view.officeapps.live.com/op/view.aspx?src=${fileUrl}`"
          width="100%"
          height="450px"
          frameborder="1"
        />
        <!-- <a :href="fileUrl"></a> -->
      </div>
      <div
        v-if="showPdf == true"
        class="dialog-body-content-base-style"
        style="justify-content: center; align-items: center"
      >
        <pdf
          ref="pdf"
          :src="pdfUrl"
          :page="currentPage"
          @num-pages="pageCount = $event"
          @page-loaded="currentPage = $event"
          @loaded="loadPdfHandler"
        >
        </pdf>
        <div style="text-align: center; font-size: 20px">
          <span
            @click="changePdfPage(0)"
            class="turn"
            :class="{ grey: currentPage == 1 }"
            >上一页</span
          >
          {{ currentPage }} / {{ pageCount }}
          <span
            @click="changePdfPage(1)"
            class="turn"
            :class="{ grey: currentPage == pageCount }"
            >下一页</span
          >
        </div>
      </div>
    </el-dialog>

 大家如果有不懂得地方,或者逻辑之类看不明白的,或者我少写了代码的.欢迎大家留言看到我会第一时间回复,并且修改和纠正.