mteacher/src/views/message/modal/filePreview.vue

<template>
  <div>
    <van-field class="preview">
      <template #input>
        <div
          class="preview_file"
          v-for="(item, index) in dataModel"
          :key="index"
        >
          <div class="preview_item">
            <i
              class="van-icon van-icon-description van-uploader__file-icon"
            ></i>
            <span
              style="
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 1.8rem;
              "
              >{{ item.name || item.url }}</span
            >
          </div>
          <div class="preview_btn">
            <!-- <van-button @click="downLoadFile2(item.url)" type="info" size="mini"
              >下载</van-button
            > -->
            <van-button
              :disabled="!checkFileSuffix(item.url)"
              v-if="checkFileSuffix(item.url)"
              @click="downLoadFile(item.url)"
              type="info"
              size="mini"
              >预览</van-button
            >
          </div>
        </div>
      </template>
    </van-field>

    <van-popup position="bottom" v-model="filePreview" style="height: 100%">
      <van-sticky>
        <m-header
          :backUrl="backUrl"
          :isFixed="false"
          :appHide="true"
          name="预览"
        />
      </van-sticky>
      <div
        id="previewIframe"
        style="height: calc(100vh - 0.44rem)"
        v-if="filePreview && (fileType == 'xls' || fileType == 'pdf')"
      ></div>
      <div
        style="height: calc(100vh - 0.44rem)"
        v-if="filePreview && fileType == 'doc'"
      ></div>
    </van-popup>
  </div>
</template>

<script>
import MHeader from "@/components/header";
import { browser } from "@/common/util";
import { postMessage } from "@/helpers/native-message";
export default {
  props: ["dataModel"],
  components: { MHeader },
  data() {
    return {
      filePreview: false,
      fileType: "xls",
      previewUrl: "",
      backUrl: {
        status: true,
        callBack: () => {
          this.filePreview = false;
        },
      },
    };
  },
  mounted() {
    console.log(this.dataModel);
  },
  methods: {
    checkFileSuffix(url) {
      let urlArr = url.split(".");
      let suffix = urlArr[urlArr.length - 1];
      //  || suffix == 'doc' || suffix == 'docx'
      if (suffix == "xlsx" || suffix == "xls" || suffix == "pdf") {
        return true;
      } else {
        return false;
      }
    },
    getFileSuffix(url) {
      let urlArr = url.split(".");
      let suffix = urlArr[urlArr.length - 1];
      if (suffix == "xlsx" || suffix == "xls") {
        return "xls";
      } else if (suffix == "doc" || suffix == "docx") {
        return "doc";
      } else if (suffix == "pdf") {
        return "pdf";
      } else {
        return "";
      }
    },
    downLoadFile2(file) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "下载中...",
      });
      if (browser().isApp) {
        this.$toast.clear();
        postMessage(
          { api: "downloadFile", content: { downloadUrl: file } },
          () => {
            this.$toast.clear();
          }
        );
      } else {
        this.$toast.clear();
        window.location.href = file;
      }
    },
    downLoadFile(file) {
      // this.previewUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + file
      this.filePreview = true;
      this.fileType = this.getFileSuffix(file);

      if (this.fileType == "xls" || this.fileType == "pdf") {
        this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "加载中...",
        });
        let _this = this;
        this.$nextTick(() => {
          let iframe = document.createElement("iframe");
          iframe.id = "preview_iframe";
          iframe.style.width = "100%";
          iframe.style.height = "100%";
          iframe.style.border = "none";
          if (this.fileType == "xls") {
            if (browser().android) {
              iframe.src =
                "https://api.idocv.com/view/url?url=" +
                encodeURIComponent(file + "?times=" + new Date().getTime());
            } else {
              iframe.src =
                "https://view.officeapps.live.com/op/view.aspx?src=" + file;
            }
          } else {
            iframe.src =
              window.location.origin +
              "/pdf/web/viewer.html?file=" +
              encodeURIComponent(file);
          }
          if (iframe.attachEvent) {
            iframe.attachEvent("onload", function () {
              _this.$toast.clear();
            });
          } else {
            iframe.onload = function () {
              _this.$toast.clear();

              // setTimeout(() => {
              //     let dom =  document.querySelector('#preview_iframe').contentWindow.document
              //     let scripts = dom.querySelectorAll('script[src]')
              //     if(scripts)
              // }, 2000);
            };
          }
          document.querySelector("#previewIframe").appendChild(iframe);
        });
      } else if (this.fileType == "doc") {
        //     // this.previewUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + file
      }
    },
  },
};
</script>

<style lang="less" scoped>
.preview {
  padding: 0;
  /deep/.van-field__control {
    display: flex;
    flex-direction: column;
  }
}
.preview_file {
  width: 100%;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  background: #f7f7f7;
  padding: 0.08rem;
  margin-bottom: 0.08rem;
  box-sizing: border-box;
  .preview_item {
    display: flex;
    align-items: center;
    flex-basis: 70%;
  }
  .preview_btn {
    text-align: right;
    flex-basis: 30%;
  }
}
</style>