效果

代碼：

插件地址：?https://github.com/501351981/vue-office

      <a-modal
        v-model:visible="visible"
        :title="title"
        @ok="handleOk"
        :bodyStyle="bodyStyle"
        :width="1200"
        :maskClosable="false"
        :destroyOnClose="true"
        :footer="null"
        @cancel="handleCancel"
      >
        <vue-office-docx :src="docSrc" />
        <vue-office-pdf :src="pdfSrc" />
      </a-modal>

const visible = ref(false);
const title = ref("");
let docSrc = ref("");
let pdfSrc = ref("");
const bodyStyle = {
  // background: '#f0f2f5',
  // padding: '10px 10px 1px',
  minHeight: `431px`,
};
const preview = (record) => {
  visible.value = true;
  title.value = "預(yù)覽";
  if (isPdf(record.FilePath[0].DisPlayName)) {
          pdfSrc.value=window.defaultconfig.fileUrl +"/api/FileManage/Download" +`?Id=${record.FilePath[0].FileId}`
        }
  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 = "";
};
const downLoadEvent = (param2) => {
  //下載操作
  if (
    Array.isArray(param2.FilePath) &&
    param2?.FilePath?.length &&
    param2?.FilePath[0]?.FileId
  ) {
    axios
      .get(
        window.defaultconfig.fileUrl +
          "/api/FileManage/Download" +
          `?Id=${param2.FilePath[0].FileId}`,
        { responseType: "arraybuffer" }
      )
      .then((res) => {
        const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        const objectUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.download = param2.FilePath[0].DisPlayName;
        a.href = objectUrl;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      })
      .catch((error) => {
        message.error("系統(tǒng)異常，請(qǐng)聯(lián)系管理員");
      });
  } else {
    message.error("文件不存在，無(wú)法下載");
  }
};

?這個(gè)一定要固定版本，不然線上pdf可能會(huì)預(yù)覽報(bào)錯(cuò)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-650446.html

到了這里，關(guān)于使用插件實(shí)現(xiàn)pdf，word預(yù)覽功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！