Vue + onlyOffice

前端 Vue + onlyOffice

只是前段的基本使用

1.引入后端配置好的office服务器

 <script type="text/javascript" src="http://localhost:8081/web-apps/apps/api/documents/api.js"></script>

2.占位元素

   <div style="height: 700px;" id="table_excel">
       <div id="placeholder"></div>
   </div>

3.获取数据配置参数

具体配置请参考 ONLYOFFICE

       // 获取表格数据
        getExcel:function(){
            let that = this;
            this.$axios.get("接口", {}).then((res) => {
                if(res.resp_code == 200){
                    document.getElementById('table_excel').innerHTML = '<div id="placeholder"></div>';
                    var config = {
                        "editorConfig": {
                            "lang": "zh-CN",
                            "mode": res.datas.editMode, //定义编辑器打开模式。可以是查看以打开文档进行查看，也可以是编辑以在允许将更改应用于文档数据的编辑模式下打开文档。默认值为"edit"
                            "callbackUrl": "http://60.174.231.10:10001/api-forest/sOnlyOffice/docx/save?path="+res.datas.callbackUrl, // 是否显示保存按钮
                            "customization": {
                                "forcesave": res.datas.canForcesave,
                                "chat":false,
                                "comments":false,
                                "logo":{
                                    "image":that.$urlConfig.imgUrl+"/upload/logo.png",
                                    "imageEmbedded": that.$urlConfig.imgUrl+"/upload/logo.png",
                                    "url":that.$urlConfig.imgUrl+"/upload/logo.png",
                                }
                            }
                        },
                        "document": {
                            "permissions": {
                                "edit": res.datas.canEdit,  //是否可以编辑: 只能查看，传false
                                "download":res.datas.canDownload,//是否可以下载
                                "print":res.datas.canPrint //是否可以打印
                            },
                            "fileType": res.datas.fileType, // 文件类型
                            "key": res.datas.key,  //定义服务用来识别文档的唯一文档标识符
                            "title": res.datas.fileTitle, // 为查看或编辑的文档定义所需的文件名，该文件名也将在下载文档时用作文件名
                            "url": that.$urlConfig.imgUrl+"/"+res.datas.fileUrl, //定义存储查看或编辑的源文档的绝对 URL。使用本地链接时请务必添加令牌
                        },
                        "documentType": "spreadsheet",
                        "lang": "zh-CN",
                        "height": "100%",
                        "width": "100%"
                    };
                    var docEditor = new DocsAPI.DocEditor("placeholder", config);
                }else{
                    document.getElementById('table_excel').innerHTML = '';
                }
            });
        },