element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件（浏览器打开文件的方式）

此组件就是一个单纯的预览图片、浏览器打开文件的形式简单的组合了下而成的，word、excel是直接下载、pdf浏览器打开的形式，如果想本地打开直接预览的话就直接不用看了。word、excel、pdf 的图片是我放到服务器上的图片地址。

1.组件演示

2.html 代码

<template>
 <div>
 
  <el-table
       
        :data="lists"
        max-height="620"
        border
        stripe
        style="width: 100%"
        :default-sort="{ prop: 'id', order: 'ascending' }"
      >
        <el-table-column
          label="工作部门"
          prop="workDept"
          width="300px"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="报销人"
          prop="reimbursement"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="报销日期"
          prop="reimbursementDate"
          header-align="center"
          align="center"
        />
       
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              icon="el-icon-view"
              @click="showAnnex(scope.row)"
              >附件查看</el-button
            >
           
        </el-table-column>
      </el-table>
 
 
    <el-drawer
      title="费用报销附件信息"
      width="70%"
      :visible.sync="drawerAnnex"
      :direction="direction"
      :modal="true"
      @close="closePreview"
    >
      <file-preview :fileList="previewOptionData"></file-preview>
    </el-drawer>
  </div>
</template>

<script>

import FilePreview from "@/components/FilePreview";
export default {
  name: "Log",
  components: {
  
    FilePreview
  },
  data() {
    return {
      annexList: [],
      drawerAnnex:false,
      //list 自己的数据存进去就可以
      lists:[],
    };
  },
  computed: {
   
    /**
     * 附件预览数据
     *
     */
    previewOptionData() {
      const cloneData = JSON.parse(JSON.stringify(this.annexList)); // 对源数据深度克隆
      return cloneData;
    }
  },
  created() {
  },
  methods: {
      showAnnex(row) {
      this.annexList = row;
      this.drawerAnnex = true;
    },
   
  }
};
</script>
<style>

</style>

3.组件源码

<template>
  <div class="fileBox">
    <el-row>
      <el-col :span="24">
        <el-carousel
          indicator-position="outside"
          trigger="click"
          :autoplay="false"
        >
          <el-carousel-item v-for="(item, index) in annexList" :key="index">
            <template
              v-if="
                item.typeStr == 'pdf' ||
                  item.typeStr == 'doc' ||
                  item.typeStr == 'docx' ||
                  item.typeStr == 'xlsx' ||
                  item.typeStr == 'xls'
              "
            >
              <div style="    text-align: center;">
                <el-image
                  style=" height:200px;cursor: pointer;"
                  :src="fileUrl + item.filePic"
                  fit="fill"
                  @click="viewAnnex(item.fileUrl)"
                >
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
                <div style="cursor: pointer;" @click="viewAnnex(item.fileUrl)">
                  {{ item.fileName }}
                </div>
              </div>
            </template>
            <template v-else>
              <el-image
                style=" height: 80%;"
                trigger="click"
                :src="fileUrl + item.fileUrl"
                fit="fill"
                :preview-src-list="imgshoWList"
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
              <div style="cursor: pointer;color:red">
                {{ item.fileName }}
              </div>
            </template>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSuffix } from "@/utils/index.js";
export default {
  name: "FilePreview",
  props: {
    fileList: {
      type: Object,
      default: ""
    }
  },
  data() {
    return {
      annexList: [],
      sourceUrl: "",
      imgshoWList: []
    };
  },
  watch: {
    fileList(val) {
      this.imgshoWList = this.value;
      this.showAnnex(val);
    }
  },
  computed: {
    imageUrl() {
      return this.value;
    }
  },
  mounted() {
   
    this.showAnnex(this.fileList);
  },
  methods: {
    showAnnex(row) {
      this.centerAnnex = [];
      this.annexList = [];
      this.annexObj = {};
      this.imgshoWList = [];
      var _this = this;
      /**
       * 返回字段名不同所以我这里需要处理下如果字段名一致则不需要
       */
      //费用报销
      if (row.expensesDetailList) {
        row.fileListSet = row.expensesDetailList;
      }
      //差旅费报销附件
      //travelDetailList
      if (row.travelDetailList) {
        row.fileListSet = row.travelDetailList;
      }
      console.log("行数据", row.fileListSet.length);
      for (let i = 0; i < row.fileListSet.length; i++) {
        this.centerAnnex = JSON.parse(row.fileListSet[i].url);
        console.log("转过来之后的数据", this.centerAnnex);
        for (let j = 0; j < this.centerAnnex.length; j++) {
          //判断文件后缀如果为pdf、word、excel以及其他文件时显示指定图片，
          //.jpg,.png,.txt,.doc,.docx,.pdf,.xlsx,.xls
          let suffix = getSuffix(this.centerAnnex[j].fileUrl);
          switch (suffix) {
            case "pdf":
              this.centerAnnex[j].filePic = "/files/pdf/pdf.jpg";
              break;
            case "xlsx":
              this.centerAnnex[j].filePic = "/files/xlsx/xlsx.jpg";
              break;
            case "xls":
              this.centerAnnex[j].filePic = "/files/xlsx/xlsx.jpg";
              break;
            case "docx":
              this.centerAnnex[j].filePic = "/files/word/word.jpg";
              break;
            case "doc":
              this.centerAnnex[j].filePic = "/files/word/word.jpg";
              break;
          }
          _this.annexList.push({
            filePic: this.centerAnnex[j].filePic,
            fileUrl: this.centerAnnex[j].fileUrl,
            fileName: this.centerAnnex[j].fileName,
            typeStr: suffix
          });
          if (
            suffix != "pdf" &&
            suffix != "doc" &&
            suffix != "docx" &&
            suffix != "xlsx" &&
            suffix != "xls"
          ) {
            _this.imgshoWList.push(this.fileUrl + this.centerAnnex[j].fileUrl);
          }
          if (_this.annexList.length > 0) {
            const url = _this.annexList[0].fileUrl;
            this.getiFremUrl(url, 0);
          }
        }
      }
      console.log("图片地址", _this.imgshoWList);
      this.drawerAnnex = true;
    },
    getiFremUrl(file, i) {
      this.currentIndex = i;
      const url = this.fileUrl + file;
      this.sourceUrl = url;
    },
    viewAnnex(item) {
      window.open(this.fileUrl + item);
    }
  }
};
</script>

<style lang="scss" scoped>

/deep/.el-image__inner,
.el-image__placeholder[data-v-1c1b3b50],
.el-image__error[data-v-1c1b3b50] {
  height: 200px !important;
  width: auto !important;
}
</style>

1. getSuffix "@/utils/index.js"js 中的源码（之前不好意思了，忘记贴这段了，多感谢小陈在线学代码童鞋的提醒）

 * 
 * 
 * @param {*} str 
 */

export function getSuffix(str) {
  if (str) {
    var h = str.substring(str.lastIndexOf('.') + 1)
    return h;
  }
}