使用插件实现pdf,word预览功能

效果

代码:

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

html 复制代码
      <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>
javascript 复制代码
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 = "预览";
  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("系统异常,请联系管理员");
      });
  } else {
    message.error("文件不存在,无法下载");
  }
};
相关推荐
somethingGoWay3 小时前
wpf .netcore 导出pdf文件
pdf·wpf·.netcore
小白电脑技术11 小时前
PDF教程|如何把想要的网页保存下来?
pdf·电脑
我没想到原来他们都是一堆坏人14 小时前
通过Gen AI SDK调用gemini 2.5 pro,单独上传pdf文件 | ai agent 开发笔记 2025.9.2 Day 2
ai·google·pdf·sdk·gemini
AI视觉网奇19 小时前
麒麟系统 doc转pdf
linux·运维·pdf
CodeCraft Studio20 小时前
国产化PDF处理控件Spire.PDF教程:如何在 Java 中通过模板生成 PDF
java·python·pdf·spire.pdf·java创建pdf·从html创建pdf
janthinasnail2 天前
使用Docker安装Stirling-PDF(PDF工具)
docker·pdf
海斗星河万里长2 天前
ConvertAPI:PDF转Word的便捷之选
pdf
weixin_584121432 天前
vue3+ts导出PDF
javascript·vue.js·pdf
Access开发易登软件3 天前
Access开发导出PDF的N种姿势,你get了吗?
后端·低代码·pdf·excel·vba·access·access开发