用onlyoffice现在实现了文档ppt、excel、word在线浏览和编辑，求助怎么设置可以直接保存 #3899

zhushen12580 · 2023-03-20T03:27:52Z

zhushen12580
Mar 20, 2023

对接的是自己搭建在服务器上的onlyoffice服务，目前文件能浏览和编辑，但编辑后不能直接保存，有些苦恼。

Mar 23, 2023

编辑模式麻烦很多~在alist中，实现的意义不大，我情愿下载后编辑。不过后来发现有一个好处，就是能共同编辑。某些情况下，这个功能很好用！
编辑模式除了需要edit.html外，还需要配置一个回调处理程序详细可参阅https://api.onlyoffice.com/zh/editors/callback。我自己用到是PHP。

callback.php

<?php

if (($body_stream = file_get_contents("php://input"))===FALSE){
    echo "Bad Request";
}

$data = json_decode($body_stream, TRUE);

if ($data["status"] == 2){
    $downloadUri = $data["url"];
        
    if (($new_data = file_get_contents($downloadUri))===FALSE){
        echo "Bad Response";
    } else {
        file_put_contents($path_for_save, $new_data, LOCK_EX);
    }
}
echo "{\"error\":0}";

?>

edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OnlyOffice editor<…

View full answer

chenjuefei · 2023-03-23T10:00:32Z

chenjuefei
Mar 23, 2023

编辑模式麻烦很多~在alist中，实现的意义不大，我情愿下载后编辑。不过后来发现有一个好处，就是能共同编辑。某些情况下，这个功能很好用！
编辑模式除了需要edit.html外，还需要配置一个回调处理程序详细可参阅https://api.onlyoffice.com/zh/editors/callback。我自己用到是PHP。

callback.php

<?php

if (($body_stream = file_get_contents("php://input"))===FALSE){
    echo "Bad Request";
}

$data = json_decode($body_stream, TRUE);

if ($data["status"] == 2){
    $downloadUri = $data["url"];
        
    if (($new_data = file_get_contents($downloadUri))===FALSE){
        echo "Bad Response";
    } else {
        file_put_contents($path_for_save, $new_data, LOCK_EX);
    }
}
echo "{\"error\":0}";

?>

edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OnlyOffice editor</title>
</head>
 
<body>
    <div id="placeholder"></div>
    <script type="text/javascript" src="https://documentserver/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,
                },
                "title": fileName,
                "url": url,
                "key": generateDocumentKey(url)
            },
            "editorConfig": {
                "lang": "zh-CN",
                "mode" : "edit" ,
                "callbackUrl": "https://example.com/url-to-callback.ashx",
            },
            "height": "1080px",
            "type": "desktop",
        });
    </script>
</body>
</html>

https://example.com/url-to-callback.ashx 和 https://documentserver/web-apps/apps/api/documents/api.js需要修改成自己的

bandicam.2023-03-23.18-11-14-465.mp4

5 replies

zhushen12580 Apr 18, 2023
Author

膜拜大佬

zhushen12580 Apr 18, 2023
Author

编辑模式麻烦很多~在alist中，实现的意义不大，我情愿下载后编辑。不过后来发现有一个好处，就是能共同编辑。某些情况下，这个功能很好用！编辑模式除了需要edit.html外，还需要配置一个回调处理程序详细可参阅https://api.onlyoffice.com/zh/editors/callback。我自己用到是PHP。

callback.php

<?php

if (($body_stream = file_get_contents("php://input"))===FALSE){
    echo "Bad Request";
}

$data = json_decode($body_stream, TRUE);

if ($data["status"] == 2){
    $downloadUri = $data["url"];
        
    if (($new_data = file_get_contents($downloadUri))===FALSE){
        echo "Bad Response";
    } else {
        file_put_contents($path_for_save, $new_data, LOCK_EX);
    }
}
echo "{\"error\":0}";

?>

edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OnlyOffice editor</title>
</head>
 
<body>
    <div id="placeholder"></div>
    <script type="text/javascript" src="https://documentserver/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,
                },
                "title": fileName,
                "url": url,
                "key": generateDocumentKey(url)
            },
            "editorConfig": {
                "lang": "zh-CN",
                "mode" : "edit" ,
                "callbackUrl": "https://example.com/url-to-callback.ashx",
            },
            "height": "1080px",
            "type": "desktop",
        });
    </script>
</body>
</html>

https://example.com/url-to-callback.ashx 和 https://documentserver/web-apps/apps/api/documents/api.js需要修改成自己的

bandicam.2023-03-23.18-11-14-465.mp4

大佬这个文件url-to-callback.ashx可以发一下吗 /(★ ω ★)

homuraLan Apr 30, 2023

编辑模式麻烦很多~在alist中，实现的意义不大，我情愿下载后编辑。不过后来发现有一个好处，就是能共同编辑。某些情况下，这个功能很好用！编辑模式除了需要edit.html外，还需要配置一个回调处理程序详细可参阅https://api.onlyoffice.com/zh/editors/callback。我自己用到是PHP。

callback.php

<?php

if (($body_stream = file_get_contents("php://input"))===FALSE){
    echo "Bad Request";
}

$data = json_decode($body_stream, TRUE);

if ($data["status"] == 2){
    $downloadUri = $data["url"];
        
    if (($new_data = file_get_contents($downloadUri))===FALSE){
        echo "Bad Response";
    } else {
        file_put_contents($path_for_save, $new_data, LOCK_EX);
    }
}
echo "{\"error\":0}";

?>

edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OnlyOffice editor</title>
</head>
 
<body>
    <div id="placeholder"></div>
    <script type="text/javascript" src="https://documentserver/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,
                },
                "title": fileName,
                "url": url,
                "key": generateDocumentKey(url)
            },
            "editorConfig": {
                "lang": "zh-CN",
                "mode" : "edit" ,
                "callbackUrl": "https://example.com/url-to-callback.ashx",
            },
            "height": "1080px",
            "type": "desktop",
        });
    </script>
</body>
</html>

https://example.com/url-to-callback.ashx 和 https://documentserver/web-apps/apps/api/documents/api.js需要修改成自己的

bandicam.2023-03-23.18-11-14-465.mp4

我成功了给大佬点个赞太厉害了

zhushen12580 May 26, 2023
Author

能分享下经验吗

homuraLan Jun 13, 2023

能分享下经验吗

https://github.com/Sincejunly/officeaanglist.git

Alano-i · 2023-04-24T02:31:20Z

Alano-i
Apr 24, 2023

@chenjuefei 大佬，请问能分享下url-to-callback.ashx文件吗，我用你上面那个callback.php提示无法保存，报下面这个错，感谢！

1 reply

homuraLan Jun 13, 2023

@chenjuefei 大佬，请问能分享下url-to-callback.ashx文件吗，我用你上面那个callback.php提示无法保存，报下面这个错，感谢！

https://github.com/Sincejunly/officeaanglist.git

toyqiu · 2023-05-10T13:57:53Z

toyqiu
May 10, 2023

求教各位大佬：callback.php 文件应该放在哪个路径下

1 reply

homuraLan Jun 13, 2023

求教各位大佬：callback.php 文件应该放在哪个路径下

https://github.com/Sincejunly/officeaanglist.git

theBig-brother · 2023-10-22T15:12:43Z

theBig-brother
Oct 22, 2023

你怎么做到实现了文档ppt、excel、word在线浏览和编辑的，能教一下吗，比如后端代码

0 replies

Li-Aaron · 2023-11-16T04:48:32Z

Li-Aaron
Nov 16, 2023

根据大佬提供的思路
写了个比较粗鄙的callback.php

<?php
function curl_post($url, $header, $data){
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $output = curl_exec($curl);
    curl_close($curl);
    return $output;
}

function curl_put($url, $header, $data){
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "PUT");
    curl_setopt($curl, CURLOPT_ENCODING, '');
    curl_setopt($curl, CURLOPT_MAXREDIRS, 10);
    curl_setopt($curl, CURLOPT_TIMEOUT, 0);
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($curl, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

    $output = curl_exec($curl);
    curl_close($curl);
    return $output;
}

// 获取原始文件名
$input_file_url = $_GET['file_url'];
if (($body_stream = file_get_contents("php://input"))===FALSE){
    echo "{\"error\":1}";
}
$data = json_decode($body_stream, TRUE);

if ($data["status"] == 2){
    // 获取待传输文件，content保存在new_data
    $downloadUri = $data["url"];
    $stream_opts = [
        "ssl" => [
            "verify_peer"=>false,
            "verify_peer_name"=>false,
        ]
    ];

    if (($new_data = file_get_contents($downloadUri, false, stream_context_create($stream_opts)))===FALSE){
        echo "{\"error\":2}";
    } else {
        // POST token 获取
        $post_url = "http://alist/api/auth/login";
        $post_header = [
            "Content-type:application/json;charset='utf-8'",
            "Accept:application/json"
        ];
        $post_data = [
            'Username' => 'username',
            'Password' => 'password'
        ];
        $post_data = json_encode($post_data);
        $post_response = curl_post($post_url, $post_header, $post_data);
        $post_response_data = json_decode($post_response, true);
        $token = $post_response_data["data"]["token"];

        // 执行put操作 直接上传文件
        // 这里写的比较粗鄙
        $put_url = "http://alist/api/fs/put";
        $sublen = strlen("http://alist/p") - strlen($input_file_url);
        $filename = urlencode(substr($input_file_url, $sublen));
        $put_header = [
            sprintf("Authorization:%s", $token),
            sprintf("File-Path:%s", $filename),
            "Content-Type:application/octet-stream"
        ];
        $put_response = curl_put($put_url, $put_header, $new_data);
    }
}
echo "{\"error\":0}";

?>

大概流程就是通过php的get获取原始url，根据原始url解析文件名，post获取token，put上传文档。
内网可以凑合用用。

edit.html要相应改一下

            "editorConfig": {
                "lang": "zh-CN",
                "mode" : "edit" ,
                "callbackUrl": "http://phphost/callback.php?file_url="+url,
            },

http://alist
http://phphost
以及用户名密码需要改一下。

php我这边用的是nginx+php-fpm.

8 replies

anwen-anyi Jan 15, 2024
Collaborator

能编辑，也显示保存成功，就是alist那边没有拿到保存后的文件，put的问题？也没有看到哪里报错

估计你和我上面那个问题一样开启了全部签名修改的文件携带了 office.doc?sign=xxxxx 参数

Uh oh!

用onlyoffice现在实现了文档ppt、excel、word在线浏览和编辑，求助怎么设置可以直接保存 #3899

Uh oh!

Replies: 5 comments · 15 replies

Uh oh!

Uh oh!

Uh oh!

zhushen12580 Apr 18, 2023 Author

Uh oh!

zhushen12580 Apr 18, 2023 Author

Uh oh!

Uh oh!

Uh oh!

zhushen12580 May 26, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

anwen-anyi Jan 15, 2024 Collaborator

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 15 replies

zhushen12580 Apr 18, 2023
Author

zhushen12580 Apr 18, 2023
Author

zhushen12580 May 26, 2023
Author

anwen-anyi Jan 15, 2024
Collaborator