alist 通过 iframe 嵌入 onlyoffice 的预览与编辑方式分享 #8271

LainHE · 2025-04-01T09:25:35Z

LainHE
Apr 1, 2025

序言

整个摸索过程极其漫长（回调程序给我整麻了），这篇文章很难完全将所有过程及内容全部囊括进去，本人尽量将所有内容分享出来，希望对各位有些许帮助。

有任何优化建议都可以互相讨论！

以下是一些特别说明：

整个过程使用了alist、onlyoffice (documentserver)、nginx、php，所有服务与中间件均通过docker方式部署，其中 nginx、php 网络模式为 host，alist、onlyoffice 网络模式为bridge 但增加了 --add-host=host.docker.internal:host-gateway 用于保证链接。
个人专注于本地局域网使用，请自行更改代码中所有xxxx、x.x.x.x:xxxx，x.x.x.x:yyyy等部分，如也需局域网使用，请：
- 需要进入onlyoffice容器中，修改配置文件/etc/onlyoffice/documentserver/default.json，注意以下两个内容：
  - "rejectUnauthorized": false
  - request-filtering-agent 中的 allowPrivateIPAddress、allowMetaIPAddress 均为true
  第1点是关闭ssl，第2点是允许使用IP访问，默认是只使用域名访问。
相较于参考的Github讨论部分，html新增了css样式，保证了没有双滚动条，并移除了内外边框。
所有参考在本篇底部。

预览模式

预览模式不需要php回调，只需要nginx即可，如不知具体操作方法，请见参考：Pwolf私人博客 - 局域网内部署alist和onlyoffice

view.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OnlyOffice Viewer</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        #placeholder {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="placeholder"></div>
    <script type="text/javascript" src="http://x.x.x.x:xxxx/web-apps/apps/api/documents/api.js"></script>
    <script>
        function getQueryParamValue(name) {
            const searchParams = new URLSearchParams(window.location.search);
            return searchParams.get(name);
        }
        
        const url = decodeURIComponent(getQueryParamValue("src"));
        const fileName = url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('?') != -1 ? url.lastIndexOf('?') : url.length);
        const fileExtension = fileName.split('.').pop();
        const docEditor = new DocsAPI.DocEditor("placeholder", {
            "document": {
                "fileType": fileExtension,
                "permissions": {
                    "edit": false,
                    "comment": true,
                    "download": true,
                    "print": true,
                    "fillForms": true,
                },
                "title": fileName,
                "url": url,
            },
            "editorConfig": {
                "lang": "zh",
                "mode": "view",
            },
            "height": "100%",
            "type": "embedded",
        });
    </script>
</body>
</html>

编辑模式

编辑模式除开nginx，还需php执行回调程序

edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OnlyOffice Editor</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        #placeholder {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="placeholder"></div>
    <script type="text/javascript" src="http://x.x.x.x:xxxx/web-apps/apps/api/documents/api.js"></script>
    <script>
        function getQueryParamValue(name) {
            const searchParams = new URLSearchParams(window.location.search);
            return searchParams.get(name);
        }

        const url = decodeURIComponent(getQueryParamValue("src"));
        const fileName = url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('?') != -1 ? url.lastIndexOf('?') : url.length);
        const fileExtension = fileName.split('.').pop();

        function generateDocumentKey(url) {
            const allowedChars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-._=';
            const fileName = url.substring(url.lastIndexOf('/') + 1);
            const timestamp = new Date().toISOString();
            let key = fileName + timestamp;
            key = encodeURIComponent(key).substr(0, 20);
            key = key.split('').filter(char => allowedChars.includes(char)).join('');
            return key;
        }

        const docEditor = new DocsAPI.DocEditor("placeholder", {
            "document": {
                "fileType": fileExtension,
                "permissions": {
                    "edit": true,
                    "comment": true,
                    "download": true,
                    "print": true,
                    "fillForms": true,
                    "review": true,
                    "copy": true,
                    "modifyContentControl": true,
                    "modifyFilter": true,
                    "export": true
                },
                "title": fileName,
                "url": url,
                "key": generateDocumentKey(url)
            },
            "editorConfig": {
                "lang": "zh",
                "region": "zh-CN",
                "mode": "edit",
                "callbackUrl": `http://x.x.x.x:yyyy/callback.php?file_url=${encodeURIComponent(url)}`,
                "callbacks": {
                    "onError": (error) => console.error("OnlyOffice 错误:", error),
                    "onReady": () => console.log("OnlyOffice 编辑器已加载")
                },
                "customization": {
                    "forcesave": true,
                    "compactHeader": false,
                    "showReviewChanges": true,
                    "hideRightMenu": false,
                    "spellcheck": false,
                    "features": {
                        "spellcheck": {
                            "mode": false
                        }
                    }
                }
            },
            "height": "100%",
            "type": "desktop"
        });
    </script>
</body>
</html>

callback.php

<?php
error_reporting(E_ALL & ~E_WARNING);
ini_set('display_errors', 0);

$config = parse_ini_file('config.ini', true);
$cached_token = null;
$token_expires = 0;

// 封装的 curl POST 请求函数
function curl_post($url, $header, $data) {
    $curl = curl_init();
    curl_setopt_array($curl, [
        CURLOPT_URL => $url,
        CURLOPT_SSL_VERIFYPEER => FALSE,
        CURLOPT_SSL_VERIFYHOST => FALSE,
        CURLOPT_POST => 1,
        CURLOPT_POSTFIELDS => $data,
        CURLOPT_HTTPHEADER => $header,
        CURLOPT_RETURNTRANSFER => 1,
        CURLOPT_TIMEOUT => 30
    ]);
    $output = curl_exec($curl);
    curl_close($curl);
    return $output;
}

// 封装的 curl PUT 请求函数
function curl_put($url, $header, $data) {
    $curl = curl_init();
    curl_setopt_array($curl, [
        CURLOPT_URL => $url,
        CURLOPT_SSL_VERIFYPEER => FALSE,
        CURLOPT_SSL_VERIFYHOST => FALSE,
        CURLOPT_CUSTOMREQUEST => "PUT",
        CURLOPT_HTTPHEADER => array_map('trim', $header),
        CURLOPT_POSTFIELDS => $data,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => '',
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 0,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_HEADER => true
    ]);
    $output = curl_exec($curl);
    $header_size = curl_getinfo($curl, CURLINFO_HEADER_SIZE);
    $body = substr($output, $header_size);
    curl_close($curl);
    return $body;
}

// 封装的 curl GET 请求函数（用于下载文件）
function curl_get_contents($url) {
    $curl = curl_init();
    curl_setopt_array($curl, [
        CURLOPT_URL => $url,
        CURLOPT_SSL_VERIFYPEER => FALSE,
        CURLOPT_SSL_VERIFYHOST => FALSE,
        CURLOPT_RETURNTRANSFER => 1,
        CURLOPT_TIMEOUT => 30
    ]);
    $output = curl_exec($curl);
    curl_close($curl);
    return $output;
}

// 添加新的 curl GET 请求函数
function curl_get($url, $header) {
    $curl = curl_init();
    curl_setopt_array($curl, [
        CURLOPT_URL => $url,
        CURLOPT_SSL_VERIFYPEER => FALSE,
        CURLOPT_SSL_VERIFYHOST => FALSE,
        CURLOPT_HTTPHEADER => array_map('trim', $header),
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_TIMEOUT => 30
    ]);
    $output = curl_exec($curl);
    curl_close($curl);
    return $output;
}

// 检查 file_url 参数
if (!isset($_GET['file_url'])) {
    http_response_code(400);
    echo json_encode(["error" => 8, "message" => "Missing 'file_url' parameter"]);
    exit;
}
$input_file_url = $_GET['file_url'];
$path = parse_url($input_file_url, PHP_URL_PATH);
if ($path === false || empty($path)) {
    http_response_code(400);
    echo json_encode(["error" => 10, "message" => "Invalid file_url"]);
    exit;
}

// 不知为啥我这回传会多一个p文件夹，移除开头的斜杠，避免路径问题
$path = ltrim($path, '/');
if (strpos($path, 'p/') === 0) {
    $path = substr($path, 2);
}
$filename = $path;

// 读取请求体
if (($body_stream = file_get_contents("php://input")) === FALSE) {
    http_response_code(500);
    echo json_encode(["error" => 1, "message" => "Failed to read input stream"]);
    exit;
}

// 解析 JSON
$data = json_decode($body_stream, TRUE);
if ($data === null) {
    http_response_code(400);
    echo json_encode(["error" => 7, "message" => "Invalid JSON data"]);
    exit;
}

// 检查 status 是否存在
if (!isset($data["status"])) {
    http_response_code(400);
    echo json_encode(["error" => 9, "message" => "Missing 'status' parameter"]);
    exit;
}

// 获取 Alist token 的函数
function get_alist_token($config) {
    global $cached_token, $token_expires;
    $current_time = time();
    if ($cached_token && $current_time < $token_expires) {
        return $cached_token;
    }

    $post_response = curl_post(
        $config['alist']['base_url'] . "/api/auth/login",
        ["Content-Type: application/json"],
        json_encode([
            "username" => $config['alist']['username'],
            "password" => $config['alist']['password']
        ])
    );
    $post_response_data = json_decode($post_response, TRUE);
    if (!isset($post_response_data["data"]["token"])) {
        return null;
    }
    $cached_token = $post_response_data["data"]["token"];
    $token_expires = $post_response_data["data"]["exp"] ?? $current_time + 300;
    return $cached_token;
}

// 保存文档的通用函数
function save_document($data, $config, $input_file_url) {
    $downloadUri = $data["url"];
    if (($new_data = curl_get_contents($downloadUri)) === FALSE) {
        return ["error" => 2, "message" => "Failed to download file"];
    }

    // 使用全局变量 $filename，避免重复解析路径
    global $filename;
    $path = $filename;

    $max_retries = 3;
    for ($retry = 0; $retry < $max_retries; $retry++) {
        $token = get_alist_token($config);
        if ($token === null) {
            return ["error" => 3, "message" => "Failed to get token"];
        }
        
        $token = trim($token);
        $put_response = curl_put(
            $config['alist']['base_url'] . "/api/fs/put",
            [
                "Authorization: " . trim($token),
                "File-Path: " . $path,
                "As-Task: true",
                "Content-Length: " . strlen($new_data),
                "Content-Type: application/octet-stream"
            ],
            $new_data
        );

        if ($put_response === FALSE) {
            return ["error" => 4, "message" => "Failed to upload file"];
        }

        $put_response_data = json_decode($put_response, TRUE);
        if ($put_response_data["code"] === 401) {
            // 清除缓存的令牌
            global $cached_token, $token_expires;
            $cached_token = null;
            $token_expires = 0;

            if ($retry < $max_retries - 1) {
                sleep(5);
                continue;
            }
            return ["error" => 3, "message" => "Token is invalidated after multiple retries"];
        }

        if (isset($put_response_data["data"]["task"]["id"])) {
            $task_id = $put_response_data["data"]["task"]["id"];
            $max_wait = 60;
            $wait_interval = 2;
            $start_time = time();
            
            for ($i = 0; $i < $max_wait; $i += $wait_interval) {
                $task_response = curl_get(
                    $config['alist']['base_url'] . "/api/task/" . $task_id,
                    ["Authorization: " . trim($token)]
                );
                $task_data = json_decode($task_response, TRUE);
                
                if ($task_data["code"] === 200) {
                    $task_status = $task_data["data"]["status"] ?? "unknown";
                    if ($task_status === "finished") {
                        return ["error" => 0, "message" => "Success"];
                    } elseif ($task_status === "error") {
                        $error_msg = $task_data["data"]["error"] ?? "Unknown error";
                        return ["error" => 4, "message" => "Upload task failed: " . $error_msg];
                    }
                }
                
                sleep($wait_interval);
            }
            
            return ["error" => 4, "message" => "Upload task timed out"];
        }

        return ["error" => 0, "message" => "Success"];
    }
    return ["error" => 3, "message" => "Failed to upload file after multiple retries"];
}

// 处理不同状态码
switch ($data["status"]) {
    case 1: // 文档已打开
        $token = get_alist_token($config);
        if ($token === null) {
            http_response_code(500);
            echo json_encode(["error" => 3, "message" => "Failed to get token"]);
        } else {
            http_response_code(200);
            echo json_encode(["error" => 0, "message" => "Document opened"]);
        }
        break;
    case 2: // 保存事件
    case 6: // 文档关闭
        $result = save_document($data, $config, $input_file_url);
        if ($result["error"] !== 0) {
            http_response_code(500);
            echo json_encode($result);
        } else {
            http_response_code(200);
            echo json_encode($result);
        }
        break;
    default:
        http_response_code(500);
        echo json_encode(["error" => 5, "message" => "Unknown status code"]);
        break;
}
?>

config.ini

[alist]
; Alist API 基础URL
base_url=http://x.x.x.x:xxxx
; Alist 登录用户名
username=xxx
; Alist 登录密码
password=xxx

补充

nginx配置

defalut.conf

server{
	listen xxxx; 
	server_name host.docker.internal;
	location / {
		root /usr/share/nginx/html;
		index view.html edit.html;
	}

    location ~ \.php$ {
        fastcgi_pass host.docker.internal:xxxx;
        fastcgi_param  SCRIPT_FILENAME /var/www/html$fastcgi_script_name;
        include  fastcgi_params;
    }
}

alist设置

前序工作做完后，需在 alist管理 - 设置 - 预览 - Iframe预览进行修改

...
{
	"doc,docx,xls,xlsx,ppt,pptx": {
		"Onlyoffice View":"http://x.x.x.x:xxxx/view.html?src=$e_url",
		"Onlyoffice Edit":"http://x.x.x.x:xxxx/edit.html?src=$e_url"
	},
...

参考

官方文档 - alist api - 获取token
官方文档 - alist api - 流式上传文件
 官方文档 - onlyoffice 回调程序
 官方文档 - onlyoffice 编辑模式
 Github讨论#3255 - 预览模式
 Github讨论#3899 - 编辑模式
 Pwolf私人博客 - 局域网内部署alist和onlyoffice

2025-04-01T09:25:44Z

petercat-assistant[bot]
bot Apr 1, 2025

感谢您分享关于通过 iframe 嵌入 OnlyOffice 进行预览与编辑的详细过程和代码示例。这是一个非常有用的指南，特别是对于那些希望在本地局域网中使用 Alist 和 OnlyOffice 的用户。

如果您有任何具体的问题或者需要进一步的优化建议，请随时告诉我，我会尽力帮助您。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

0 replies

Nerders · 2025-05-14T12:37:59Z

Nerders
May 14, 2025

好干净的页面，请问放大缩小的+-如何放到右下角那个全屏位置

2 replies

LainHE May 15, 2025
Author

因为html只是调用了onlyoffice的api.js，所以如果需要调整的话可能得修改它的api.js文件才可以哈。
可调用的参数请见：onlyoffice官方api文档

Nerders May 19, 2025

只是感觉+ -有点影响阅读体验，谢谢大佬

429383298 · 2025-05-18T18:02:50Z

429383298
May 18, 2025

大佬为什么预览可以，编辑模式报404？是PHP环境的问题吗？

1 reply

LainHE May 19, 2025
Author

404的话是文件放的有问题吧，PHP有问题不会报404，信息太少没法定性

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

alist 通过 iframe 嵌入 onlyoffice 的预览与编辑方式分享 #8271

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

alist 通过 iframe 嵌入 onlyoffice 的预览与编辑方式分享 #8271

Uh oh!

LainHE Apr 1, 2025

序言

预览模式

view.html

编辑模式

edit.html

callback.php

config.ini

补充

nginx配置

defalut.conf

alist设置

参考

Replies: 3 comments · 3 replies

Uh oh!

petercat-assistant[bot] bot Apr 1, 2025

Uh oh!

Nerders May 14, 2025

Uh oh!

LainHE May 15, 2025 Author

Uh oh!

Nerders May 19, 2025

Uh oh!

429383298 May 18, 2025

Uh oh!

LainHE May 19, 2025 Author

LainHE
Apr 1, 2025

Replies: 3 comments 3 replies

petercat-assistant[bot]
bot Apr 1, 2025

Nerders
May 14, 2025

LainHE May 15, 2025
Author

429383298
May 18, 2025

LainHE May 19, 2025
Author