浏览器页面集成嵌入word excel功能

在工作中遇到的需求 需要在前端页面中导入.docx文件并进行在线编辑; 网上搜索了一下大概有以下两种解决方案

解决方案1 使用CKEditor在线编辑器

1. 一个在线的编辑器 加强版文本域 可以提供类似word的功能 并且可以导出为word
2. 文档地址WYSIWYG HTML Editor with Collaborative Rich Text Editing (ckeditor.com)

在react中使用 CKEditor创建一个基本的编辑器

import * as React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default function Editer() {
    return (
            <CKEditor    // Editor实例
                editor={ClassicEditor}  // 选择编辑器类型
                data="<h1>测试标题</h1>" // 编辑器初始内容 (内容为html)
		
                onReady={editor => {     // onReady方法  接收editor实例
                    console.log('Editor is ready to use!', editor);
                    const data = editor.getData();  // 使用实例getData() setData()方法获取和设置内容
                    editor.setData(template)
                }}
                onChange={(event, editor) => { // onChange方法
                    const data = editor.getData();
                    console.log({ event, editor, data });
                }}
                onBlur={(event, editor) => {  // onBlur方法
                    console.log('Blur.', editor);
                }}
                onFocus={(event, editor) => {  // onFocus方法
                    console.log('Focus.', editor);
                }}
            />
    );
}

展示word文件到CKEditor

1. 如果需要展示word文件 可以利用office自带的word转换为html文功能 获得转换后的模板代码
2. 使用editor.setData(htmlTemplate) 来设置初始内容

解决方案2 直接使用wps office提供的浏览器嵌入方案(收费)

有一说一 收费的固然才是最好的

这里以wps金山在线文档为例 提供了在浏览器嵌入word excel的功能

文档地址 : WPS 开放平台