使用 Flask 和 ONLYOFFICE 实现文档在线编辑功能

news2024/11/12 11:12:13

提示：CSDN 博主测评ONLYOFFICE

文章目录

引言
技术栈
环境准备
- 安装 ONLYOFFICE 文档服务器
- 获取 API 密钥
- 安装 Flask 和 Requests
创建 Flask 应用
- 项目结构
- 编写 `app.py`
- 创建模板 `templates/index.html`
运行应用
功能详解
- 文档上传
- 生成编辑器 URL
- 显示编辑器
- 回调处理
安全性和性能优化
- 安全性
- 性能优化
结论

引言

ONLYOFFICE 文档8.2版本已发布
在这里插入图片描述

随着互联网技术的发展，越来越多的应用程序需要支持文档的在线编辑和协作功能。ONLYOFFICE 是一个功能强大的在线办公套件，支持文档、表格和演示文稿的创建与编辑，并提供了丰富的 API 和 SDK 支持多种开发环境。本文将详细介绍如何在 Flask 应用程序中集成 ONLYOFFICE，实现文档的上传、在线编辑和保存功能。

技术栈

Flask：一个轻量级的 Python Web 框架，适合快速开发小型应用。
ONLYOFFICE：一个开源的在线办公套件，提供文档编辑、查看和转换功能。
Requests：一个用于发送 HTTP 请求的 Python 库。

环境准备

安装 ONLYOFFICE 文档服务器

下载和安装：
访问 ONLYOFFICE 官方网站，下载适用于操作系统的文档服务器安装包，并按照官方文档进行安装。
启动服务：
安装完成后，启动 ONLYOFFICE 文档服务器。默认情况下，服务器会监听 8080 端口。

获取 API 密钥

在 ONLYOFFICE 文档服务器的管理界面中，获取 API 密钥。这个密钥将在后续的 API 调用中用于身份验证。

安装 Flask 和 Requests

在终端中运行以下命令，安装 Flask 和 Requests 库：

pip install flask requests

创建 Flask 应用

项目结构

创建一个名为 onlyoffice_integration 的文件夹，并在其中创建以下文件和文件夹：

onlyoffice_integration/
│
├── app.py
├── templates/
│   └── index.html
└── static/

编写 `app.py`

这是主应用文件，负责处理上传、编辑和保存文档的功能。

from flask import Flask, request, send_from_directory, render_template, jsonify
import os
import requests

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = './uploads'
app.config['ONLYOFFICE_URL'] = 'http://localhost:8080'
app.config['ONLYOFFICE_API_KEY'] = 'your_api_key'

if not os.path.exists(app.config['UPLOAD_FOLDER']):
    os.makedirs(app.config['UPLOAD_FOLDER'])

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        if 'file' not in request.files:
            return 'No file part'
        file = request.files['file']
        if file.filename == '':
            return 'No selected file'
        if file:
            filename = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
            file.save(filename)
            # Generate the document editor URL
            doc_url = generate_doc_editor_url(filename)
            return render_template('index.html', doc_url=doc_url)
    return render_template('index.html')

def generate_doc_editor_url(doc_path):
    url = f"{app.config['ONLYOFFICE_URL']}/web-apps/apps/api/documents/api.js"
    doc_info = {
        "document": {
            "url": f"http://{request.host}/{os.path.basename(doc_path)}",
            "fileType": "docx",
            "key": os.path.basename(doc_path),
            "title": os.path.basename(doc_path)
        },
        "documentType": "text",
        "editorConfig": {
            "callbackUrl": f"http://{request.host}/callback",
            "lang": "en-US",
            "customization": {
                "leftMenu": False,
                "chat": False
            }
        }
    }
    response = requests.post(
        f"{app.config['ONLYOFFICE_URL']}/web-apps/apps/api/documents/api.js",
        json=doc_info,
        headers={"Authorization": f"Bearer {app.config['ONLYOFFICE_API_KEY']}"}
    )
    if response.status_code == 200:
        return response.json()['url']
    else:
        raise Exception("Failed to generate document editor URL")

@app.route('/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

@app.route('/callback', methods=['POST'])
def callback():
    data = request.json
    # Process the callback data here
    print(data)
    return jsonify({"status": "success"})

if __name__ == '__main__':
    app.run(debug=True)

在这里插入图片描述

创建模板 `templates/index.html`

这是一个简单的 HTML 文件，用于上传文件并显示编辑器链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ONLYOFFICE Integration</title>
</head>
<body>
    <h1>Upload and Edit Document</h1>
    <form method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <button type="submit">Upload</button>
    </form>
    {% if doc_url %}
        <h2>Edit Document</h2>
        <iframe src="{{ doc_url }}" width="100%" height="600px"></iframe>
    {% endif %}
</body>
</html>