SpringBoot集成onlyoffice實現(xiàn)word文檔編輯保存

說明

onlyoffice為一款開源的office在線編輯組件江醇,提供word/excel/ppt編輯保存操作

  • 以下操作均基于centos8系統(tǒng),officeonly鏡像版本7.1.2.23
  • 鏡像下載地址:https://yunpan.#/surl_y87CKKcPdY4 (提取碼:1f92)
  • 已破解20連接限制
  • 已導入常用中文字體友绝,修改了字號
  • 已取消上傳文件大小的限制,修改為500M
  • 隱藏所有操作按鈕,隱藏onlyoffice圖標和名稱,只崩嬲觯基礎操作欄目
  • 僅用于word文件和excel文件編輯/保存/查看

Linux安裝

yum設置

  • 進入yum的repos目錄 cd /etc/yum.repos.d/
cd /etc/yum.repos.d/
  • 修改所有的CentOS文件內容
sed -i 's/mirrorlist/#mirrorlist/g' /etc/yum.repos.d/CentOS-*

sed -i 's|#baseurl=http://mirror.centos.org|baseurl=http://vault.centos.org|g' /etc/yum.repos.d/CentOS-*
  • 更新yum源為阿里鏡像
wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-vault-8.5.2111.repo

yum clean all

yum makecache
  • yum安裝測試是否可以yum安裝
yum install wget –y
  • 安裝依賴包
sudo yum install -y yum-utils device-mapper-persistent-data lvm2 

docker安裝

  • 設置鏡像源
sudo yum-config-manager --add-repo
https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
  • 安裝docker-ce社區(qū)版
sudo yum install docker-ce --allowerasing
  • 創(chuàng)建用戶組
建立 Docker 用戶組
sudo groupadd docker
添加當前用戶到 docker 組
sudo usermod -aG docker $USER
啟動docker
systemctl start docker.service
服務開機啟動
systemctl enable docker.service
  • 安裝docker圖形化管理頁面
docker volume create portainer_data

docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer

訪問http://localhost:9000/進行管理端初始化設置

onlyoffice部署

  • 上傳鏡像文件到服務器
  • 載入鏡像
docker load < onlyoffice.tar
  • 查看鏡像
docker images
  • 啟動容器
sudo docker run --name=onlyoffice -i -t -d -p  8088:80 --restart=always 鏡像id

Windows安裝

  • 安裝VMWare虛擬機,安裝centos8系統(tǒng)坛梁,參照上述步驟
  • 網絡配置成NAT模式而姐,虛擬機進入centos系統(tǒng)后配置固定ip
  • NAT網卡設置端口轉發(fā)腊凶,轉發(fā)9000和8088端口划咐,主機端口和虛擬端口一致

添加字體

  • 找到對應字體,如果是windows下的字體進入C:\Windows\Fonts 搜索
  • 安裝High-Logic FontCreator 運行Keygen.exe 點擊generate獲取激活碼
  • 工具下載:https://yunpan.#/surl_y87CK8RNr8N (提取碼:7059)
  • 打開字體 font=>properties
  • 修改 font family 為custom 中對應的中文 钧萍,導出字體
  • 上傳修改后的字體到liunx文件下 eg:/home/fonts/
  • 查看OnlyOffice容器id
docker ps
  • 進入OnlyOffice容器
docker exec -it 容器id /bin/bash
  • 刪除字體緩存
cd /var/www/onlyoffice/documentserver/fonts

rm -rf *
  • 復制字體到 /var/www/onlyoffice/documentserver/core-fonts 下
docker cp /home/fonts onlyoffice:/var/www/onlyoffice/documentserver/core-fonts
  • 進入onlyoffice容器執(zhí)行刷新
/usr/bin/documentserver-generate-allfonts.sh
  • 瀏覽器清除緩存重新刷新

對接業(yè)務系統(tǒng)

onlyfiice部署完畢后會有一個服務地址褐缠,例如 http://localhost:8088/

引入api.js

不能下載文件本地引用,一定要在線引用

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

聲明dom

頁面添加一個div风瘦,用于渲染編輯器

<div id="placeholder" class="nav" style="width: 100%; height: 100%"></div>

頁面渲染

參數(shù)說明

key:對應文檔的一個標識队魏,建議前端隨機生成,防止重復

url:打開文檔的地址万搔,返回流數(shù)據(jù)

fileType:文檔類型胡桨,例如:doc/docx

title:文件名稱,例如:2022年工作方案.docx

model:打開模式瞬雹,例如:edit(編輯模式)/view(閱讀模式)

callbackUrl:文件修改后保存回調地址

function initDoc(key, url, fileType, title, model, callbackUrl) {
                let config = {
                    "document": {
                        "documentType": "text",
                        "width": "100%", //打開窗口寬度
                        "height": "100%", //打開窗口高度
                        "fileType": fileType, //文檔類型
                        "key": key, //定義用于服務識別文檔的唯一文檔標識符昧谊。每次編輯和保存文檔時,都必須重新生成密鑰酗捌。長度限制為128個符號呢诬。
                        "title": title, //為查看或編輯的文檔定義所需的文件名涌哲,該文件名也將在下載文檔時用作文件名。長度限制為128個符號尚镰。
                        "url": url, //定義存儲原始查看或編輯的文檔的絕對URL
                        "info": {
                            "owner": "王重陽", //文件創(chuàng)建者名稱
                            "sharingSettings": [ //文件對應用戶的操作權限配置
                                {
                                    "permissions": "Full Access", // 完全操作權限-Full Access,只讀權限-Read Only 拒絕訪問-Deny Access
                                    "user": "林朝英" //有次權限的用戶
                                },
                                {
                                    "permissions": "Read Only",
                                    "user": "周伯通"
                                },
                            ],
                            "uploaded": "2010-07-07 3:46 PM" //文件創(chuàng)建時間
                        },
                        //文檔權限參數(shù)
                        "permissions": {
                            "edit": true, //(文件是否可以編輯阀圾,false時文件不可編輯)
                            "fillForms": true, //定義是否能在文檔中填充表單
                            "print": true, //定義文檔是否能打印
                            "review": false, //第一是否顯示審閱文檔菜單
                            "comment": true, //定義是否可以注釋文檔。如果注釋權限設置為“ true”狗唉,則文檔側欄將包含“注釋”菜單選項初烘;只有將mode參數(shù)設置為edit時才生效,默認值與edit參數(shù)的值一致敞曹。
                            "copy": true, //是否允許您將內容復制到剪貼板账月。默認值為true。
                            "download": true, //定義是否可以下載文檔或僅在線查看或編輯文檔澳迫。如果下載權限設置為“false”下載為菜單選項將沒有局齿。默認值為true。
                            "modifyContentControl": true, //定義是否可以更改內容控件設置橄登。僅當mode參數(shù)設置為edit時抓歼,內容控件修改才可用于文檔編輯器。默認值為true拢锹。
                            "modifyFilter": true, //定義過濾器是否可以全局應用(true)影響所有其他用戶谣妻,或局部應用(false),即僅適用于當前用戶卒稳。如果將mode參數(shù)設置為edit蹋半,則過濾器修改僅對電子表格編輯器可用。默認值為true充坑。
                        }
                    },
                    // type: "embedded",
                    //打開文檔類型
                    // text對應各種文檔類型(.doc, .docm, .docx, .dot, .dotm, .dotx, .epub, .fodt, .htm, .html, .mht, .odt, .ott, .pdf, .rtf, .txt, .djvu, .xps)
                    //spreadsheet對應表格類型(.csv, .fods, .ods, .ots, .xls, .xlsm, .xlsx, .xlt, .xltm, .xltx)
                    //presentation對應PPT類型(.fodp, .odp, .otp, .pot, .potm, .potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx)
                    "editorConfig": { //編輯配置
                        "createUrl": "http://docServer:port/url-to-create-document/", //指定創(chuàng)建文件的頁面,添加該配置后文檔服務器插件才會顯示新建文件按鈕
                        "mode": model, //文檔操作模式 view 視圖模式不可編輯  edit 編輯模式可編輯文檔
                        "callbackUrl": callbackUrl, //保存文件時的回調地址
                        "lang": "zh-CN", //語言環(huán)境
                        "customization": { //定制部分允許自定義編輯器界面减江,使其看起來像您的其他產品,并更改是否存在其他按鈕捻爷,鏈接辈灼,更改徽標和編輯者所有者詳細信息。
                            "help": false, //定義是顯示還是隱藏“幫助”菜單按鈕也榄。默認值為true巡莹。
                            "hideRightMenu": false, //定義在第一次加載時是顯示還是隱藏右側菜單。默認值為false甜紫。
                            "autosave": false, //定義是啟用還是禁用“自動保存”菜單選項降宅。請注意,如果您在菜單中更改此選項囚霸,它將被保存到瀏覽器的localStorage中腰根。默認值為true。
                            "forcesave": true, //定義保存按鈕是否顯示默認false
                            "chat": false, //定義“聊天”菜單按鈕是顯示還是隱藏邮辽;請注意唠雕,如果您隱藏“聊天”按鈕贸营,則相應的聊天功能也將被禁用。默認值為true岩睁。
                            "commentAuthorOnly": false, //定義用戶是否只能編輯和刪除他的評論钞脂。默認值為false。
                            "comments": false, //定義是顯示還是隱藏“注釋”菜單按鈕捕儒;請注意冰啃,如果您隱藏“評論”按鈕,則相應的評論功能將僅可用于查看刘莹,評論的添加和編輯將不可用阎毅。默認值為true。
                            "compactHeader": false, //定義是否將菜單欄放在在徽標旁邊使界面更加緊湊默認false点弯。
                            "compactToolbar": false, //定義顯示的頂部工具欄類型是完整(false)還是緊湊true扇调。默認值為false 多余菜單將在右側折疊點擊顯示。
                            "compatibleFeatures": false, //定義僅與OOXML格式兼容的功能的使用抢肛。例如狼钮,不要在整個文檔上使用注釋。默認值為false捡絮。
                            "macros": false, //定義是否將運行文檔宏以及可用的宏設置熬芜。默認值為true。
                            "macrosMode": "warn", //定義是否將運行文檔宏福稳∠牙可以采用以下值: disable -根本不運行;enable -自動運行所有宏的圆;warn -警告宏并請求允許運行鼓拧。默認值為original。
                            "plugins": false, //定義是否將啟動插件并可用略板。默認值為true毁枯。
                            "showReviewChanges": false, //定義在加載編輯器時是否自動顯示或隱藏審閱更改面板慈缔。默認值為false叮称。
                            "spellcheck": false, //定義在加載編輯器時是否自動打開或關閉拼寫檢查器。拼寫檢查器僅適用于文檔編輯器和演示文稿編輯器藐鹤。默認值為true瓤檐。
                            "toolbarNoTabs": false, //定義是突出顯示頂部工具欄選項卡樣式。默認值為false娱节。
                            "unit": "cm", //定義在標尺和對話框中使用的度量單位挠蛉。可以采用以下值:cm -厘米肄满,pt-點谴古,inch -英寸质涛。默認值為厘米(cm)。
                            "zoom": 100, //定義以百分比為單位的文檔顯示縮放值掰担』懵剑可以取大于0的值。對于文本文檔和演示文稿带饱,可以將此參數(shù)設置為-1(使文檔適合頁面選項)或-2(使文檔頁面寬度適合編輯器頁面)毡代。默認值為100。
                            "customer": { //關于 文檔編輯器的顯示信息
                                "address": "My City, 123a-45", //有權訪問編輯或編輯作者的公司或個人的郵政地址勺疼,
                                "info": "Some additional information", //有關您希望其他人認識的公司或個人的一些其他信息教寂,
                                "logo": "https://example.com/logo-big.png", //圖片徽標的路徑(此文件沒有特別建議,但是如果使用透明背景的.png格式會更好)执庐。圖片必須具有以下尺寸:432x70酪耕,
                                "mail": "john@example.com", //有權訪問編輯者或編輯者的公司或個人的電子郵件地址
                                "name": "歐陽鋒", //該公司或個人的誰可以訪問編輯或編輯作者,名稱
                                "www": "example.com" //以上公司或個人的家庭網站地址轨淌,
                            },
                            "feedback": { //反饋配置信息
                                "url": "https://example.com", //單擊“反饋和支持”菜單按鈕時將打開的網站地址的絕對URL 因妇,
                                "visible": false //顯示或隱藏“反饋和支持”菜單按鈕,
                            },
                            "goback": { //定義“打開文件位置”菜單按鈕和右上角按鈕的設置猿诸。該對象具有以下參數(shù):
                                "blank": true, //在新的瀏覽器選項卡/窗口(如果值設置為true)或當前選項卡(如果值設置為false)中打開網站婚被。默認值為true,
                                "requestClose": false, //定義如果單擊“打開文件位置”按鈕梳虽,則調用events.onRequestClose事件址芯,而不是打開瀏覽器選項卡或窗口。默認值為false窜觉,
                                "text": "Open file location", //將在“打開文件位置”菜單按鈕和右上角按鈕(即谷炸,而不是“轉到文檔”)上顯示的文本,
                                "url": "https://example.com" //單擊“打開文件位置”菜單按鈕時將打開的網站地址的絕對URL 禀挫,
                            },
                            "logo": {
                                "image": "https://example.com/logo.png", //圖像文件的路徑旬陡,用于在普通工作模式下顯示(即,在所有編輯器的查看和編輯模式下)语婴。圖片必須具有以下尺寸:172x40描孟,
                                "imageEmbedded": "https://example.com/logo_em.png", //用于以嵌入式模式顯示的圖像文件的路徑(請參閱config部分以了解如何定義嵌入式文檔類型)。圖片必須具有以下尺寸:248x40砰左,
                                "url": "https://www.baidu.com" //某人單擊徽標圖像時將使用的絕對URL(可用于轉到您的網站等)匿醒。保留為空字符串或null以使徽標不可單擊,
                            },
                        },
                        "user": { //用戶信息
                            "id": "admin", //用戶ID
                            "name": "操作員" //用戶全名稱
                        },
                        "embedded": { //Embedded部分僅適用于嵌入式文檔類型(請參閱config部分以了解如何定義嵌入式文檔類型)缠导。它允許更改設置廉羔,這些設置定義嵌入式模式下按鈕的行為。
                            "embedUrl": "https://example.com/embedded?doc=exampledocument1.docx", //定義文檔的絕對URL僻造,以作為嵌入到網頁中的文檔的源文件
                            "fullscreenUrl": "https://example.com/embedded?doc=exampledocument1.docx#fullscreen", //定義將以全屏模式打開的文檔的絕對URL憋他。
                            "saveUrl": "https://example.com/download?doc=exampledocument1.docx", //定義允許將文檔保存到用戶個人計算機上的絕對URL孩饼。
                            "shareUrl": "https://example.com/view?doc=exampledocument1.docx", //定義允許其他用戶共享此文檔的絕對URL。
                            "toolbarDocked": "top" //定義嵌入式查看器工具欄的位置竹挡,可以為top或bottom捣辆。
                        }
                    },

                    "events": { //事件配置
                        // onAppReady,//-將應用程序加載到瀏覽器時調用的函數(shù)。
                        // onCollaborativeChanges //-當文檔由其他用戶在嚴格共同編輯模式下共同編輯時調用的函數(shù)此迅。
                        // onDocumentReady,//-將應用程序加載到瀏覽器時調用的函數(shù)汽畴。
                        // onDocumentStateChange,//-修改文檔時調用的函數(shù)。這就是所謂的使用參數(shù):{真正的“數(shù)據(jù)”}在當前用戶編輯文檔以及與參數(shù):{“數(shù)據(jù)”:假}在當前用戶的更改發(fā)送到文檔編輯服務耸序。
                        // onDownloadAs,//-調用downloadAs方法時忍些,使用指向已編輯文件的絕對URL調用的函數(shù)。在data參數(shù)中發(fā)送要下載的文檔的絕對URL 坎怪。
                        // onError,//-發(fā)生錯誤或其他特定事件時調用的函數(shù)罢坝。錯誤消息在data參數(shù)中發(fā)送。
                        // onInfo,//-應用程序打開文件時調用的函數(shù)搅窿。該模式在data.mode參數(shù)中發(fā)送嘁酿。可以查看或編輯男应。
                        // onMetaChange,//-通過meta命令更改文檔的元信息時調用的函數(shù)闹司。文檔名稱通過data.title參數(shù)發(fā)送。
                        // onOutdatedVersion,//-使用舊的document.key值打開文檔進行編輯時沐飘,顯示錯誤后調用的函數(shù)游桩,該值用于編輯先前的文檔版本并已成功保存。調用此事件時耐朴,必須使用新的document.key重新初始化編輯器借卧。
                        // onReady,//-將應用程序加載到瀏覽器時調用的函數(shù)。自從5.0版本不推薦使用筛峭,請使用onAppReady代替
                        // onRequestClose,//-結束編輯器的工作并且必須關閉編輯器時調用的函數(shù)铐刘。
                        // onRequestCompareFile,//-用戶嘗試通過單擊“存儲中的文檔”按鈕來選擇要比較的文檔時調用的函數(shù)。要選擇要比較的文檔影晓,必須調用setRevisedFile方法镰吵。如果未聲明該方法,則不會顯示“來自存儲的文檔”按鈕俯艰。
                        // onRequestCreateNew,//-用戶嘗試通過單擊“新建”按鈕來創(chuàng)建文檔時調用的函數(shù)捡遍。使用此方法代替createUrl字段锌订。如果未聲明該方法且未指定createUrl竹握,則將不會顯示“創(chuàng)建新”按鈕。
                        // onRequestEditRights,//-用戶嘗試通過單擊“編輯文檔”按鈕嘗試將文檔從視圖切換到編輯模式時調用的函數(shù)辆飘。調用該函數(shù)時啦辐,必須在編輯模式下再次初始化編輯器谓传。如果未聲明該方法,則不會顯示“編輯”按鈕芹关。
                        // onRequestHistory,//-用戶嘗試通過單擊“版本歷史記錄”按鈕顯示文檔版本歷史記錄時調用的函數(shù)续挟。要顯示文檔版本歷史,您必須調用refreshHistory方法侥衬。如果未聲明該方法和onRequestHistoryData方法诗祸,則不會顯示“版本歷史記錄”按鈕。
                        // onRequestHistoryClose,//-當用戶嘗試通過單擊“關閉歷史記錄”按鈕來查看文檔版本歷史記錄時轴总,試圖調用該文檔時調用的函數(shù)直颅。調用該函數(shù)時,必須在編輯模式下再次初始化編輯器怀樟。如果未聲明該方法功偿,則不會顯示“關閉歷史記錄”按鈕。
                        // onRequestHistoryData,//-用戶嘗試單擊文檔版本歷史記錄中的特定文檔版本時調用的函數(shù)往堡。
                        // onRequestInsertImage,//-用戶嘗試通過單擊“保存圖像”按鈕插入圖像時調用的函數(shù)械荷。圖像插入的類型在參數(shù)data.c中指定。
                        // onRequestRename,//-用戶嘗試通過單擊“重命名...”按鈕重命名文件時調用的函數(shù)虑灰。
                        // onRequestRestore,//-用戶單擊版本歷史記錄中的“還原”按鈕來還原文件版本時調用的函數(shù)吨瞎。
                        // onRequestSaveAs,//-用戶嘗試通過單擊“另存為...”按鈕保存文件時調用的函數(shù)。文檔的標題和要下載的文檔的絕對URL在data參數(shù)中發(fā)送穆咐。如果未聲明該方法关拒,則不會顯示“另存為...”按鈕。
                        // onRequestSharingSettings,//-用戶單擊“更改訪問權限”按鈕來管理文檔訪問權限時調用的函數(shù)庸娱。必須調用setSharingSettings方法來更新有關允許與其他用戶共享文檔的設置的信息着绊。如果未聲明該方法,則不會顯示“更改訪問權限”按鈕熟尉。
                        // onRequestUsers,//-評論者可以選擇要在評論中提及的其他用戶時調用的函數(shù)归露。要設置用戶列表,必須調用setUsers方法斤儿。
                        // onWarning,//-發(fā)生警告時調用的函數(shù)剧包。警告消息在data參數(shù)中發(fā)送。
                        // "onDocumentStateChange": function() {
                        // }, //文檔改變后的回調
                        //"onDocumentReady" : onDocumentReady, //文檔初始化準備好后的回調
                    },
                };
                var docEditor = new DocsAPI.DocEditor("placeholder", config);
            }

數(shù)據(jù)接口

  • 下載文件

返回數(shù)據(jù)流即可往果,示例如下

    @GetMapping("/download")
    @ResponseBody
    public void download(@RequestParam("attguid") String attguid, HttpServletRequest request, HttpServletResponse response) throws Exception {
        AttachmentDO attachment = attachmentService.selectOne(attguid);
        String filePath = "";
        //云上傳的附件
        if (attachment.getVirtualpath().contains("ReadAlOSS")) {
            if (attachment.getCanedit() == null || attachment.getCanedit() == 20) {
                String fileurl = aliUtil.readOSSFile(attachment);
                if (!StringUtil.isEmpty(fileurl)) {
                    response.sendRedirect(fileurl);
                }
            } else if (attachment.getCanedit() == 30) {
                String fileurl = huaWeiUtil.readOBSFile(attachment);
                System.out.println(fileurl);
                if (!StringUtil.isEmpty(fileurl)) {
                    response.sendRedirect(fileurl);
                }
            } else if (attachment.getCanedit() == 40) {
                String fileurl = minioUtil.readMinioFile(attachment);
                System.out.println(fileurl);
                if (!StringUtil.isEmpty(fileurl)) {
                    response.sendRedirect(fileurl);
                }
            }
        }
        //本地文件
        String configPath = frameConfig.getAttachPath();
        filePath = configPath + attachment.getVirtualpath();

        File file = new File(filePath);
        if (file.exists()) {
            String filename = attachment.getFilename();
            response.setContentType("application/octet-stream");
            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "utf-8"));
            response.setCharacterEncoding("utf-8");
            response.setContentLength((int) file.length());

            byte[] buff = new byte[(int) file.length()];
            BufferedInputStream bufferedInputStream = null;
            OutputStream outputStream = null;
            try {
                outputStream = response.getOutputStream();
                bufferedInputStream = new BufferedInputStream(new FileInputStream(file));
                int i = 0;
                while ((i = bufferedInputStream.read(buff)) != -1) {
                    outputStream.write(buff, 0, i);
                    outputStream.flush();
                }
            } catch (IOException e) {
                e.printStackTrace();
            } finally {

                try {
                    bufferedInputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
  • 保存文件

解析傳遞的參數(shù)疆液,獲取文件url下載到本地后,進行自定義業(yè)務操作

@PostMapping("/save")
    @ResponseBody
    public void save(@RequestParam Map<String, String> map, HttpServletRequest request, HttpServletResponse response) {
        PrintWriter writer = null;
        String body = "";
        String attguid = request.getParameter("attguid");
        try {
            writer = response.getWriter();
            Scanner scanner = new Scanner(request.getInputStream());
            scanner.useDelimiter("\\A");
            body = scanner.hasNext() ? scanner.next() : "";
            scanner.close();
        } catch (Exception ex) {
            writer.write("get request.getInputStream error:" + ex.getMessage());
            return;
        }

        if (body.isEmpty()) {
            throw new CustomerRuntimeException("ONLYOFFICE回調保存請求體未空");
        }

        JSONObject jsonObj = JSONObject.parseObject(body);
        int status = (Integer) jsonObj.get("status");
        int saved = 0;
        String key = jsonObj.get("key").toString();
        if (status == 2 || status == 3 || status == 6) //MustSave, Corrupted
        {
            String downloadUri = (String) jsonObj.get("url");
            System.out.println(downloadUri);
            try {
                String filePath = "tempfiles/onlyoffice/savedownload/";
                FileUtil.initfloderPath(filePath);
                String fileName = CommonUtil.getNewGuid();
                HttpUtil.downLoadFromUrl(downloadUri, filePath, fileName);
                attachLogic.updateAttachContent(attguid, FileUtil.getBytes(filePath + fileName));
            } catch (Exception ex) {
                saved = 1;
                ex.printStackTrace();
            }
        }
        writer.write("{\"error\":" + saved + "}");
    }

外部按鈕接入

以保存按鈕為例

獲取編輯器iframe按鈕中的slot-btn-dt-save節(jié)點元素陕贮,定位div下的button按鈕堕油,進行js模擬點擊實現(xiàn)保存操作

通過監(jiān)聽iframe的message來捕獲到保存結束頁面彈出自定義提示

上述操作因編輯器html頁面和onlyoffice服務存在跨域問題,需要配置nginx代理到統(tǒng)一ip端口下

  function HandleSave() {
        var frameDocument = document.getElementsByTagName("iframe")[0].contentDocument;
        frameDocument.getElementById("slot-btn-dt-save").getElementsByTagName("button")[0].click();
    }

    window.onmessage = function (event) {
        var data = JSON.parse(event.data);
        if (data.event == "onDocumentStateChange" && data.data == false) {
            OpenSuccessMessage("保存成功")
        }
    }
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市掉缺,隨后出現(xiàn)的幾起案子卜录,更是在濱河造成了極大的恐慌,老刑警劉巖眶明,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件艰毒,死亡現(xiàn)場離奇詭異,居然都是意外死亡搜囱,警方通過查閱死者的電腦和手機丑瞧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蜀肘,“玉大人嗦篱,你說我怎么就攤上這事』戏欤” “怎么了灸促?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長涵卵。 經常有香客問我浴栽,道長,這世上最難降的妖魔是什么轿偎? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任典鸡,我火速辦了婚禮,結果婚禮上坏晦,老公的妹妹穿的比我還像新娘萝玷。我一直安慰自己,他們只是感情好昆婿,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布球碉。 她就那樣靜靜地躺著,像睡著了一般仓蛆。 火紅的嫁衣襯著肌膚如雪睁冬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天看疙,我揣著相機與錄音豆拨,去河邊找鬼。 笑死能庆,一個胖子當著我的面吹牛施禾,可吹牛的內容都是我干的。 我是一名探鬼主播搁胆,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼弥搞,長吁一口氣:“原來是場噩夢啊……” “哼邮绿!你這毒婦竟也來了?” 一聲冷哼從身側響起拓巧,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤斯碌,失蹤者是張志新(化名)和其女友劉穎一死,沒想到半個月后肛度,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡投慈,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年承耿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伪煤。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡加袋,死狀恐怖,靈堂內的尸體忽然破棺而出抱既,到底是詐尸還是另有隱情职烧,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布防泵,位于F島的核電站蚀之,受9級特大地震影響,放射性物質發(fā)生泄漏捷泞。R本人自食惡果不足惜足删,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锁右。 院中可真熱鬧失受,春花似錦、人聲如沸咏瑟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽码泞。三九已至谆焊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間浦夷,已是汗流浹背辖试。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留劈狐,地道東北人罐孝。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像肥缔,于是被迫代替她去往敵國和親莲兢。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內容