预览文件pdf xlsx等

<template>

  <el-dialog

    v-if="previewVisible"

   :title="files.fileName"

    :visible.sync="previewVisible"

    width="80%"

    :before-close="handleClose"

    :close-on-click-modal="false"

  >

    <!-- <div class="table"> <i class="el-icon-loading" /> </div> -->

    <div

      v-if="fileType=='docx'"

      ref="docxPreview"

      class="my-component"

    />

// xlsx类型

    <div v-else-if="fileType=='xlsx'" class="file-pre">

      <el-tabs v-if="DialogVisible" v-model="activeName" v-loading="loading" type="border-card">

        <el-tab-pane v-for="(item,index) in excelSheet" :key="index" :label="item.name" :name="item.name">

          <div class="table" v-html="item.innerHTML" />

        </el-tab-pane>

      </el-tabs>

    </div>

    <div v-else-if="fileType=='pdf'">

      <PDF

        ref="pdf"

        :page="pageNum"

        :src="pdfUrl"

      />

      <div class="page-tool">

        <div class="page-tool-item" @click="lastPage">上一页</div>

        <div class="page-tool-item" @click="nextPage">下一页</div>

        <div class="page-tool-item">{ { pageNum }}/{ { numPages }}</div>

      </div>

    </div>

    <div

      v-else-if="fileType=='jpg' || 'jpeg'"

      style="display: flex;justify-conte