Vent-App/pages/filecenter/fileModel.vue

<template>
  <view class="container">
    <div id="fileEdit"></div>
  </view>
</template>

<script>
import configService from "../../common/service/config.service";

export default {
  data() {
    return {
      editID: "", //文件ID
      fileType: "", //文件类型
    };
  },
  onLoad(data) {
    this.editID = data.id;
    this.fileType = data.fileSuffix.slice(1);
    this.initDocEditor();
  },
  methods: {
    initDocEditor() {
      new DocsAPI.DocEditor(
        "fileEdit", // 元素id
        {
          type: "desktop",
          width: "100%",
          height: "100%",
          document: {
            title: "文档管理",
            url:
              configService.apiUrl +
              ":9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=" +
              this.editID, //id表示文件id，后端接口用这个id来加载文件
            // url: `${window.location.origin}:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=${this.editID}`, //id表示文件id，后端接口用这个id来加载文件
            fileType:
              this.fileType == "doc"
                ? "docx"
                : this.fileType == "xls"
                ? "xlsx"
                : this.fileType == "ppt"
                ? "pptx"
                : this.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
            key: "",
            lang: "zh-CN",
            permissions: {
              download: true, //是否可下载
              edit: true,
              fillForms: true,
              print: true, //是否可打印
            },
          },
        }
      );
    },
  },
};
</script>
<style scoped>
::v-deep .suffix {
  height: 32px;
  line-height: 32px;
  margin-left: 5px;
  color: #fff;
}
.main {
  /* margin-top: 100rpx; */
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  margin-top: 80px; /* 内容区域顶部留出导航栏的高度 */
}
</style>