ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

使用OnlyOffice接入office在线编辑

2021-05-12 15:34:44  阅读:593  来源: 互联网

标签:false option office 接入 true fileType fileName OnlyOffice log


搭建OnlyOffice

使用Docker搭建OnlyOffice服务

# 拉取包涵中文字符的镜像
docker pull kenlk/onlyoffice
# 启动容器
docker run -i -t -d -p 80:80 --restart=always kenlk/onlyoffice

需要做https设置及宿主机文件夹映射,请参考官网文档:https://helpcenter.onlyoffice.com/installation/docs-community-install-docker.aspx

前端Vue接入Demo

  1. index.html引入api.js
<script type="text/javascript" src="http://onlyoffice服务地址/web-apps/apps/api/documents/api.js"></script>
  1. 构建加载参数
<template>
  <div id="monitorOffice"></div>
</template>
<script>
import { handleDocType } from '@/utils/constants'
export default {
  props: {
    option: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      doctype: ''
    }
  },
  mounted() {
    if (this.option.url) {
      this.setEditor(this.option)
    }
  },
  methods: {
    setEditor(option) {
      this.doctype = handleDocType(option.fileType)
      // office配置参数
      let config = {
        document: {
          fileType: option.fileType,
          key: option.key,
          title: option.title,
          permissions: {
            comment: false,
            download: false,
            modifyContentControl: true,
            modifyFilter: true,
            print: false,
            edit: option.isEdit//是否可以编辑: 只能查看,传false
            // "fillForms": true,//是否可以填写表格,如果将mode参数设置为edit,则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
            // "review": true //跟踪变化
          },
          url: option.url
        },

        documentType: this.doctype,
        editorConfig: {
          callbackUrl: option.editUrl,//"编辑word后保存时回调的地址,这个api需要自己写了,将编辑后的文件通过这个api保存到自己想要的位置
          //语言设置
          lang: 'zh-CN',
          location: 'zh-CN',
          customization: {
            autosave: false,//是否自动保存
            chat: false,
            forcesave: true,// true 表示强制文件保存请求添加到回调处理程序
            feedback: {
              visible: false // 隐藏反馈按钮
            },
            comments: false,
            help: false,
            hideRightMenu: true,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
            logo: {
              image: 'https://file.iviewui.com/icon/viewlogo.png',
              imageEmbedded: 'https://file.iviewui.com/icon/viewlogo.png'
            },
            spellcheck: false//拼写检查
          }
        },
        width: '100%',
        height: '100%'
      }
      let docEditor = new DocsAPI.DocEditor('monitorOffice', config)
    }
  },
  watch: {
    option: {
      handler: function(n, o) {
        this.setEditor(n)
        this.doctype = handleDocType(n.fileType)
      },
      deep: true
    }
  }
}
</script>

export function handleDocType(fileType) {
  let docType = '';
  let fileTypesDoc = [
    'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps'
  ];
  let fileTypesCsv = [
    'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx'
  ];
  let fileTypesPPt = [
    'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx'
  ];
  if (fileTypesDoc.includes(fileType)) {
    docType = 'text'
  }
  if (fileTypesCsv.includes(fileType)) {
    docType = 'spreadsheet'
  }
  if (fileTypesPPt.includes(fileType)) {
    docType = 'presentation'
  }
  return docType;
}

详细参数,参考官网api: https://api.onlyoffice.com/editors/advanced

后端回调接口

  1. 保存回调直接保存阿里OSS中
@Slf4j
@RestController
@RequestMapping("/api")
@Api(tags = "文档相关接口")
public class DocumentApiController {

    @Autowired
    private OssService aliOssService;

    /**
     * 编辑后回调--保存文件实体
     * <p>onlyoffice在编辑后关闭文件的时候,会回调该接口</p>
     *
     * @param callback
     */
    @PostMapping("/callback")
    public DocumentEditCallbackResponse saveDocumentFile(@RequestBody DocumentEditCallback callback, @RequestParam("fileName") String fileName) throws Exception {
        if (log.isInfoEnabled()) {
            log.info("### 编辑后回调, 回调信息:{}", callback);
        }
        log.info("文档状态:{}", callback.getStatus());
        // 需要保存时写出文件
        if (callback.getStatus() == DocumentStatus.READY_FOR_SAVING.getCode() || callback.getStatus() == DocumentStatus.BEING_EDITED_STATE_SAVED.getCode()) {
            if (log.isDebugEnabled()) {
                log.debug("@@@ 开始保存文件。。。");
            }
            String url = null;
            if (StringUtils.hasText(fileName)) {

                if (fileName.contains("http")) {
                    fileName = URLUtil.getPath(fileName);
                    if (StringUtils.hasText(fileName)) {
                        // 去除"/"
                        fileName = fileName.substring(1);
                    }
                }
                url = aliOssService.uploadFile(callback.getUrl(), fileName);
                log.info("url==={}", url);
            }
            if (log.isDebugEnabled()) {
                log.debug("@@@ 保存文件结束!");
            }
            if (StringUtils.isEmpty(url)) {
                return DocumentEditCallbackResponse.failue();
            }
        }
        return DocumentEditCallbackResponse.success();
    }

}


标签:false,option,office,接入,true,fileType,fileName,OnlyOffice,log
来源: https://www.cnblogs.com/ken-lk/p/14759916.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有