石景山网站建设公司哪个好,榆次做网站,郑州网站建设技术外包,长沙网络科技公司我们来了解下#xff0c;如何将 ONLYOFFICE 文档编辑器与您的 Web 应用集成。 许多 Web 应用都可以从文档编辑功能中获益。但是要从头开始创建这个功能#xff0c;需要花费大量时间和精力。幸运的是#xff0c;您可以使用 ONLYOFFICE——这是一款开源办公套件#xff0c;可…我们来了解下如何将 ONLYOFFICE 文档编辑器与您的 Web 应用集成。 许多 Web 应用都可以从文档编辑功能中获益。但是要从头开始创建这个功能需要花费大量时间和精力。幸运的是您可以使用 ONLYOFFICE——这是一款开源办公套件可用于第三方应用作为处理文档、电子表格和演示文稿编辑组件。
在本文中我们会向您展示如何为任意 Node.js 应用添加文档编辑功能。我们会使用 ONLYOFFICE 平台上最简单的文档管理系统向您展示具体操作方法。
ONLYOFFICE 能为您的应用带来什么
编辑文本文档、电子表格、演示文稿、PDF 等办公文档支持 AI 集成也提供两款现成的 AI 助手与微软 Office 高度兼容转换文档支持 PDF 转 DOCX 等操作多人实时协同编辑功能丰富的宏和插件库支持自行开发上传自定义界面白标产品
那么我们开始行动吧。
安装 ONLYOFFICE 文档服务器
ONLYOFFICE 文档服务器包含几种编辑器。在将编辑器与您的应用集成之前您要将编辑器部署到您的机器上。最简单的安装方法是使用 Docker
docker run -itd -p 8080:80 onlyoffice/documentserver
文档服务器的地址为 0.0.0.0:8080。
授予文件访问权限 如要在您的应用中使用编辑器您需要有打开和编辑文件的权限。
为演示如何访问这些文件我们使用 express 框架开发的一个简单的 Node.js 应用。这个应用使用端口 3000。
在 GET 请求被发送至 http://localhost:3000/ 时系统会返回文件 index.html。“文件”文件夹中包含公共文件可在 http://localhost:3000/filename 获取。
const express require(express);const path require(path);const app express();app.use(express.static(files));app.get(/, (req, res) {res.sendFile(path.join(__dirname /index.html))});app.listen(3000 , () console.log(Example app listening on port ${port}!));
如何打开文档进行查看
打开 index.html 文件连接到文档服务器 API。您需要添加三个按钮——用于打开文本文档、电子表格和演示文稿。
编辑器会被在带有占位符 ID 的元素中打开。
script typetext/javascript srchttp://0.0.0.0:8080/web-apps/apps/api/documents/api.js/scriptbutton onclickopen_to_view(1.docx, text)1.docx view/buttonbutton onclickopen_to_view(1.xlsx, spreadsheet)1.xlsx view/buttonbutton onclickopen_to_view(1.pptx, presentation)1.pptx view/buttondiv idplaceholder/divscriptfunction open_to_view(filename, documentType) {// Close the editors if they are open.if (this.docEditor) {
this.docEditor.destroyEditor()
}// Add the link to the file you want to openconst url window.location.protocol // window.location.hostname : window.location.port / filename;// Create DocsAPI object and open the editorthis.docEditor new DocsAPI.DocEditor(placeholder,{documentType: documentType,document: { url: url },editorConfig: { mode: view }});}/script
完成上述操作后点击其中一个按钮即可在 ONLYOFFICE 中打开文件进行查看。
如何打开文件进行编辑
现在您需要再添加三个用于编辑文件的按钮。然后写一个新函数 open_to_edit()。它看起来很像 open_to_view() 函数只是没有 editorConfig。
button onclickopen_to_edit(1.docx, text)1.docx view/buttonbutton onclickopen_to_edit(1.xlsx, spreadsheet)1.xlsx view/buttonbutton onclickopen_to_edit(1.pptx, presentation)1.pptx view/buttonscriptfunction open_to_edit(filename, documentType) {if (this.docEditor) {
this.docEditor.destroyEditor()
}const url window.location.protocol //
window.location.hostname : window.location.port / filename;this.docEditor new DocsAPI.DocEditor(placeholder, {documentType: documentType,document: { url: url }});}/script
这样您就可以打开文件进行编辑了。但这还不够因为我们还想保存文件。我们来添加这个功能。
如何保存文件
现在我们来编写最基本的回调处理程序用于将文件保存到服务器。
app.post(/track, function (req, res) {// status 2 means that the files is ready for saving.
// More information about statuses can be found in our API documentation
if (req.body.status 2) {const file syncRequest(GET, req.body.url);fs.writeFileSync(__dirname /files/ req.query.fileName, file.getBody());// {error: 0} you need to get this response from your storage,//it means no errors occurred. Detailsres.write({\error\:0});res.end();// do not do anything about other responses} else {res.write({\error\:0});res.end();}
});
这就是将 ONLYOFFICE 编辑器与您的应用集成所需的最基本的操作了。您可以查看 ONLYOFFICE API 文档了解更多信息。
ONLYOFFICE 编辑器几乎可以与所有编程语言编写的 web 应用集成。如要了解更多关于 .Net (C# MVC)、.Net (C#)、Java、PHP 和 Ruby 的集成示例可在 GitHub 上查看。有关集成到 Python 应用的文章也很快会发布。
许可呢
ONLYOFFICE 采用双许可模式。这意味着只要遵从 GNU AGPL v.3 许可就可以使用 GitHub 上的 ONLYOFFICE 开源解决方案。ONLYOFFICE 有许多成功的集成案例包括与 ownCloud, Nextcloud, Moodle 和 eХo Platform 的集成。
如要将 ONLYOFFICE 编辑器作为 SaaS 或本地服务的一部分使用您需要获得商业许可。在商用方面ONLYOFFICE 也有诸多成功案例。例如中国知网集成 ONLYOFFICE让客户在 CNKI 系统中实现文件在线预览。或者南京大学e-Science中心将 ONLYOFFICE文档集成到协同表格工具中从而改进教师检查、评阅和打分学生作业的流程。
相关文章
开发者版 ONLYOFFICE 文档 7.5API 和文档生成器更新
将 ONLYOFFICE 文档编辑器与 С# 群件平台集成
使用 Ruby 语言来解析开放文档格式 OOXML 文件
如何将 ONLYOFFICE 协作空间与单页面应用集成
如何采用WOPI协议将Office整合到自己项目中
