Vue使用OnlyOffice预览文档方案

1. 服务器安装OnlyOffice ~~ 找后台或运维
2. OfficePreview.vue

<template>
  <div id="officePreview"></div>
</template>

<script setup>
import { onMounted } from "vue";

const props = defineProps({
  previewUrl: {
    type: String,
    default: "",
  },
  previewName: {
    type: String,
    default: "文件名字",
  },
});

const getInfo = (url, name) => {
  var decodedUrl = decodeURIComponent(url);
  var path = new URL(decodedUrl).pathname;
  var filename = name || path.split("/").pop();
  var fileExtension = filename.split(".").pop();
  var documentType;
  var paths = path.split("/");
  var key = paths[paths.length - 2]; // key唯一，由字母数字组成。
  if (
    [
      "djvu",
      "doc",
      "docm",
      "docx",
      "docxf",
      "dot",
      "dotm",
      "dotx",
      "epub",
      "fb2",
      "fodt",
      "htm",
      "html",
      "mht",
      "mhtml",
      "odt",
      "oform",
      "ott",
      "oxps",
      "pdf",
      "rtf",
      "stw",
      "sxw",
      "txt",
      "wps",
      "wpt",
      "xml",
      "xps",
    ].includes(fileExtension.toLowerCase())
  ) {
    documentType = "word";
  } else if (
    [
      "csv",
      "et",
      "ett",
      "fods",
      "ods",
      "ots",
      "sxc",
      "xls",
      "xlsb",
      "xlsm",
      "xlsx",
      "xlt",
      "xltm",
      "xltx",
      "xml",
    ].includes(fileExtension.toLowerCase())
  ) {
    documentType = "cell";
  } else if (
    [
      "dps",
      "dpt",
      "fodp",
      "odp",
      "otp",
      "pot",
      "potm",
      "potx",
      "pps",
      "ppsm",
      "ppsx",
      "ppt",
      "pptm",
      "pptx",
      "sxi",
    ].includes(fileExtension.toLowerCase())
  ) {
    documentType = "slide";
  } else {
    documentType = "unknown";
  }
  return {
    filename: filename,
    fileExtension: fileExtension,
    documentType: documentType,
    key: key,
  };
};

const сonnectEditor = () => {
  console.log("0000123", props.previewUrl);
  const { filename, fileExtension, documentType, key } = getInfo(
    props.previewUrl,
    props.previewName
  );

  var config = {
    document: {
      fileType: fileExtension,
      key: key,
      title: props.previewName || filename,
      url: props.previewUrl,
    },
    documentType: documentType,
    editorConfig: {
      mode: "view",
    },
    height: "100%",
    width: "100%",
  };
  console.log(config);
  // eslint-disable-next-line
  new DocsAPI.DocEditor("officePreview", config);
};

onMounted(() => {
  if (typeof DocsAPI === "undefined") {
    const script = document.createElement("script");
    script.src =
      process.env.VUE_APP_ONLYOFFICE_DOCUMENTSERVER +
      "/web-apps/apps/api/documents/api.js";
    script.async = true;
    script.addEventListener("load", сonnectEditor);

    document.head.appendChild(script);
  } else {
    сonnectEditor();
  }
});
</script>

4. 定义process.env.VUE_APP_ONLYOFFICE_DOCUMENTSERVER

// .env.dev
VUE_APP_FILE_PATH = 'http://192.168.3.208/doc-info'
VUE_APP_ONLYOFFICE_DOCUMENTSERVER = 'http://192.168.3.208:7073'

5. 路由

{
	path: "office-preview",
	name: "office-preview",
	component: () => import("@/components/office-preview/index.vue"),
},

6. 预览函数

import router from "@/router";

// 预览文件
export const handlePreview = (file) => {
  if (!file) {
    return;
  }

  const name = file.documentName;
  const url = (process.env.VUE_APP_FILE_PATH || "") + file.documentUrl;
  if (!name || !url || !router) return;

  const lowerCaseName = name.toLowerCase();
  const suffixName = "." + lowerCaseName.split(".").pop();
  // 1. 处理文本和文档类型
  if ([".txt", ".doc", ".docx", ".pdf"].includes(suffixName)) {
    let routeUrl = router.resolve({
      name: "office-preview",
      query: { url, name },
    });
    window.open(routeUrl.href, "_blank");
    return;
  }
  // 2. 处理图片和视频类型
  if (
    [".png", ".jpg", ".jpeg", ".bmp", ".gif", ".mp4", ".mov"].includes(
      suffixName
    )
  ) {
    window.open(url, "_blank");
    return;
  }
  // 3. 提示不支持的文件类型
  ElMessage({
    message: "暂不支持该格式文件预览",
    type: "warning",
  });
};

7. 调试经验
   a. http://192.168.3.205:7073/web-apps/apps/api/documents/api.js 是否能正常访问
   b. http://192.168.3.205:7073 是否能正常上传预览文件
   c. 嵌入后，报这个错表示跨域，请找对应人：Access to fetch at 'http://192.168.3.205:7073/web-apps/apps/api/documents/api.js' from origin 'http://192.168.3.208' has been blocked by CORS policy
   d. 检查文件key是否唯一且为纯字母数字格式。否则导致预览出不来。