中企动力做的保安服务网站,怎么做会员积分网站,软文推广策划方案,百度云电脑版网站入口1.docker部署onlyOffice
1.1拉取最新版onlyOffice镜像 sudo docker pull onlyoffice/documentserver 1.2运行以下命令运行容器
其中 -v 后的第一部分是挂载自己的linux的哪个目录 # 启动docker容器#xff0c;默认启动端口为80#xff0c;可以进行修改
docker run -i -t … 1.docker部署onlyOffice
1.1拉取最新版onlyOffice镜像 sudo docker pull onlyoffice/documentserver 1.2运行以下命令运行容器
其中 -v 后的第一部分是挂载自己的linux的哪个目录 # 启动docker容器默认启动端口为80可以进行修改
docker run -i -t -d -e TZAsia/Shanghai -p 6831:80 --restartalways \-v /usr/local/docker/document/logs:/var/log/onlyoffice \-v /usr/local/docker/document/data:/var/www/onlyoffice/Data \-v /usr/local/docker/document/lib:/var/lib/onlyoffice \-v /usr/local/docker/document/db:/var/lib/postgresql onlyoffice/documentserver 运行完容器后开始编写代码 2.前端vue代码
2.1public文文件夹下index.html引入对应的脚本
其中的ip地址和端口改成自己的 script typetext/javascript srchttp://192.168.59.164:6831/web-apps/apps/api/documents/api.js/script 2.2 vue组件代码 !--onlyoffice 编辑器--
templatediv idvabOnlyOffice/div
/templatescript
export default {name: VabOnlyOffice,props: {option: {type: Object,default: () {return {}},},},data() {return {doctype: ,docEditor: null,}},beforeDestroy() {if (this.docEditor ! null) {this.docEditor.destroyEditor();this.docEditor null;}},watch: {option: {handler: function(n) {this.setEditor(n)this.doctype this.getFileType(n.fileType)},deep: true,},},mounted() {if (this.option.url) {this.setEditor(this.option)}},methods: {async setEditor(option) {if (this.docEditor ! null) {this.docEditor.destroyEditor();this.docEditor null;}this.doctype this.getFileType(option.fileType)let config {document: {//后缀fileType: option.fileType,key: option.key ||,title: option.title,permissions: {edit: option.isEdit,//是否可以编辑: 只能查看传falseprint: option.isPrint,download: false,// fillForms: true,//是否可以填写表格如果将mode参数设置为edit则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。// review: true //跟踪变化},url: option.url,},documentType: this.doctype,editorConfig: {callbackUrl: option.editUrl,//编辑word后保存时回调的地址这个api需要自己写了将编辑后的文件通过这个api保存到自己想要的位置lang: option.lang,//语言设置//定制customization: {autosave: false,//是否自动保存chat: false,comments: false,help: false,// hideRightMenu: false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false//是否显示插件plugins: false,},user:{id:option.user.id,name:option.user.name},mode:option.model?option.model:edit,},width: 100%,height: 100%,token:option.token||}// eslint-disable-next-line no-undef,no-unused-varsthis.docEditor new DocsAPI.DocEditor(vabOnlyOffice, config)},getFileType(fileType) {let docType let fileTypesDoc [doc, docm, docx, dot, dotm, dotx, epub, fodt, htm, html, mht, odt, ott, pdf, rtf, txt, djvu, xps,]let fileTypesCsv [csv, fods, ods, ots, xls, xlsm, xlsx, xlt, xltm, xltx,]let fileTypesPPt [fodp, odp, otp, pot, potm, potx, pps, ppsm, ppsx, ppt, pptm, pptx,]if (fileTypesDoc.includes(fileType)) {docType text}if (fileTypesCsv.includes(fileType)) {docType spreadsheet}if (fileTypesPPt.includes(fileType)) {docType presentation}return docType}},
}
/script2.3父组件中开始引用 要记得注册组件 div classqualityManual-containerel-dialog :visible.syncopenOffice width800px height800px append-to-body div classqualityManual-container-officeonly-office :optionoption //div/el-dialog/div 对应的data中的属性 openOffice:false,//参考vabOnlyOffice组件参数配置option: {key:,url: ,isEdit: ,fileType: ,title: ,lang: ,isPrint: ,user: { id:null,name:}}, 对应的method中添加方法这个方法可以在需要的地方引用 需要注意的是这里的ip必须这样填自己天自己的因为作为docker运行的onlyoffice需要这样访问本地linux服务器中的服务程序 注自己在本地测试时无法通过localhost进行测试运行 modifyTem(row){this.getFile(row.id)},getFile(id) {this.openOffice truethis.show false// getAction(/file/selectById, { id: this.id }).then(res {this.option.isEdit true
// https://dsgrcdnblobprod5u3.azureedge.net/catalog-assets/zh-cn/a32a147f-1f69-4fd5-8a39-c25b2a0093e8/tf67429532_wac-987650ec15fa.docxthis.option.lang zh-CNthis.option.url http://192.168.59.164:8080/notemode/notemodeltypeenum/download/idthis.option.title 笔录模板this.option.fileType docxthis.option.isPrint falsethis.option.user { id:12,name:张三}this.option.editUrl http://192.168.59.164:8080/notemode/notemodeltypeenum/save/id// this,option.key11111// })},close() {this.show false}, 对应的样式 style
.qualityManual-container-office {width: 100%; /* 确保容器宽度充满整个父元素 */height: 800px; /* 根据需要调整高度 */overflow: hidden; /* 避免内部内容溢出 */
}/style 3.对应的后端代码
1.dowload 方法是作为流进行文件数据的返回
2.save方法是对在线编辑后对于word的保存回调方法在vue中有对应url回调地址的设置选项 注意回调的时候onlyOffice是通过一个地址url让你进行去下载。
有一些是测试时的代码没有删掉请大家注意甄别。 GetMapping(/download/{id})public void download(PathVariable(id)Long id, HttpServletRequest request, HttpServletResponse response) throws Exception {Notemodeltypeenum notemodeltypeenum notemodeltypeenumService.selectNotemodeltypeenumByID(id);String filePath /a.docx;int profileIndex notemodeltypeenum.getContentStr().indexOf(/profile) /profile.length();String subPath notemodeltypeenum.getContentStr().substring(profileIndex);filePath RuoYiConfig.getProfile()subPath;//本地文件
// String configPath RuoYiConfig.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(a.docx, 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();}}}}PostMapping(/save/{id})public void save(PathVariable(id)Long id,RequestParam MapString, String map, HttpServletRequest request, HttpServletResponse response) {Notemodeltypeenum notemodeltypeenum notemodeltypeenumService.selectNotemodeltypeenumByID(id);PrintWriter writer null;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回调保存请求体未空);}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 fileName generateUniqueFileName(extractFileName(notemodeltypeenum.getContentStr()));String savePath RuoYiConfig.getProfile()/fileName;downloadFile(downloadUri,savePath);// 更新原数据的文件地址String s replacePathAfterProfile(notemodeltypeenum.getContentStr(), / fileName);notemodeltypeenum.setContentStr(s);notemodeltypeenumService.updateNotemodeltypeenum(notemodeltypeenum);} catch (Exception ex) {saved 1;ex.printStackTrace();}}writer.write({\error\: saved });}public static void downloadFile(String fileUrl, String saveDir) {try {URL url new URL(fileUrl);URLConnection connection url.openConnection();// 5000 milliseconds is an example timeout valueconnection.setConnectTimeout(5000);connection.setReadTimeout(5000);try (BufferedInputStream in new BufferedInputStream(connection.getInputStream());FileOutputStream fileOutputStream new FileOutputStream(saveDir)) {byte[] dataBuffer new byte[1024];int bytesRead;while ((bytesRead in.read(dataBuffer, 0, 1024)) ! -1) {fileOutputStream.write(dataBuffer, 0, bytesRead);}}System.out.println(File downloaded successfully: saveDir);} catch (IOException e) {System.out.println(Error downloading the file: e.getMessage());e.printStackTrace();}}
//
// public static void main(String[] args) {
// downloadFile(https://dsgrcdnblobprod5u3.azureedge.net/catalog-assets/zh-cn/a32a147f-1f69-4fd5-8a39-c25b2a0093e8/tf67429532_wac-987650ec15fa.docx,D:/新建文件夹/87650ec15fa.docx);
// }public static String generateUniqueFileName(String originalFilename) {String fileExtension ; // 文件扩展名int i originalFilename.lastIndexOf(.);if (i 0) {fileExtension originalFilename.substring(i);}return UUID.randomUUID().toString() fileExtension; // 生成带有扩展名的唯一文件名}public static String extractFileName(String url) {// 检查url是否为空if (url null || url.isEmpty()) {return ;}// 查找最后一个斜杠的位置int lastIndex url.lastIndexOf(/);if (lastIndex -1) {return ; // 如果没有找到斜杠返回空字符串}// 从最后一个斜杠之后的位置开始提取子字符串return url.substring(lastIndex 1);}public static String replacePathAfterProfile(String url, String newPath) {if (url null || url.isEmpty()) {return url; // 或抛出异常取决于你的错误处理策略}// 找到profile后的第一个斜杠的索引int profileIndex url.indexOf(/profile);if (profileIndex -1) {return url; // 如果找不到profile返回原始URL}// 计算profile之后的部分开始的索引int startReplaceIndex profileIndex /profile.length();// 构造新的URLreturn url.substring(0, startReplaceIndex) newPath;} 参考文章
onlyofficevue实现在线预览在线编辑_onlyoffice vue-CSDN博客
SpringBoot集成onlyoffice实现word文档编辑保存-阿里云开发者社区
