前言
我們通過(guò)使用docker部署的onlyoffice來(lái)實(shí)現(xiàn)文檔的預(yù)覽編輯，做到實(shí)時(shí)保存
一、docker部署onlyoffice
依次運(yùn)行以下命令即可
//拉取鏡像
sudo docker pull kenlk/onlyoffice
//運(yùn)行
docker run -i -t -d -p 9000:80 kenlk/onlyoffice
//查看容器是否啟動(dòng)
docker ps
二、前端demo
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>測(cè)試</title>
<script type="text/javascript" src="http://ip:9000/web-apps/apps/api/documents/api.js"></script>
<style>
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="placeholder" class="nav" style="width: 100%; height: 100%"></div>
<script language="javascript" type="text/javascript">
var docEditor = new DocsAPI.DocEditor("placeholder", {
"document": {
"documentType": "text",
"width": "100%", //打開(kāi)窗口寬度
"height": "100%", //打開(kāi)窗口高度
"fileType": "docx",//文檔類型
"key": "16", //定義用于服務(wù)識(shí)別文檔的唯一文檔標(biāo)識(shí)符。每次編輯和保存文檔時(shí)，都必須重新生成密鑰。長(zhǎng)度限制為128個(gè)符號(hào)。
"title": "111.docx", //為查看或編輯的文檔定義所需的文件名，該文件名也將在下載文檔時(shí)用作文件名。長(zhǎng)度限制為128個(gè)符號(hào)。
"url": "http://ip:port/file/2022/09/08/111.docx", //定義存儲(chǔ)原始查看或編輯的文檔的絕對(duì)URL
"info": {
"owner": "王重陽(yáng)",//文件創(chuàng)建者名稱
"sharingSettings": [//文件對(duì)應(yīng)用戶的操作權(quán)限配置
{
"permissions": "Full Access", // 完全操作權(quán)限-Full Access,只讀權(quán)限-Read Only 拒絕訪問(wèn)-Deny Access
"user": "林朝英" //有次權(quán)限的用戶
},
{
"permissions": "Read Only",
"user": "周伯通"
},
],
"uploaded": "2010-07-07 3:46 PM" //文件創(chuàng)建時(shí)間
},
//文檔權(quán)限參數(shù)
"permissions": {
"edit": true, //（文件是否可以編輯，false時(shí)文件不可編輯）
"fillForms": true,//定義是否能在文檔中填充表單
"print": false, //定義文檔是否能打印
"review": false,//第一是否顯示審閱文檔菜單
"comment": true, //定義是否可以注釋文檔。如果注釋權(quán)限設(shè)置為“ true”，則文檔側(cè)欄將包含“注釋”菜單選項(xiàng)；只有將mode參數(shù)設(shè)置為edit時(shí)才生效，默認(rèn)值與edit參數(shù)的值一致。
"copy": true, //是否允許您將內(nèi)容復(fù)制到剪貼板。默認(rèn)值為true。
"download": true, //定義是否可以下載文檔或僅在線查看或編輯文檔。如果下載權(quán)限設(shè)置為“false”下載為菜單選項(xiàng)將沒(méi)有。默認(rèn)值為true。
"modifyContentControl": true, //定義是否可以更改內(nèi)容控件設(shè)置。僅當(dāng)mode參數(shù)設(shè)置為edit時(shí)，內(nèi)容控件修改才可用于文檔編輯器。默認(rèn)值為true。
"modifyFilter": true, //定義過(guò)濾器是否可以全局應(yīng)用（true）影響所有其他用戶，或局部應(yīng)用（false），即僅適用于當(dāng)前用戶。如果將mode參數(shù)設(shè)置為edit，則過(guò)濾器修改僅對(duì)電子表格編輯器可用。默認(rèn)值為true。
}
},
// type: "embedded",
//打開(kāi)文檔類型
// text對(duì)應(yīng)各種文檔類型(.doc, .docm, .docx, .dot, .dotm, .dotx, .epub, .fodt, .htm, .html, .mht, .odt, .ott, .pdf, .rtf, .txt, .djvu, .xps)
//spreadsheet對(duì)應(yīng)表格類型(.csv, .fods, .ods, .ots, .xls, .xlsm, .xlsx, .xlt, .xltm, .xltx)
//presentation對(duì)應(yīng)PPT類型(.fodp, .odp, .otp, .pot, .potm, .potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx)
"editorConfig": {//編輯配置
"createUrl": "http://121.41.12.71:8082/dev-api/common/url-to-create-document/", //指定創(chuàng)建文件的頁(yè)面,添加該配置后文檔服務(wù)器插件才會(huì)顯示新建文件按鈕
"mode": "edit", //文檔操作模式 view 視圖模式不可編輯 edit 編輯模式可編輯文檔todo
//"callbackUrl": "http://172.16.10.151:10889/admin/pep/contract/template/office/out/docx/save",//保存文件時(shí)的回調(diào)地址
"callbackUrl": "http://ip:port/docx/save",//保存文件時(shí)的回調(diào)地址
"lang": "zh-CN", //語(yǔ)言環(huán)境
"customization": {//定制部分允許自定義編輯器界面，使其看起來(lái)像您的其他產(chǎn)品，并更改是否存在其他按鈕，鏈接，更改徽標(biāo)和編輯者所有者詳細(xì)信息。
"help": true, //定義是顯示還是隱藏“幫助”菜單按鈕。默認(rèn)值為true。
"hideRightMenu": false, //定義在第一次加載時(shí)是顯示還是隱藏右側(cè)菜單。默認(rèn)值為false。
"autosave": true,//定義是啟用還是禁用“自動(dòng)保存”菜單選項(xiàng)。請(qǐng)注意，如果您在菜單中更改此選項(xiàng)，它將被保存到瀏覽器的localStorage中。默認(rèn)值為true。
"forcesave": true, //定義保存按鈕是否顯示默認(rèn)false
"chat": true, //定義“聊天”菜單按鈕是顯示還是隱藏；請(qǐng)注意，如果您隱藏“聊天”按鈕，則相應(yīng)的聊天功能也將被禁用。默認(rèn)值為true。
"commentAuthorOnly": false, //定義用戶是否只能編輯和刪除他的評(píng)論。默認(rèn)值為false。
"comments": true, //定義是顯示還是隱藏“注釋”菜單按鈕；請(qǐng)注意，如果您隱藏“評(píng)論”按鈕，則相應(yīng)的評(píng)論功能將僅可用于查看，評(píng)論的添加和編輯將不可用。默認(rèn)值為true。
"compactHeader": false, //定義是否將菜單欄放在在徽標(biāo)旁邊使界面更加緊湊默認(rèn)false。
"compactToolbar": false, //定義顯示的頂部工具欄類型是完整（false）還是緊湊true。默認(rèn)值為false 多余菜單將在右側(cè)折疊點(diǎn)擊顯示。
"compatibleFeatures": false, //定義僅與OOXML格式兼容的功能的使用。例如，不要在整個(gè)文檔上使用注釋。默認(rèn)值為false。
"macros": true, //定義是否將運(yùn)行文檔宏以及可用的宏設(shè)置。默認(rèn)值為true。
"macrosMode": "warn", //定義是否將運(yùn)行文檔宏。可以采用以下值： disable -根本不運(yùn)行；enable -自動(dòng)運(yùn)行所有宏；warn -警告宏并請(qǐng)求允許運(yùn)行。默認(rèn)值為original。
"plugins": true, //定義是否將啟動(dòng)插件并可用。默認(rèn)值為true。
"showReviewChanges": false, //定義在加載編輯器時(shí)是否自動(dòng)顯示或隱藏審閱更改面板。默認(rèn)值為false。
"spellcheck": true, //定義在加載編輯器時(shí)是否自動(dòng)打開(kāi)或關(guān)閉拼寫檢查器。拼寫檢查器僅適用于文檔編輯器和演示文稿編輯器。默認(rèn)值為true。
"toolbarNoTabs": false, //定義是突出顯示頂部工具欄選項(xiàng)卡樣式。默認(rèn)值為false。
"unit": "cm", //定義在標(biāo)尺和對(duì)話框中使用的度量單位。可以采用以下值：cm -厘米，pt-點(diǎn)，inch -英寸。默認(rèn)值為厘米（cm）。
"zoom": 100, //定義以百分比為單位的文檔顯示縮放值?？梢匀〈笥?的值。對(duì)于文本文檔和演示文稿，可以將此參數(shù)設(shè)置為-1（使文檔適合頁(yè)面選項(xiàng)）或-2（使文檔頁(yè)面寬度適合編輯器頁(yè)面）。默認(rèn)值為100。
"customer": { //關(guān)于 文檔編輯器的顯示信息
"address": "My City, 123a-45", //有權(quán)訪問(wèn)編輯或編輯作者的公司或個(gè)人的郵政地址，
"info": "Some additional information", //有關(guān)您希望其他人認(rèn)識(shí)的公司或個(gè)人的一些其他信息，
"logo": "https://example.com/logo-big.png", //圖片徽標(biāo)的路徑（此文件沒(méi)有特別建議，但是如果使用透明背景的.png格式會(huì)更好）。圖片必須具有以下尺寸：432x70，
"mail": "john@example.com", //有權(quán)訪問(wèn)編輯者或編輯者的公司或個(gè)人的電子郵件地址
"name": "歐陽(yáng)鋒", //該公司或個(gè)人的誰(shuí)可以訪問(wèn)編輯或編輯作者，名稱
"www": "example.com" //以上公司或個(gè)人的家庭網(wǎng)站地址，
},
"loaderLogo": "https://tianpeng.zbjimg.com/tianpeng/task/2022/06/17/LOGO%E5%A4%A7%E5%9B%BE.png/origine/d859296f-3d10-43ec-bd85-56d72a9b49aa",
"feedback": { //反饋配置信息
"url": "https://example.com", //單擊“反饋和支持”菜單按鈕時(shí)將打開(kāi)的網(wǎng)站地址的絕對(duì)URL ，
"visible": true //顯示或隱藏“反饋和支持”菜單按鈕，
},
"goback": { //定義“打開(kāi)文件位置”菜單按鈕和右上角按鈕的設(shè)置。該對(duì)象具有以下參數(shù)：
"blank": true, //在新的瀏覽器選項(xiàng)卡/窗口（如果值設(shè)置為true）或當(dāng)前選項(xiàng)卡（如果值設(shè)置為false）中打開(kāi)網(wǎng)站。默認(rèn)值為true，
"requestClose": false, //定義如果單擊“打開(kāi)文件位置”按鈕，則調(diào)用events.onRequestClose事件，而不是打開(kāi)瀏覽器選項(xiàng)卡或窗口。默認(rèn)值為false，
"text": "Open file location", //將在“打開(kāi)文件位置”菜單按鈕和右上角按鈕（即，而不是“轉(zhuǎn)到文檔”）上顯示的文本，
"url": "https://example.com" //單擊“打開(kāi)文件位置”菜單按鈕時(shí)將打開(kāi)的網(wǎng)站地址的絕對(duì)URL ，
},
"logo": {
"image": "https://example.com/logo.png", //圖像文件的路徑，用于在普通工作模式下顯示（即，在所有編輯器的查看和編輯模式下）。圖片必須具有以下尺寸：172x40，
"imageEmbedded": "https://example.com/logo_em.png", //用于以嵌入式模式顯示的圖像文件的路徑（請(qǐng)參閱config部分以了解如何定義嵌入式文檔類型）。圖片必須具有以下尺寸：248x40，
"url": "https://www.baidu.com" //某人單擊徽標(biāo)圖像時(shí)將使用的絕對(duì)URL（可用于轉(zhuǎn)到您的網(wǎng)站等）。保留為空字符串或null以使徽標(biāo)不可單擊，
},
},
"user": { //用戶信息
"id": "78e1e841",//用戶ID
"name": "洪七公" //用戶全名稱
},
"embedded": { //Embedded部分僅適用于嵌入式文檔類型（請(qǐng)參閱config部分以了解如何定義嵌入式文檔類型）。它允許更改設(shè)置，這些設(shè)置定義嵌入式模式下按鈕的行為。
"embedUrl": "https://example.com/embedded?doc=exampledocument1.docx", //定義文檔的絕對(duì)URL，以作為嵌入到網(wǎng)頁(yè)中的文檔的源文件
"fullscreenUrl": "https://example.com/embedded?doc=exampledocument1.docx#fullscreen", //定義將以全屏模式打開(kāi)的文檔的絕對(duì)URL。
"saveUrl": "http://121.41.12.71:9999/sj-file/test.doc", // 定義允許將文檔保存到用戶個(gè)人計(jì)算機(jī)上的絕對(duì)URL。
"shareUrl": "https://example.com/view?doc=exampledocument1.docx", //定義允許其他用戶共享此文檔的絕對(duì)URL。
"toolbarDocked": "top" //定義嵌入式查看器工具欄的位置，可以為top或bottom。
}
},
"events": { //事件配置
// onAppReady,//-將應(yīng)用程序加載到瀏覽器時(shí)調(diào)用的函數(shù)。
// onCollaborativeChanges //-當(dāng)文檔由其他用戶在嚴(yán)格共同編輯模式下共同編輯時(shí)調(diào)用的函數(shù)。
// onDocumentReady,//-將應(yīng)用程序加載到瀏覽器時(shí)調(diào)用的函數(shù)。
// onDocumentStateChange,//-修改文檔時(shí)調(diào)用的函數(shù)。這就是所謂的使用參數(shù)：{真正的“數(shù)據(jù)”}在當(dāng)前用戶編輯文檔以及與參數(shù)：{“數(shù)據(jù)”：假}在當(dāng)前用戶的更改發(fā)送到文檔編輯服務(wù)。
// onDownloadAs,//-調(diào)用downloadAs方法時(shí)，使用指向已編輯文件的絕對(duì)URL調(diào)用的函數(shù)。在data參數(shù)中發(fā)送要下載的文檔的絕對(duì)URL 。
// onError,//-發(fā)生錯(cuò)誤或其他特定事件時(shí)調(diào)用的函數(shù)。錯(cuò)誤消息在data參數(shù)中發(fā)送。
// onInfo,//-應(yīng)用程序打開(kāi)文件時(shí)調(diào)用的函數(shù)。該模式在data.mode參數(shù)中發(fā)送?？梢圆榭椿蚓庉?。
// onMetaChange,//-通過(guò)meta命令更改文檔的元信息時(shí)調(diào)用的函數(shù)。文檔名稱通過(guò)data.title參數(shù)發(fā)送。
// onOutdatedVersion,//-使用舊的document.key值打開(kāi)文檔進(jìn)行編輯時(shí)，顯示錯(cuò)誤后調(diào)用的函數(shù)，該值用于編輯先前的文檔版本并已成功保存。調(diào)用此事件時(shí)，必須使用新的document.key重新初始化編輯器。
// onReady,//-將應(yīng)用程序加載到瀏覽器時(shí)調(diào)用的函數(shù)。自從5.0版本不推薦使用，請(qǐng)使用onAppReady代替
// onRequestClose,//-結(jié)束編輯器的工作并且必須關(guān)閉編輯器時(shí)調(diào)用的函數(shù)。
// onRequestCompareFile,//-用戶嘗試通過(guò)單擊“存儲(chǔ)中的文檔”按鈕來(lái)選擇要比較的文檔時(shí)調(diào)用的函數(shù)。要選擇要比較的文檔，必須調(diào)用setRevisedFile方法。如果未聲明該方法，則不會(huì)顯示“來(lái)自存儲(chǔ)的文檔”按鈕。
// onRequestCreateNew,//-用戶嘗試通過(guò)單擊“新建”按鈕來(lái)創(chuàng)建文檔時(shí)調(diào)用的函數(shù)。使用此方法代替createUrl字段。如果未聲明該方法且未指定createUrl，則將不會(huì)顯示“創(chuàng)建新”按鈕。
// onRequestEditRights,//-用戶嘗試通過(guò)單擊“編輯文檔”按鈕嘗試將文檔從視圖切換到編輯模式時(shí)調(diào)用的函數(shù)。調(diào)用該函數(shù)時(shí)，必須在編輯模式下再次初始化編輯器。如果未聲明該方法，則不會(huì)顯示“編輯”按鈕。
// onRequestHistory,//-用戶嘗試通過(guò)單擊“版本歷史記錄”按鈕顯示文檔版本歷史記錄時(shí)調(diào)用的函數(shù)。要顯示文檔版本歷史，您必須調(diào)用refreshHistory方法。如果未聲明該方法和onRequestHistoryData方法，則不會(huì)顯示“版本歷史記錄”按鈕。
// onRequestHistoryClose,//-當(dāng)用戶嘗試通過(guò)單擊“關(guān)閉歷史記錄”按鈕來(lái)查看文檔版本歷史記錄時(shí)，試圖調(diào)用該文檔時(shí)調(diào)用的函數(shù)。調(diào)用該函數(shù)時(shí)，必須在編輯模式下再次初始化編輯器。如果未聲明該方法，則不會(huì)顯示“關(guān)閉歷史記錄”按鈕。
// onRequestHistoryData,//-用戶嘗試單擊文檔版本歷史記錄中的特定文檔版本時(shí)調(diào)用的函數(shù)。
// onRequestInsertImage,//-用戶嘗試通過(guò)單擊“保存圖像”按鈕插入圖像時(shí)調(diào)用的函數(shù)。圖像插入的類型在參數(shù)data.c中指定。
// onRequestRename,//-用戶嘗試通過(guò)單擊“重命名...”按鈕重命名文件時(shí)調(diào)用的函數(shù)。
// onRequestRestore,//-用戶單擊版本歷史記錄中的“還原”按鈕來(lái)還原文件版本時(shí)調(diào)用的函數(shù)。
// onRequestSaveAs,//-用戶嘗試通過(guò)單擊“另存為...”按鈕保存文件時(shí)調(diào)用的函數(shù)。文檔的標(biāo)題和要下載的文檔的絕對(duì)URL在data參數(shù)中發(fā)送。如果未聲明該方法，則不會(huì)顯示“另存為...”按鈕。
// onRequestSharingSettings,//-用戶單擊“更改訪問(wèn)權(quán)限”按鈕來(lái)管理文檔訪問(wèn)權(quán)限時(shí)調(diào)用的函數(shù)。必須調(diào)用setSharingSettings方法來(lái)更新有關(guān)允許與其他用戶共享文檔的設(shè)置的信息。如果未聲明該方法，則不會(huì)顯示“更改訪問(wèn)權(quán)限”按鈕。
// onRequestUsers,//-評(píng)論者可以選擇要在評(píng)論中提及的其他用戶時(shí)調(diào)用的函數(shù)。要設(shè)置用戶列表，必須調(diào)用setUsers方法。
// onWarning,//-發(fā)生警告時(shí)調(diào)用的函數(shù)。警告消息在data參數(shù)中發(fā)送。
// "onDocumentStateChange" : onDocumentStateChange, //文檔改變后的回調(diào)
// "onDocumentReady" : onDocumentReady, //文檔初始化準(zhǔn)備好后的回調(diào)
},
});
</script>
</body>
</html>
注意：
1.http://ip:9000/web-apps/apps/api/documents/api.js 中ip問(wèn)docker容器服務(wù)器地址
2.http://ip:port/file/2022/09/08/111.docx為文件源路徑
3.http://ip:port/docx/save 為回調(diào)的后端地址
4. “key”: “16” 更換文件key對(duì)應(yīng)的值需要進(jìn)行更改，建議將文件變化過(guò)后都更新唯一值文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-609062.html
三、后端回調(diào)處理
/**
* onlyoffice 保存回調(diào)
*
* @param request
* @param response
*/
@PostMapping(value = "/docx/save", produces = "application/json;charset=UTF-8")
@Inner(value = false)
public void saveWord(HttpServletRequest request, HttpServletResponse response) throws IOException {
demoService.saveWord(request, response);
}
@Override
public void saveWord(HttpServletRequest request, HttpServletResponse response) throws IOException {
log.info("==========開(kāi)始保存ONLYOFFICE文檔==========");
PrintWriter writer = response.getWriter();
String body = "";
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 GlobalException("ONLYOFFICE回調(diào)保存請(qǐng)求體未空");
}
log.info("ONLYOFFICE回調(diào)保存請(qǐng)求體是:[{}]", body);
JSONObject jsonObj = JSON.parseObject(body);
int status = (Integer) jsonObj.get("status");
int saved = 0;
String keyStr = jsonObj.get("key").toString();
long key = Long.parseLong(keyStr.substring(keyStr.indexOf("_") + 1));
// Long key = Long.parseLong(keyStr);
log.info("原文件ID是:[{}]", key);
//* - 不到帶有標(biāo)識(shí)符的文檔
//*1 - 正在編輯文檔
//*2 - 文件已準(zhǔn)備好保存,
//*3 - 發(fā)生了文檔保存錯(cuò)誤
//*4 - 文件關(guān)閉，沒(méi)有變化
//*6 - 正在編輯文檔，但保存當(dāng)前文檔狀態(tài)
//*7 - 強(qiáng)制保存文檔時(shí)發(fā)生錯(cuò)誤
if (status == 2 || status == 3 || status == 6) //MustSave, Corrupted
{
String downloadUri = (String) jsonObj.get("url");
log.info("ONLYOFFICE回調(diào)保存文件下載地址是:[{}]", downloadUri);
try {
InputStream is = null;
if (downloadUri.startsWith("https")) {
is = MyX509TrustManager.httpsRequest(downloadUri, "GET", null);
} else {
URL url = new URL(downloadUri);
java.net.HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection();
is = connection.getInputStream();
}
if (is == null) {
throw new GlobalException("獲取文件流失敗!!");
}
try (ByteArrayOutputStream bao = new ByteArrayOutputStream()) {
PepContractTemplate template = this.getById(key);
if (null == template) {
throw new GlobalException("未獲取到原文件信息");
}
log.info("原文件信息[{}]", template);
//文件地址
String remark = template.getServerFileUrl();
int read;
final byte[] bytes = new byte[1024];
while ((read = is.read(bytes)) != -1) {
bao.write(bytes, 0, read);
}
bao.flush();
byte[] bytes1 = bao.toByteArray();
//覆蓋原文件
FileUtil.getFileByBytes(bytes1, remark);
}
} catch (Exception ex) {
saved = 1;
ex.printStackTrace();
}
}
writer.write("{\"error\":" + saved + "}");
}
/**
* 將Byte數(shù)組轉(zhuǎn)換成文件
*
* @param bytes
* @param filePath 文件地址
*/
public static void getFileByBytes(byte[] bytes, String filePath) {
BufferedOutputStream bos = null;
FileOutputStream fos = null;
File file = null;
try {
File dir = new File(filePath);
if (!dir.exists() && dir.isDirectory()) {// 判斷文件目錄是否存在
dir.mkdirs();
}
file = new File(filePath);
fos = new FileOutputStream(file);
bos = new BufferedOutputStream(fos);
bos.write(bytes);
} catch (Exception e) {
e.printStackTrace();
} finally {
if (bos != null) {
try {
bos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (fos != null) {
try {
fos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
四、效果
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-609062.html
到了這里，關(guān)于實(shí)現(xiàn)word文檔在線編輯的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
