VUE+Springboot
# VUE+Springboot
本文描述了在(VUE+Springboot)前后端分离的项目中,编写PageOffice关键代码的位置。本站所有的示例说明中都提供了一些关键代码, 这些关键代码需要需要放到哪里,请参考本文。
# 后端Springboot项目
调用PageOffice打开文件的Controller代码,例如DocumentController(您可以自己命名)代码如下:
@RestController
@RequestMapping(value = "/doc")
public class DocumentController {
/** 您在本网站所看到的所有例子的关键代码,其中创建PageOfficeCtrl对象的关键代码,放到如下代码位置处,
替换掉关键代码开始到结束之间的代码即可。
下面的action方法命名为openFile。只是为了方便表述,您可以根据自己需求定义,但是需要和vue前端
的axios.post("/api/doc/openFile").then((response) 地址保持一致。
*/
@RequestMapping(value="/openFile")
public String openFile(HttpServletRequest request) {
//---- 关键代码开始 ----
PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
// ......
//webOpen的第一个参数支持能够输出下载文件的Url相对地址或者文件在服务器上的磁盘路径两种方式
//查看详细,请在本站搜索“PageOffice属性或方法中涉及到的URL路径或磁盘路径的说明”
poCtrl.webOpen(......);
//---- 关键代码结束 ----
return poCtrl.getHtmlCode();//必须。
}
/** 如果您不需要保存提交PageOffice打开的office文件,也就是说你没有调用 poCtrl.setSaveFilePage(...);
就无需编写下面的action方法
您在本网站所看到的所有例子的关键代码,其中创建FileSaver对象的关键代码,放到如下代码位置处,
替换掉关键代码开始到结束之间的代码即可。
*/
@RequestMapping("/saveFile")
public void saveFile(HttpServletRequest request, HttpServletResponse response) {
//---- 关键代码开始 ----
FileSaver fs = new FileSaver(request, response);
// ......
fs.close();
//---- 关键代码结束 ----
}
/** 如果您不需要保存提交Word或Excel里用户输入的内容,也就是说你没有调用 poCtrl.setSaveDataPage(...);
就无需编写下面的action方法
您在本网站所看到的所有例子的关键代码,其中创建WordDocument或者Workbook对象的关键代码,放到如下代码位置处,
替换掉关键代码开始到结束之间的代码即可。
*/
@RequestMapping("/saveData")
public void saveData(HttpServletRequest request, HttpServletResponse response) {
//---- 关键代码开始 ----
WordDocument doc = new WordDocument(request, response);
// ......
doc.close();
//---- 关键代码结束 ----
}
}
# 前端Vue项目
调用PageOffice打开文件的Vue页面,例如:src/views/DocView.vue
注意
下面代码中的关闭按钮,只是演示一下添加自定义按钮的所需要编写的代码,您可以根据实际需要,添加其他的自定义按钮, 比如另存、打印、关闭等,或您的项目实际需要的其他按钮。
添加自定义按钮需要3步
- 在OnPageOfficeCtrlInit事件里调用
pageofficectrl.AddCustomToolButton("关闭", "Close()", 21);
- 在methods里编写Close()函数代码
- 在mounted里把Close函数挂接到window对象:
window.Close = this.Close;
<template>
<div class="doc">
演示: 文档<br/><br/>
<!-- 此div用来加载PageOffice客户端控件 -->
<div style="width:auto; height:700px;" v-html="poHtmlCode" ></div>
</div>
</template>
<script>
const axios=require('axios');
export default {
name: 'DocView',
data(){
return {
poHtmlCode: '',
}
},
created: function(){
// 请求后端项目打开文件的controller方法
axios.post("/api/doc/openFile").then((response) => {
this.poHtmlCode = response.data;
}).catch(function (err) {
console.log(err)
})
},
methods:{
// 控件中的一些常用方法都在这里调用,比如保存,打印等等
// Save() {
// pageofficectrl.WebSave();
// },
// SaveAs() {
// pageofficectrl.ShowDialog(2);
// },
// IsFullScreen() {
// pageofficectrl.FullScreen = !pageofficectrl.FullScreen;
// },
// PrintFile() {
// pageofficectrl.ShowDialog(4);
// },
Close() {
window.external.close();
},
// PageOffice事件回调函数
OnPageOfficeCtrlInit() {
// PageOffice的初始化事件回调函数,您可以在这里添加自定义按钮
// 您可以在这里添加自定义按钮,执行您自定义的js。比如添加保存、打印、另存、关闭等按钮
// pageofficectrl.AddCustomToolButton("保存", "Save()", 1);
// pageofficectrl.AddCustomToolButton("另存为", "SaveAs()", 11);
// pageofficectrl.AddCustomToolButton("打印", "PrintFile()", 6);
// pageofficectrl.AddCustomToolButton("全屏", "IsFullScreen()", 4);
pageofficectrl.AddCustomToolButton("关闭", "Close()", 21);
},
AfterDocumentOpened(){
// PageOffice的文档打开后事件回调函数
},
BeforeDocumentSaved() {
// PageOffice的文档保存前事件回调函数
},
AfterDocumentSaved() {
// PageOffice的文档保存后事件回调函数
}
},
mounted: function () {
// 将methods中的方法通过mounted挂载到window对象上
// window.Save = this.Save;
// window.SaveAs = this.SaveAs;
// window.PrintFile = this.PrintFile;
// window.IsFullScreen = this.IsFullScreen;
window.Close = this.Close;
// 以下的为PageOffice事件的回调函数,名称不能改,否则PageOffice控件调用不到
window.OnPageOfficeCtrlInit = this.OnPageOfficeCtrlInit;
window.AfterDocumentOpened = this.AfterDocumentOpened;
window.BeforeDocumentSaved = this.BeforeDocumentSaved;
window.AfterDocumentSaved = this.AfterDocumentSaved;
}
}
</script>
在您自己项目的前端页面里,例如是一个文档列表,有一列链接名为“编辑文档”,或者有一个“编辑文档”按钮,这个页面我们称之为父页面。在链接或按钮里就调用POBrowser的openWindow方法,弹出新浏览器窗口访问DocView.vue(看我们称之为子页面)在线打开文件,代码如下:
<a href="javascript:POBrowser.openWindow('/showDoc','width=1150px;height=900px;');">
编辑文档
</a>
上次更新: 2023/05/18, 16:16:54