文件阅览功能的实现(适用于word、pdf、Excel、ppt、png...)

需求描述：

需要一个组件，同时能预览多种类型文件，一种类型文件可有多个的文件。

看过各种博主的方案，其中最简单的是利用第三方地址进行预览解析（无需任何插件）；

这里推荐三个地址：

@params 微软解析地址

@url https://view.officeapps.live.com/op/view.aspx?src=资料地址

@params docx云服务解析大小限制 50MB

@url http://view.xdocin.com/xdoc?_xdoc=资料地址

@params 豆瓣在线预览解析

@url www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=资料地址

效果图：

已测试，因为单线程原因，可能有些文件无法同时展现，后期还会优化

注意：操作的文件必须是公网能访问得到的，否则无法被解析；

组件代码：

<!--多文件类型预览-->
<template>
  <el-dialog
    class="filedialog"
    title="文件预览"
    append-to-body
    :visible.sync="dialogVisible"
    close-on-press-escape
    @close="close"
    width="70%"
  >
    <span slot="title" class="dialog-footer">
      <div class="title">
        <span>文件预览</span>
      </div>
      <div class="select_box">
        <el-select
          v-model="fileType"
          placeholder="请选择文件类型"
          @change="selectChange"
          clearable
          transfer="true"
          :popper-append-to-body="false"
          popper-class="select-popper"
        >
          <el-option
            v-for="(item, index) in fileTypes"
            :key="index"
            :label="`文件类型` + (index + 1) + item"
            :value="item"
            >{{ `文件类型` + (index + 1) + item }}</el-option
          >
        </el-select>
      </div>
    </span>
    <template v-if="onImg">
      <iframe
        v-for="(item, index) in fileListInfo"
        :src="item"
        frameborder="0"
        width="100%"
        height="650"
        class="iframe"
      ></iframe>
    </template>
    <template v-else>
      <div class="block" :style="{ height: '600px' }">
        <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
        <el-carousel height="600px">
          <el-carousel-item v-for="item in fileListInfo" :key="item">
            <h3 class="small">
              <img
                :src="item"
                alt=""
                :style="{ width: '100%', height: 'auto' }"
              />
            </h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "file_Preview",
  data() {
    return {
      imgVisibleURL: "",
      onImg: true,
      dialogVisible: false,
      fileTypes: [],
      fileType: "",
      fileListInfo: null,
    };
  },
  props: {
    fileDialogVisible: {
      type: Boolean,
    },
    filePreview: {
      type: String,
      default: "",
    },
  },
  watch: {
    fileDialogVisible: {
      handler(newVal, oldVal) {
        this.dialogVisible = newVal;
      },
      deep: true,
      immediate: true,
    },
    filePreview: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.imgVisibleURL = newVal;
          //类型收集
          this.fileTypes = this.conversion(newVal);
          //默认选中
          this.$nextTick(() => {
            this.fileType = this.fileTypes[0];
            this.selectChange(this.fileTypes[0]);
          });
        }
      },
      deep: true,
      immediate: false,
    },
  },
  created() {},
  mounted() {},
  methods: {
    /**
     *  @params 微软解析地址
        @url    https://view.officeapps.live.com/op/view.aspx?src=
        @params docx云服务解析 大小限制 50MB
        @url    http://view.xdocin.com/xdoc?_xdoc=
        @params 豆瓣在线预览解析  
        @url    www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=
     */
    conversion(str) {
      str.split(",").forEach((item, index) => {
        let extIndex = item.lastIndexOf(".");
        let ext = item.substr(extIndex);
        this.fileTypes.push(ext);
      });
      let unique = (arr) => {
        return Array.from(new Set(arr));
      };
      return unique([...this.fileTypes]);
    },
    selectChange(e) {
      const fileDataList = this.fileFilter(this.imgVisibleURL.split(","), e);
      if (
        e == ".xls" ||
        e == ".doc" ||
        e == ".docx" ||
        e == ".xlsx" ||
        e == ".detx" ||
        e == ".pptx" ||
        e == ".ppt" ||
        e == ".xls"
      ) {
        //需二次处理
        this.onImg = true;
        this.fileListInfo = fileDataList;
        this.fileListInfo = this.fileListInfo.map((url, index) => {
          return `https://view.officeapps.live.com/op/view.aspx?src=${url}`;
        });
      } else if (e == ".png" || e == ".jpg" || e == ".webp" || e == ".gif") {
        //图片类型直接
        this.onImg = false;
        this.fileListInfo = fileDataList;
      } else if (e == ".pdf") {
        //.pdf类型不需要二次处理
        this.onImg = true;
        this.fileListInfo = fileDataList;
      }
    },
    fileFilter(arr, callback) {
      let urlArr = [];
      arr.forEach((item, index) => {
        let extIndex = item.lastIndexOf(".");
        let ext = item.substr(extIndex);
        if (ext == callback) {
          urlArr.push(item);
        }
      });
      return urlArr;
    },
    close() {
      this.$emit("fileCloseDialog", false);
      this.fileTypes = [];
      this.fileListInfo = null;
      this.fileType = "";
    },
  },
};
</script>

<style lang="less" scoped>
.filedialog {
  width: 100%;
  height: 100%;
  z-index: 9999 !important;
  ::v-deep .dialog-footer {
    height: 50px;
    font-size: 19px;
    display: flex;
    align-items: center;
    position: relative;
    .select_box {
      position: absolute;
      right: 100px;
    }
  }

  ::v-deep .el-dialog {
    opacity: 0.9;

    .el-dialog__body {
      height: 700px;
      margin: 0;
      padding: 15px;
      background: #00132f;
      overflow: auto;

      // 滚动条整体部分
      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
      &::-webkit-scrollbar-button {
        display: none;
      }
      // 滚动条的轨道（里面装有Thumb）
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      // 滚动条的轨道（里面装有Thumb）
      &::-webkit-scrollbar-track-piece {
        background-color: transparent;
      }
      // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
      &::-webkit-scrollbar-thumb {
        background: #fff;
        cursor: pointer;
        border-radius: 4px;
      }
      // 边角，即两个滚动条的交汇处
      &::-webkit-scrollbar-corner {
        display: none;
      }
      // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
      &::-webkit-resizer {
        display: none;
      }
    }
    .el-dialog__header {
      background: #00132f;
      color: white;
    }
  }
}

</style>

方法还是有很多的，下面给大家推荐几个还不错的网站；

可参考：

vue在线预览word、excel、pdf、txt、图片的相关资料,

https://www.jb51.net/article/266520.html

vue集成Luckyexcel实现在线编辑Excel，可自行导入，也可从服务器端获取：

https://blog.csdn.net/weixin_45000975/article/details/121856816

希望对大家有所帮助，如有不妥，多多包涵