web_sh_audit/src/components/common/FilePreView.vue

<template>
  <!--  图片、pdf、docx 预览
          "docx-preview": "^0.1.4",
          "jszip": "^3.10.0",-->
  <div style="width:100%;height:100%;">
    <div title="文件预览" v-if="showDoc || showPdf || showImg" width="750px" style="background: #FFF !important;width:100%;height:100%;">
      <template slot="closeIcon">
        <el-icon icon="close-circle" class="closeIcon" />
      </template>
      <template slot="footer">
        <div v-if="showPdf" class="pdf-layout-page">
          <el-button @click="changePdfPage(0)" :disabled="currentPage === 1" name="上一页" />
          {{ currentPage }} / {{ pageCount }}
          <el-button @click="changePdfPage(1)" :disabled="currentPage === pageCount" name="下一页" />
        </div>
        <el-button name="取消" @click="cancel" />
      </template>
      <div class="modal-body form">
        <div v-if="showImg">
          <img :src="images" preview="1" preview-text="" style="width: 100%" />
        </div>

        <div v-show="showDoc" ref="word">
          <iframe v-if="fileUrl" frameborder="0" :src="fileUrl" width="100%" height="100%"> </iframe>
        </div>
        <div v-show="showPdf" class="pdf-layout" id="top">
          <pdf-view
            ref="pdf"
            :src="pdfPath"
            :page="currentPage"
            @num-pages="pageCount = $event"
            @page-loaded="currentPage = $event"
            @loaded="loadPdfHandler"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pdfView from "vue-pdf";
import axios from "axios";
const docxPre = require("docx-preview");
window.JSZip = require("jszip");
export default {
  name: "FilePreView",
  components: { pdfView },
  data() {
    return {
      showDoc: false, //判断如果是否为word文件显示
      showPdf: false, //判断如果是否为pdf文件显示
      showImg: false, //判断如果是否为图片显示
      fileUrl: "", //pdf链接
      pdfPath: "", //pdf地址
      images: "", //图片链接
      currentPage: 0, // pdf文件页码
      pageCount: 0 // pdf文件总页数
    };
  },
  methods: {
    showView(filePath) {
      let that = this;
      let type = filePath.split(".")[filePath.split(".").length - 1];
      if (type === "jpg" || type === "png" || type === "jpeg") {
        that.images = filePath;
        that.showImg = true;
      } else if (type === "pdf") {
        that.loadPdfHandler(); //重置pdf第一页展示
        that.pdfPath = filePath;
        that.showPdf = true;
      } else if (type === "doc") {
        //word预览
        that.fileUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + filePath;
        that.showDoc = true;
      } else if (type === "docx") {
        //word预览
        that.showDoc = true;
        that.previewWord(filePath);
      }
    },
    // 后端返回二进制流
    previewWord(filePath) {
      let that = this;
      // 这里需要提起打开弹窗，因为有时很找不到word的ref 会报错
      axios({
        method: "get",
        responseType: "blob", // 因为是流文件，所以要指定blob类型
        url: filePath
      }).then(({ data }) => {
        docxPre.renderAsync(data, this.$refs.word);
      });
    },
    //pdf上一页下一页操作
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
        this.top();
      }
    },
    top() {
      document.querySelector("#top").scrollIntoView(true);
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    cancel() {
      this.showDoc = false; //判断如果是否为word文件显示
      this.showPdf = false; //判断如果是否为pdf文件显示
      this.showImg = false; //判断如果是否为图片显示
    }
  }
};
</script>
<style lang="less" scoped>
.form {
  height: 100%;
  overflow: auto;
}
.pdf-layout-page {
  left: 30%;
  margin: auto;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  position: absolute;
}
</style>