This is the 22nd day of my participation in Gwen Challenge

One, foreword

I have used seafile + onlyOffice (online document + web disk) before, and solved some bugs in seafile in the process of use. Of course, the code in seafile is also written well, and the idea of file processing (storage) can be learned.

I want to summarize the output.

I’ll use this article as a primer and maybe take a look at OnlyOffice later.

ONLYOFFICEDocument Generator supports all common document formats:

Corresponding document: Document generator

  1. Can openDOC,DOCX,ODT,RTF,TXT,XLS,XLSX,ODS,CSV,PPT,PPSX,PPS,ODPandPPTX
  2. And save forDOCX,ODT,XLSX,PPTX 或 PDF




Second, function development

The main process can be divided into three steps:

  1. Start theonlyofficeThe container
  2. Development service dockingonlyoffice
  3. test

Basic process, as shown in figure:


(1) StartonlyofficeThe container

Note:

  1. Adopt the latest community version:Onlyoffice/documentserver: 5.4.2.46
  2. Mapping an internal port to a host:-p 8889:80


The operation is as follows:

$Sudo docker run - d - it - p, 8889:80 onlyoffice/documentserver: 5.4.2.46 
a54f87f65e19cdadee628b619dcd155fcbabfd9309dc9e632f8a66f00824f347

$ sudo docker psThe CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES a54f87f65e19 onlyoffice/documentserver: 5.4.2.46 "/ bin/sh -c / app/ds /..." 44 seconds ago Up 42 seconds 443/ TCP, 0.0.0.0:8889->80/ TCP practical_faradayCopy the code


(2) Develop service dockingonlyoffice

The main process can be divided into three parts:

  1. Open the file: It needs to be developed again to determine whether the corresponding file is preview/editable
  2. Edit file: Hand overonlyoffice
  3. Save file: need secondary development processing, provide callback interface

Save the document API address: (link) [api.onlyoffice.com/editors/sav…].


1) Business code

Backend development framework, using SpringBoot.

Here is an example of the main steps:

  1. Entry methods: handle file parameters, etc
  2. Use the corresponding template to display
  3. Callback interface: Used to save files after editing


The following is the minimalist code, mainly to help comb the logic, the code is as follows:

The part that the author thinks is not important is hidden here, which does not affect the reading.

@Slf4j
@RestController
public class IndexController {
    
    @GetMapping("index")
    public ModelAndView viewFile(a) {
        
        // Set file properties and file permissions
        // 1. File attributes include file type, file key, and file path
        // 2. File permissions: downloadable, editable, printable, reviewable
        DocumentDTO document = generateDocumentInfo(fileDTO);
        
        // Set the onlyOffice properties and user information
        // 1. User information: user name and Id
        // 2. Related attributes: callback address, edit mode, language (for internationalization)
        EditorConfigDTO editorConfig = generateEditorConfig(fileDTO);
        
        // Redirect the template to the page
        ModelAndView modelAndView = new ModelAndView("/onlyoffice");
        // Set file properties
        modelAndView.addObject(document, document);
        // Set editable configuration properties
        modelAndView.addObject(editorConfig, editorConfig);
        // Set the file type. Onlyoffice is provided with two formats: TXT and spreadsheet by default
        modelAndView.addObject(documentType, "txt");

        return modelAndView;
    }
    
    Tips: the onlyOffice callback saves the file **@returnSuccessful * /
    @PostMapping("/callback")
    @ResponseBody
    public String callback(a) {

        log.info("callback");
        log.info("callback....." + System.currentTimeMillis());

        return "{\"error\": 0}"; }}Copy the code


2) Template page

Here the server renders the template file framework using Freemarker.

The template file onlyoffice. FTL is as follows:

<! DOCTYPEhtml>
<html>
<head>
    <title>${document.title}</title>
    <link rel="icon" href=""/>
    <style type="text/css">
        html.body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>

<body>

<div id="placeholder"></div>

<script type="text/javascript" src="${onlyoffice.url}/web-apps/apps/api/documents/api.js"></script>
<script type="text/javascript">

    var config = {
        "type": window.screen.width < 992 ? 'mobile' : 'desktop'."document": {
            "fileType": "${document.fileType}"."key": "${document.key}"."title": "${document.title}"."url": "${document.url}"."permissions": {
                "download": ${document.permissions.isDownload? string("true"."false")},
                "edit": ${document.permissions.isEdit? string("true"."false")},
                "print": ${document.permissions.isPrint? string("true"."false")},
                "review": ${document.permissions.isReview? string("true"."false")}}},"documentType": "${documentType}"."editorConfig": {
            "callbackUrl": "${editorConfig.callbackUrl}"."lang": "${editorConfig.lang}"."mode": "${editorConfig.mode}"."customization": {
                "forcesave": ${editorConfig.customization.isForceSave? string("true"."false")}},"user": {
                "name": "${editorConfig.user.name}"."id": "${editorConfig.user.id}"}}};var docEditor = new DocsAPI.DocEditor("placeholder", config);
</script>
</body>
</html>
Copy the code


(3) Test

The results are as follows:




Third, summary

  • seafileThe main uses are:python
  • onlyofficeThe main uses are:js

Similarly, seafile and OnlyOffice projects are well worth learning about.