vue3室友iframe实现pdf弹窗预览

效果：

代码：

弹窗

    <div class="viewBox">
      <a-modal
        class="modalBox"
        v-model:visible="visible"
        :title="title"
        @ok="handleOk"
        :bodyStyle="bodyStyle"
        :width="1300"
        :maskClosable="false"
        :destroyOnClose="true"
        :footer="null"
        @cancel="handleCancel"
        :maskStyle="{}"
        :dialogStyle="{}"
      >
        <vue-office-docx :src="docSrc" v-if="docSrc" />

        <div v-if="pdfSrc" style="width: 100%; height: 100%">
          <iframe :src="pdfUrl" style="width: 100%; height: 100%"></iframe>
        </div>

        <!-- <vue-office-pdf :src="pdfSrc" v-if="pdfSrc" /> -->
      </a-modal>
    </div>

let docSrc = ref("");
let pdfSrc = ref("");
const bodyStyle = {
  height: `700px`,
  // marginTop: '-40px'
  // padding: '0 24px'
};
let pdfUrl = ref("");
const preview = (record) => {
  visible.value = true;
  title.value = "预览";
  if (isPdf(record.FilePath[0].DisPlayName)) {
    return new Promise((resolve, reject) => {
      let blob = null;
      let xhr = new XMLHttpRequest();
      xhr.open(
        "GET",
        window.defaultconfig.fileUrl +
          "/api/FileManage/Download" +
          `?Id=${record.FilePath[0].FileId}`
      );
      xhr.responseType = "blob";
      xhr.onload = () => {
        blob = xhr.response;
        const blobob = new Blob([blob], {
          type: "application/pdf;charset=utf-8",
        });
        const href = window.URL.createObjectURL(blobob);
        pdfUrl.value = href;
        pdfSrc.value = "true";
        // window.open(href);
        // resolve(file);
      };
      xhr.onerror = (e) => {
        reject(e);
      };
      xhr.send();
    });
  }
  if (isDoc(record.FilePath[0].DisPlayName)) {
    axios
      .get(
        window.defaultconfig.fileUrl +
          "/api/FileManage/Download" +
          `?Id=${record.FilePath[0].FileId}`,
        { responseType: "arraybuffer" }
      )
      .then((res) => {
        const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        let fileReader = new FileReader();
        fileReader.readAsArrayBuffer(blob);
        fileReader.onload = () => {
          docSrc.value = fileReader.result;
        };
      });
  }
};
function isPdf(file) {
  var fileExtension = file.split(".").pop().toLowerCase();
  return fileExtension === "pdf";
}
function isDoc(file) {
  var fileExtension = file.split(".").pop().toLowerCase();
  return fileExtension === "docx";
}
const handleOk = () => {
  visible.value = false;
  docSrc.value = "";
  pdfSrc.value = "";
};
const handleCancel = () => {
  visible.value = false;
  docSrc.value = "";
  pdfSrc.value = "";
};