Preface
It is necessary to implement the editing and saving functions of word documents. I wrote an article about the options before.
Follow onlyoffice to start implementing now. 【Multiplayer collaboration not used】
text
1. Backend deployment (ignored), after the backend gave me an address, I ran a demo (code)
and reported an error: The document security token was not formed correctly
. Possible solutions:
- Temporary solution to the problem that after installing onlyoffice in dzzoffice, the document security token is not formed correctly when opened.
- Please tell me how to solve this: The document security token was not correctly formed in onlyoffice
. Anyway, the backend gave me another address later. The demo can run successfully.
Introduce the office server configured in the background
main.js
<script type="text/javascript" src="xxxxxx/web-apps/apps/api/documents/api.js"></script>
- In fact, when testing the server in the first step, the components and configuration items were encapsulated. Here further adjust the configuration items according to the needs.
Refer to the official website for modification:- Editor customization : Note: Some of them require the enterprise version to be modified, such as the logo. This is a more detailed configuration item reference
- Advanced parameters : including document permissions and editor customization, etc.
The main ones used are document permissions and customization of editor configuration items.
-
To save after modification , the modified document is on the onlyOffice server, and you need to use the backend callback URL .
Logic :
1) For a new word document A, the front end uploads A to the backend server, and at the same time the page rendering is turned on, and the user can edit it.
2) After editing is completed, click Save, and the modified A is saved to the new server location through the callback url.
ps: This part of the function is mainly implemented on the back end (document replacement and path modification). The front end mainly fills in the callback url (spliced with the document id (or other distinguishing attributes)), and then refreshes it after completion, so Enough.
Official website callback handler, the main backend view -
A download function was added later.
Although in the previous configuration, there is a download permission configuration item.
But during testing, I found that its shortcomings (?
1. There is no obvious Icon in the menu bar (or I didn’t find it)
2. Save as can have many formats, but its saving address is actually the originally provided URL? (In this case, it will be saved to the server instead of downloaded to the user's local area) ps. I don't know whether it is downloaded back to the server. The final solution chosen is :
add a button on the front end to directly obtain the corresponding URL in the background for downloading .Using a link to download. Relatively simple. Reference: Codes for several methods of file downloading in front-end vue
<div @click.prevent="downloadFile">
<img
src="./img/download.png"
alt=""
style="cursor: pointer;"
/>
<a :href="fileUrl"></a>
</div>
downloadFile() {
this.getWordMes();//获取this.fileTitle && this.fileUrl的接口
if (!(this.fileTitle && this.fileUrl)) {
return;
} else {
// 创建隐藏的<a>元素
console.log(this.fileTitle);
const link = document.createElement("a");
link.href = this.fileUrl; // 使用 this.fileUrl 获取文件的完整路径
link.download = this.fileTitle; // 指定下载的文件名
link.target = "_blank";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
},
The problem is that the file name is set but becomes garbled. Don't know why.
some attempts
The menu bar has many functions, but actual needs do not require that many, and some need to be removed.
- I looked at the configuration, but it seems that only the enterprise version can be customized. So the method of modifying the configuration is pass.
- I originally wanted to use deep to modify it directly, but I couldn't get the content in the iframe that would be generated after a certain period of time. So pass. (I feel like this should be a feasible solution, but I don’t know how to implement it at the moment)
Modify the style of the internal elements of the iframe , but the iframe used inside should not be the dynamically produced iframe. - In the end, I reluctantly used css+div to block it.
reference
Vue implements DOC, DOCX, XLSX, PPT, PDF document editing and preview based on onlyoffice : including options, Vue2+3 also has back-end deployment, mainly back-end
Vue previews word, excel, ppt and other office documents - intranet access ( Based on onlyoffice, the backend returns a file stream) and has explanations of commonly used configurations and front-end functions. easier. Because there is no mention of processing or operations after returning the file stream.
Onlyoffice secondary development guide : It talks about collaboration, encryption and so on. Some principles are also discussed.
The simple integration of java+vue+onlyoffice is pretty much the same, including front-end and back-end code.
onlyoffice uses the record backend to extract the printing function. The style is customized, but there is no explanation of how it is implemented. I don’t know if it is the enterprise version.
Extensible & Optimizable
- The requirement is that users edit their own documents, so collaboration is not used. The actual collaboration in the community version is limited to 20 people at most (I don’t know if only 20 people can edit online at a time or something).
- Plug-in related
- [Plug-in Market] How to install plug-ins in ONLYOFFICE documents. You can try to add plug-ins later. There are still many functions.
- Onlyoffice Plug-in Development Guide : Provides a very simple plug-in development method, but I haven’t tried it yet.
- Style related: onlyoffice changes the logo in the upper left corner : saving money 1. Enterprise version 2. Directly change the source code, repackage and replace