+pdf预览插件

liuyg

2021-11-26 8fb281df7bb93d918c2bf75f29405fa9ce53bad8

 src/page/index/top/userSManual.vue

@@ -1,10 +1,243 @@
<template>
  <div>用户手册</div>
  <div class="userSManual">
    <!-- {{ form.link }} -->
    <basic-container id="PDFmain">
      <!-- <embed :src="form.link" type="application/pdf" width="800" height="800" /> -->
      <!-- <object
        :data="form.link"
        type="application/pdf"
        width="800"
        height="800"
      ></object> -->
      <iframe
        id="PDFmainIFRAM"
        src="/pfd/build/generic/web/viewer.html"
        width="100%"
        height="100%"
      >
      </iframe>
    </basic-container>
    <div class="userSManual_upBut" :style="{ display: userSManual_upBut }">
      <el-button type="primary" round @click="openUps">上传用户手册</el-button>
    </div>
    <el-dialog
      title="上传用户手册"
      append-to-body
      :visible.sync="openUp"
      width="70%"
    >
      <avue-form
        :option="option"
        v-model="form"
        @submit="handleSubmit"
        :upload-before="uploadBefore"
        :upload-after="uploadAfter"
      ></avue-form>
    </el-dialog>
  </div>
</template>

<script>
export default {};
import { mapGetters } from "vuex";
import { add, getDetails } from "@/api/resource/attach";
export default {
  data() {
    return {
      openUp: false,
      userSManual_upBut: "none",
      index: 0,
      link: "",
      option: {
        tabs: true,
        tabsActive: 1,
        group: [
          {
            label: "保安服务企业技术交流群二维码信息",
            prop: "info",
            column: [
              {
                label: "用户手册",
                type: "upload",
                // listType: "picture-img",
                propsHttp: {
                  res: "data",
                  url: "link",
                },
                // canvasOption: {
                //   text: " ",
                //   ratio: 0.1,
                // },
                action: "/api/blade-resource/oss/endpoint/put-file",
                // action: "/api/blade-resource/oss/endpoint/put-file-attach",
                // tip: "只能上传jpg/png用户头像，且不超过500kb",
                span: 24,
                row: true,
                prop: "link",
                labelWidth: 180,
              },
              {
                label: "首次上传时间",
                span: 24,
                row: true,
                prop: "createTime",
                labelWidth: 180,
                type: "datetime",
                disabled: true,
                format: "yyyy-MM-dd HH:mm:ss",
                valueFormat: "yyyy-MM-dd HH:mm:ss",
              },
              {
                label: "上次更新时间",
                span: 24,
                row: true,
                prop: "updateTime",
                labelWidth: 180,
                type: "datetime",
                disabled: true,
                format: "yyyy-MM-dd HH:mm:ss",
                valueFormat: "yyyy-MM-dd HH:mm:ss",
              },
            ],
          },
        ],
      },
      form: {},
      intime: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.handleWitch();
    if (this.userInfo.role_name == "administrator") {
      this.userSManual_upBut = "block";
    } else {
      this.userSManual_upBut = "none";
    }
  },
  methods: {
    openUps() {
      this.openUp = true;
    },
    uploadBefore(file, done, loading, column) {
      this.link = "";
      this.form = {};
      done();
    },
    uploadAfter(res, done, loading, column) {
      this.link = res.link;
      done();
    },
    handleSubmit(form, done) {
      if (!this.link) {
        this.$message({
          message: "请上传后提交",
          type: "warning",
        });
        done();
        return;
      }
      if (this.index === 0) {
        form["type"] = 10;
        form["link"] = this.link;
        // console.log(form);
        // return;
        add(form).then(
          (res) => {
            if (res.data.success) {
              this.handleWitch();
              this.$message({
                type: "success",
                message: "用户手册上传成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
            done();
            this.link = "";
            this.form = {};
            this.openUp = false;
          },
          (error) => {
            window.console.log(error);
            done();
          }
        );
      }
    },
    havepdf() {
      var pdf = document.getElementById("PDFmainIFRAM").contentWindow;
      if (pdf.setUrl) {
        return pdf;
      } else {
        return false;
      }
    },
    setUrl(url) {
      this.intime = setInterval(() => {
        let havePdf = this.havepdf();
        if (havePdf) {
          //   console.log("已加载完");
          havePdf.setUrl(url);
          //   console.log(this.intime, 1);
          clearInterval(this.intime);
          //   console.log(this.intime, 2);
          this.intime = "";
          //   console.log(this.intime, 3);
        } else {
          //   console.log("没加载玩");
        }
        // var pdf = document.getElementById("PDFmainIFRAM").contentWindow;
        // pdf.setUrl(url);
      }, 500);
    },
    handleWitch() {
      if (this.index === 0) {
        getDetails(10).then((res) => {
          const att = res.data.data;
          if (this.intime) {
            clearInterval(this.intime);
            this.setUrl(att.link);
          } else {
            this.setUrl(att.link);
          }
          this.form = {
            id: att.id,
            link: att.link,
            createTime: att.createTime,
            updateTime: att.updateTime,
          };
        });
      }
    },
  },
};
</script>

<style>
<style lang="scss" scoped>
.userSManual {
  width: 100%;
  height: 97%;
  //   border: 1px solid red;
  box-sizing: border-box;
  position: relative;
  .userSManual_upBut {
    position: absolute;
    right: 56px;
    top: 58px;
  }
  #PDFmain {
    width: 100%;
    height: 100%;
    // border: 1px solid red;
  }
  .el-card.basic-container__card.is-always-shadow {
    width: 100%;
    height: 100%;
  }
}
</style>