WPS在线预览方案--onlyoffice+java

主业务农
466 阅读3分钟

环境搭建

docker pull onlyoffice/documentserver

docker run -i -t -d -p 8013:8013 --restart=always onlyoffice/documentserver

别忘记开放对应端口

firewall-cmd --zone=public --add-port=8013/tcp --permanent

firewall-cmd --reload

之后访问demo页面

http://IP:8013

1701310478573.jpg

这样就成功一半了

一般场景是后端提供给前端文件的链接地址，前端再拿去预览 如果觉得上面麻烦可以用现成的，能用是能用可能不稳定或有点卡

view.officeapps.live.com/op/view.asp…

使用view.officeapps.live.com/op/view.asp…

加上你要预览的文件就可以了

接下来是自己实现的预览

在对应的yaml文件添加 我们刚刚搭建好的预览服务

onlyoffice:
  document:
    host: http://ip:8013

配置类

image.png

预览模板

image.png

<!DOCTYPE html>
<html style="height: 100%;" xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
<#--    <title th:text="${title}"></title>-->
</head>
<body>
    <div class="form">
        <div id="iframeEditor"></div>
    </div>
    <script type="text/javascript" src="${apiJs}"></script>
    <!-- 先通过 th:inline=“javascript” 添加到标签，这样js代码即可访问model中的属性 -->
    <script th:inline="javascript">
        window.docEditor = new DocsAPI.DocEditor("iframeEditor",
            ${editor});
    </script>
</body>
</html>
<style>
    html {
        height: 100%;
        width: 100%;
    }

    body {
        background: #fff;
        color: #333;
        font-family: Arial, Tahoma, sans-serif;
        font-size: 12px;
        font-weight: normal;
        height: 100%;
        margin: 0;
        overflow-y: hidden;
        padding: 0;
        text-decoration: none;
    }

    .form {
        height: 100%;
    }

    div {
        margin: 0;
        padding: 0;
    }

</style>

控制层

image.png

接口

public interface OfficeCtl {
    /**
     * 根据文件后缀 获取office 中类型
     * @param extName
     * @return 文件类型
     */
     String getDocumentType(String extName);

    /**
     * 构建远程文档访问 Document
     * @param remoteUrl
     * @return
     */
     Document buildRemoteDocument(String remoteUrl);

    /**
     * 构建文档预览 DocEditor
     * @param document
     * @return
     */
     DocEditor buildPreviewDocEditor(Document document);

    /**
     * 嵌入式预览远程文件
     * @param remoteUrl
     * @return
     */
     ModelAndView previewRemoteFileOnEmbedded(String remoteUrl);


    /**
     * 文件预览
     * @param editor
     * @return
     */
    ModelAndView previewFile(DocEditor editor);

    /**
     * 文件预览 制定预览标题
     * @param editor
     * @param title
     * @return
     */
    ModelAndView previewFile(DocEditor editor, String title);


}

实现类


@Slf4j
@Service
@AllArgsConstructor
public class OfficeCtlImpl implements OfficeCtl {
    OnlyOfficeProperties officeProps;

    @Resource
    ApplicationContext context;

    @Override
    public String getDocumentType(String extName) {
        if (DocumentType.WORD_FILE.contains(extName)){
            return "word";
        }
        else if (DocumentType.CELL_FILE.contains(extName)){
            return "cell";
        }
        else if (DocumentType.SLIDE_FILE.contains(extName)){
            return "slide";
        }
        return null;
    }

    @SneakyThrows
    @Override
    public Document buildRemoteDocument(String remoteUrl) {
        HttpResponse response = HttpRequest.get(remoteUrl).execute();
        String fileType = StringUtils.substringAfterLast(remoteUrl,".");
        // 进行MD5 编码
        String fileKey = SecureUtil.md5(response.bodyStream());
        // 构建 Document
        Document document = new Document();
        document.setKey(fileKey);
        document.setTitle("tempView".concat(fileType));
        document.setFileType(fileType);
        document.setUrl(URLUtil.encode(remoteUrl));
        return document;
    }

    @SneakyThrows
    @Override
    public DocEditor buildPreviewDocEditor(Document document) {
        // 配置模式
        EditorConfig editorConfig = new EditorConfig();
        editorConfig.setMode("view");
        editorConfig.setLang("zh-CN");
        // 构建 Editor
        DocEditor docEditor = new DocEditor();
        docEditor.setDocument(document);
        docEditor.setDocumentType(getDocumentType(document.getFileType()));
        docEditor.setEditorConfig(editorConfig);
        docEditor.setHeight("100%");
        docEditor.setWeight("100%");
        return docEditor;
    }


    @SneakyThrows
    @Override
    public ModelAndView previewRemoteFileOnEmbedded(String remoteUrl) {
        Document document = buildRemoteDocument(remoteUrl);
        // 构建 Editor
        DocEditor docEditor = buildPreviewDocEditor(document);
        //设置预览端类型
        docEditor.setType(DocEditorType.EMBEDDED);
        return previewFile(docEditor);
    }


    @SneakyThrows
    @Override
    public ModelAndView previewFile(DocEditor editor) {
        return previewFile(editor, null);
    }

    @SneakyThrows
    @Override
    public ModelAndView previewFile(DocEditor editor, String title) {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("OfficeView");
        modelAndView.addObject("editor",JSONObject.toJSONString(editor));
        if (Validator.isEmpty(title)){
            modelAndView.addObject("title",editor.getDocument().getTitle());
        }
        else {
            modelAndView.addObject("title", title);
        }
        modelAndView.addObject("apiJs",officeProps.getOfficeDocumentApiJs());
        return modelAndView;
    }


}

预览端类型

public class DocEditorType {
    // 移动端预览
    public static final String MOBILE = "mobile";
    // 嵌入式预览
    public static final String EMBEDDED = "embedded";
}

文档类型


public class DocumentType {

    // 文本文档类型
    public static final Set<String> WORD_FILE = new HashSet<String>(){
        {
        add("djvu");
        add("doc");
        add("docm");
        add("docx");
        add("docxf");
        add("dot");
        add("dotm");
        add("dotx");
        add("epub");
        add("fb2");
        add("fodt");
        add("htm");
        add("html");
        add("mht");
        add("mhtml");
        add("odt");
        add("ofor");
        add("m");
        add("ott");
        add("oxps");
        add("pdf");
        add("rtf");
        add("stw");
        add("sxw");
        add("txt");
        add("wps");
        add("wpt");
        add("xml");
        add("xps");
        }
    };
    // 电子表格类型
    public static final Set<String> CELL_FILE = new HashSet<String>(){
        {
            add("csv");
            add("et");
            add("ett");
            add("fods");
            add("ods");
            add("ots");
            add("sxc");
            add("xls");
            add("xlsb");
            add("xlsm");
            add("xlsx");
            add("xlt");
            add("xltm");
            add("xltx");
            add("xml");
        }
    };
    // 演示文稿类型
    public static final Set<String> SLIDE_FILE = new HashSet<String>(){
        {
            add("dps");
            add("dpt");
            add("fodp");
            add("odp");
            add("otp");
            add("pot");
            add("potm");
            add("potx");
            add("pps");
            add("ppsm");
            add("ppsx");
            add("ppt");
            add("pptm");
            add("pptx");
            add("sxi");
        }
    };

}

就这些，马马虎虎

avatar
文章
阅读
粉丝