說明：
PageOffice是一款線上的office編輯軟體，幫助Web應用系統或Web網站實作使用者線上編輯Word、Excel、PowerPoint文檔。可以完美實作線上公文流轉，上司批閱，蓋章。可以給檔案添加水印，線上安全預覽防止使用者下載下傳和複制檔案等
一、環境要求
前端Vue項目：Node.js10及以上版本（目前內建方式不支援vue3，原因是vue3不相容ie。
vue3內建pageoffice參考這個連結：
https://blog.csdn.net/qq_44306545/article/details/127764411
後端Springboot項目：Intelij IDEA、jdk1.8及以上版本
二、前端項目
1.在index.html頁面引用後端項目（samples-springboot-back）根目錄下的pageoffice.js
<script type="text/javascript" src="http://localhost:8081/samples-springboot-back/pageoffice.js"></script>
2.在vue.config.js中配置代理
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081/samples-springboot-back', //"/api"對應後端項目"http://localhost:8081/samples-springboot-back"位址
ws: true,
changeOrigin: true, // 允許跨域
pathRewrite: {
'^/api': '' // 辨別替換，使用 '/api' 代替真實的接口位址
}
}
}
}
3.在index.vue頁面添加一個按鈕，通過點選事件調用POBrowser，第一個參數"SimpleWord/Word"是vue的路由。通過路由打開一個Word.vue頁面
POBrowser.openWindowModeless('SimpleWord/Word', 'width=1150px;height=900px;')
4.在Word.vue頁面created中通過axios請求背景擷取pageoffice控件（注意：背景傳回string字元串，前端需要使用v-html解析）
這裡給背景發請求的是axios，如果需要添加token可以在main.js中配置攔截器給請求添加token
Word.vue頁面，可以直接複制後修改url
<template>
<div class="Word">
<div style="height: 800px; width: auto" v-html="poHtmlCode" />
</div>
</template>
<script>
const axios = require("axios");
export default {
name: "Word",
data() {
return {
poHtmlCode: "",
};
},
created: function () {
axios
.post("/api/SimpleWord/Word")
.then((response) => {
this.poHtmlCode = response.data;
})
.catch(function (err) {
console.log(err);
});
},
methods: {
//控件中的一些常用方法都在這裡調用，比如儲存，列印等等
/**
* Save()方法是/api/SimpleWord/Word這個背景controller中PageOfficeCtrl控件通過poCtrl.addCustomToolButton定義的方法，除了儲存還有另存到本地、列印等功能。
*/
Save() {
document.getElementById("PageOfficeCtrl1").WebSave();
}
},
mounted: function () {
// 将PageOffice控件中的方法通過mounted挂載到window對象上，隻有挂載後才能被vue元件識别
window.Save = this.Save;
},
};
</script>
三、後端項目
1.在pom中添加pageoffice依賴
<dependency>
<groupId>com.zhuozhengsoft</groupId>
<artifactId>pageoffice</artifactId>
<version>5.4.0.3</version>
</dependency>
2.在啟動類中配置servlet bean，poSysPath是在properites中配置的磁盤路徑（注意：pageoffice的poserver.zz等這些請求不要攔截，get和post請求都放出來）
@Bean
public ServletRegistrationBean pageofficeRegistrationBean() {
com.zhuozhengsoft.pageoffice.poserver.Server poserver = new com.zhuozhengsoft.pageoffice.poserver.Server();
poserver.setSysPath(poSysPath);//設定PageOffice注冊成功後,license.lic檔案存放的目錄
ServletRegistrationBean srb = new ServletRegistrationBean(poserver);
srb.addUrlMappings("/poserver.zz");
srb.addUrlMappings("/posetup.exe");
srb.addUrlMappings("/pageoffice.js");
srb.addUrlMappings("/jquery.min.js");
srb.addUrlMappings("/pobstyle.css");
srb.addUrlMappings("/sealsetup.exe");
return srb;
}
3.打開檔案的controller（webopen第一個參數是目前檔案的磁盤路徑，磁盤路徑必須反向雙斜杠）。
setServerPage和setSaveFilePage中的api是前端代理，前後端分離項目必須配置代理
@RestController
@RequestMapping(value = "/SimpleWord")
public class SimpleWordController {
@RequestMapping(value="/Word")
public String showWord(HttpServletRequest request) {
PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
poCtrl.setServerPage("/api/poserver.zz");//設定服務頁面
poCtrl.addCustomToolButton("儲存", "Save", 1);
poCtrl.setSaveFilePage("/api/SimpleWord/save");//設定儲存方法的url
//打開word
poCtrl.webOpen("D:\\doc\\test.docx", OpenModeType.docNormalEdit, "張三");
return poCtrl.getHtmlCode("PageOfficeCtrl1");
}
@RequestMapping("save")
public void save(HttpServletRequest request, HttpServletResponse response) {
FileSaver fs = new FileSaver(request, response);
fs.saveToFile("D:\\doc\\" + fs.getFileName());
fs.close();
}
}
4.save儲存檔案
@RequestMapping("save")
public void save(HttpServletRequest request, HttpServletResponse response) {
FileSaver fs = new FileSaver(request, response);
fs.saveToFile("D:\\doc\\" + fs.getFileName());
fs.close();
}
四、最終效果