使用插件实现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("文件不存在,无法下载");
  }
};
相关推荐
mixiumixiu3 小时前
免费 PDF 转 Word 工具:无水印 / 支持批量转换,本地运行更安全【附工具下载】
pdf
Humbunklung5 小时前
C# WPF 实现读取文件夹中的PDF并显示其页数
pdf·c#·wpf·npoi·gemini·itext
全栈技术负责人13 小时前
前端静态资源优化
前端·性能优化·pdf
SEO-狼术1 天前
Find Content Fast in PDF Documents
pdf
Hi202402171 天前
支持OCR和AI解释的Web PDF阅读器:解决大文档阅读难题
pdf·flask·llm·ocr·阅读器
VB5942 天前
《考研 考证 各学科 各专业 思维导图汇总》PDF 5.2GB
考研·pdf
软件工程小施同学2 天前
计算机学报 2025年 区块链论文 录用汇总 附pdf下载
pdf·区块链
VB5942 天前
《中国传世名画》《中国传世山水画》《中国传世人物画》百科全书式的中国名画,PDF,294M
pdf
家庭云计算专家2 天前
ONLYOFFICE深度解锁系列.13-如何复制、重新排序 PDF 页面:onlyoffice 9.0.3 新功能
pdf·onlyoffice·协作空间·onlyoffice开发版·onlyoffice新功能·onlyoffice开发者版
Eiceblue4 天前
PDF转Markdown - Python 实现方案与代码
开发语言·vscode·python·pdf