onlyoffice预览ppt

假装我不帅

于 2024-03-07 09:42:51 发布

阅读量947

点赞数 23

分类专栏： dotnet 文章标签： onlyoffice ppt

本文链接：https://blog.csdn.net/qq_36437991/article/details/136506537

版权

dotnet 专栏收录该内容

164 篇文章 7 订阅

订阅专栏

本文介绍了如何使用OnlyOfficeAPI在HTML页面中嵌入一个PPT模板，实现查看、预览和部分权限控制的功能，包括编辑、下载和评论等。通过JWT编码传递配置信息，为技术部门用户定制界面。

摘要由CSDN通过智能技术生成

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01</title>
</head>
<body style="height: 100%;margin: 0;">
<div id="placeholder"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script type="text/javascript" src="http://10.10.90.139:8099/web-apps/apps/api/documents/api.js"></script>
<script type="text/javascript">
    const config = {
        "document": {
            "fileType": "pptx",
            "key": "CcauAgYYjWkLrMqqwAER",
            "title": "PPT模板.pptx",
            "url": "https://xxxx/xxxxx.pptx",
            // 权限，每个要打开的文档都可以设置独立的权限
            "permissions": {
                // 启用评论
                "comment": false,
                // 启用下载
                "download": false,
                // 启用编辑
                "edit": false,
                // 启用导出
                "print": false,
                // 启用预览
                "review": true,
                //是否开启聊天
                "chat": false,
                //是否可以复制
                "copy": true,
                //是否文档受保护
                "protect": false,
                "fillForms": false,
            }
        },
        "documentType": "slide",
        "editorConfig": {
            "callbackUrl": "/index/callback",
            // 设置语言
            "lang": "zh-CN",
            "mode":"view",//edit 或者view
            // 添加用户信息
            "user": {
                "group": "技术部",
                "id": "wjl",
                "name": "wjl"
            },
            "customization":{
                "logo": {
                    "image": "https://api.onlyoffice.com/content/img/docbuilder/examples/blue_cloud.png",
                    "imageDark": "https://api.onlyoffice.com/content/img/docbuilder/examples/user-profile.png",
                    "url": "https://example.com"
                },
            }
        }
    };
    $(function () {
        const configJsonStr = JSON.stringify(config);
        $.ajax({
            type: "POST",
            url: "/index/jwtencode",
            contentType: "application/json",
            data: JSON.stringify({
                "jsonStr":configJsonStr
            }),
            dataType: "json",
            success: function (data) {
                console.log("成功")
                console.log(data)
                if(data.jwt){
                    config.token = data.jwt;
                    var docEditor = new DocsAPI.DocEditor("placeholder", config);
                }
            },
            error: function (err) {
                console.error(err);
            }
        })

    })
</script>
</body>
</html>