使用插件实现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("文件不存在,无法下载");
  }
};
相关推荐
阿幸软件杂货间2 天前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
reembarkation2 天前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation2 天前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
Light602 天前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度(一气呵成)
linux·spring boot·pdf·gpcl6/ghostpcl·s3/oss·权限与审计·异步与进度
伟贤AI之路2 天前
【分享】中小学教材课本 PDF 资源获取指南
人工智能·pdf
东风西巷3 天前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
Sunny_yiyi3 天前
Java根据模版导出PDF文件
java·开发语言·pdf
小*-^-*九4 天前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
千册4 天前
pyside6 的pdf显示测试 -- 01
开发语言·python·pdf
qq_172805594 天前
Go 语言 PDF 生成库综合比较与实践指南
开发语言·golang·pdf