(转)使用PageOffice实现文档(word,excel,pdf)在线预览编辑

转载自:https://blog.csdn.net/qq_29897369/article/details/78407111

 

首先自己需要安装PageOffice控件 目前最新版本是4.2 。下载地址是:http://www.zhuozhengsoft.com/dowm/ 其中包括实例代码。

1、安装完后需要给自己的项目添加pageoffice4.jar 和java 添加jar包没有区别。

2、启动的时候第一次使用试用版会弹出一个框,需要添加一些信息,有一个序列号在最后我写了。剩下 那个就是随便填写就可以。同时他会生成一个文件就是license.lic。他会在tomcat 项目部署的lib下。假如每次启动都需要添加的话。你就需要把tomcat 部署项目lib 里的license.lic 复制到你的本地项目中。

3、预览后台代码:

 
  1. public String openbar(HttpServletRequest request, HttpServletResponse response, @PathVariable int id,

  2. @PathVariable int flag) {

  3. // 设置PageOffice服务器组件

  4. PageOfficeCtrl poCtrl1 = new PageOfficeCtrl(request);

  5. request.setAttribute("poCtrl1", poCtrl1);

  6. poCtrl1.setServerPage(request.getContextPath() + "/poserver.zz"); // 此行必须

  7. poCtrl1.setTitlebar(false); // 隐藏标题栏(pageoffice的标题)

  8. poCtrl1.setMenubar(false); // 隐藏菜单栏(文件一个设置)

  9. poCtrl1.setOfficeToolbars(false);// 隐藏Office工具条(word 的编辑按钮)

  10. // poCtrl1.setCustomToolbar(false);// 隐藏自定义工具栏(保存 关闭 全屏)

  11. poCtrl1.addCustomToolButton("打印", "ShowPrintDlg()", 6);

  12. poCtrl1.addCustomToolButton("全屏切换", "SwitchFullScreen()", 4);

  13. poCtrl1.addCustomToolButton("关闭", "close", 21);

  14. List<FileMeta> entity = fileMetaService.getList(getEntity(flag, id));

  15. String path = ZipService.getPath(entity.get(0));

  16. String realpath = path.replace("/", "\\\\");

  17. String suffix = path.substring(path.lastIndexOf(".") + 1);

  18. if ("doc".equals(suffix) || "docx".equals(suffix)) {

  19. poCtrl1.webOpen(realpath, OpenModeType.docReadOnly, "张三");

  20. } else if ("xls".equals(suffix) || "xlsx".equals(suffix)) {

  21. poCtrl1.webOpen(realpath, OpenModeType.xlsReadOnly, "张三");

  22. }

  23. // 打开文件

  24. return "OpenWord";

  25. }


4'、在线编辑:

 
  1. /**

  2. * 在线编辑

  3. *

  4. * @param request

  5. * @param response

  6. * @param id

  7. * @param flag

  8. * @return

  9. */

  10. @RequestMapping("openword/{flag}/{id}")

  11. public String openword(HttpServletRequest request, HttpServletResponse response, @PathVariable int id,

  12. @PathVariable int flag) {

  13. PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);

  14. request.setAttribute("poCtrl", poCtrl);

  15. poCtrl.setTitlebar(false);

  16. // 设置服务页面

  17. poCtrl.setServerPage(request.getContextPath() + "/poserver.zz");

  18. // 添加保存按钮

  19. poCtrl.addCustomToolButton("保存并关闭", "Save", 1);

  20. poCtrl.addCustomToolButton("打印", "ShowPrintDlg()", 6);

  21. poCtrl.addCustomToolButton("全屏切换", "SwitchFullScreen()", 4);

  22. // 设置保存的action

  23. poCtrl.setSaveFilePage(request.getContextPath() + "/wep/savefile/" + flag);

  24. // 打开word

  25. List<FileMeta> entity = fileMetaService.getList(getEntity(flag, id));

  26. String path = ZipService.getPath(entity.get(0));

  27. String realpath = path.replace("/", "\\\\");

  28. String suffix = path.substring(path.lastIndexOf(".") + 1);

  29. if ("doc".equals(suffix) || "docx".equals(suffix)) {

  30. poCtrl.webOpen(realpath, OpenModeType.docNormalEdit, "张三");

  31. } else if ("xls".equals(suffix) || "xlsx".equals(suffix)) {

  32. poCtrl.webOpen(realpath, OpenModeType.xlsNormalEdit, "张三");

  33. }

  34. return "Word";

  35. }

 

5、在线编辑需要保存,所以有在线保存:

 
  1. /**

  2. * 保存

  3. *

  4. * @param request

  5. * @param response

  6. * @param flag

  7. */

  8. @RequestMapping("savefile/{flag}")

  9. public void savefile(HttpServletRequest request, HttpServletResponse response, @PathVariable int flag) {

  10. FileSaver fs = new FileSaver(request, response);

  11. if (flag == 1) {// hse 保存路径

  12. fs.saveToFile("D:\\Demo\\conhse\\" + fs.getFileName());

  13. } else if (flag == 2) {

  14. fs.saveToFile("D:\\Demo\\doc\\" + fs.getFileName());

  15. } else if (flag == 3) {

  16. fs.saveToFile("D:\\Demo\\hsequa\\" + fs.getFileName());

  17. } else if (flag == 4) {

  18. fs.saveToFile("D:\\Demo\\eva\\" + fs.getFileName());

  19. } else if (flag == 5) {

  20. fs.saveToFile("D:\\Demo\\leg\\" + fs.getFileName());

  21. } else if (flag == 6) {

  22. fs.saveToFile("D:\\Demo\\plan\\" + fs.getFileName());

  23. }

  24. fs.close();

  25. }

6、web-xml配置

 
  1. <!-- PageOffice Begin -->

  2. <servlet>

  3. <servlet-name>poserver</servlet-name>

  4. <servlet-class>com.zhuozhengsoft.pageoffice.poserver.Server</servlet-class>

  5. </servlet>

  6. <servlet-mapping>

  7. <servlet-name>poserver</servlet-name>

  8. <url-pattern>/poserver.zz</url-pattern>

  9. </servlet-mapping>

  10. <servlet-mapping>

  11. <servlet-name>poserver</servlet-name>

  12. <url-pattern>/sealsetup.exe</url-pattern>

  13. </servlet-mapping>

  14. <servlet-mapping>

  15. <servlet-name>poserver</servlet-name>

  16. <url-pattern>/posetup.exe</url-pattern>

  17. </servlet-mapping>

  18. <servlet-mapping>

  19. <servlet-name>poserver</servlet-name>

  20. <url-pattern>/pageoffice.js</url-pattern>

  21. </servlet-mapping>

  22. <servlet-mapping>

  23. <servlet-name>poserver</servlet-name>

  24. <url-pattern>/jquery.min.js</url-pattern>

  25. </servlet-mapping>

  26. <servlet-mapping>

  27. <servlet-name>poserver</servlet-name>

  28. <url-pattern>/pobstyle.css</url-pattern>

  29. </servlet-mapping>

  30. <servlet>

  31. <servlet-name>adminseal</servlet-name>

  32. <servlet-class>com.zhuozhengsoft.pageoffice.poserver.AdminSeal</servlet-class>

  33. </servlet>

  34. <servlet-mapping>

  35. <servlet-name>adminseal</servlet-name>

  36. <url-pattern>/adminseal.zz</url-pattern>

  37. </servlet-mapping>

  38. <servlet-mapping>

  39. <servlet-name>adminseal</servlet-name>

  40. <url-pattern>/loginseal.zz</url-pattern>

  41. </servlet-mapping>

  42. <servlet-mapping>

  43. <servlet-name>adminseal</servlet-name>

  44. <url-pattern>/sealimage.zz</url-pattern>

  45. </servlet-mapping>

  46. <mime-mapping>

  47. <extension>mht</extension>

  48. <mime-type>message/rfc822</mime-type>

  49. </mime-mapping>

  50. <context-param>

  51. <param-name>adminseal-password</param-name>

  52. <param-value>111111</param-value>

  53. </context-param>

  54. <!-- PageOffice End -->

7、jsp配置

 

 
  1. <%@ page language="java"

  2. import="java.util.*,com.zhuozhengsoft.pageoffice.*"

  3. pageEncoding="UTF-8"%>

  4. <%

  5. PageOfficeCtrl poCtrl = (PageOfficeCtrl) request.getAttribute("poCtrl");

  6. %>

  7.  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  9. <html>

  10. <head>

  11. <title>最简单的打开保存Word文件</title>

  12. <!-- <script type="text/javascript" >

  13. function getPageOfficeJsUrl(){var d=document.URL;var c=d.substring(0,find(d,"/",3)+1);var a=d.substring(0,find(d,"/",4)+1);var f=new Array();f[0]=c;f[1]=a;for(var b=0;b<f.length;b++){var e="pageoffice.js";ajax({url:f[b]+"/pageoffice.js",type:"GET",data:{name:"super"},dataType:"json",success:function(h,k){if(d.indexOf("?")>0){d=d.substring(0,d.indexOf("?"))}var g=countChar(d.substring(f[b].length),"/");for(var i=0;i<g;i++){e="../"+e}alert('src="'+e+'"')},fail:function(g){}})}}function countChar(d,e){var b=0;for(var a=0;a<d.length;a++){if(d.charAt(a)==e){b++}}return b}function find(e,b,c){var a=0;for(var d=0;d<c;d++){a=e.indexOf(b,a+1)}return a}getPageOfficeJsUrl();function ajax(a){a=a||{};a.type=(a.type||"GET").toUpperCase();a.dataType=a.dataType||"json";var c=formatParams(a.data);if(window.XMLHttpRequest){var b=new XMLHttpRequest()}else{var b=new ActiveXObject("Microsoft.XMLHTTP")}b.onreadystatechange=function(){if(b.readyState==4){var d=b.status;if(d>=200&&d<300){a.success&&a.success(b.responseText,b.responseXML)}else{a.fail&&a.fail(d)}}};if(a.type=="GET"){b.open("GET",a.url+"?"+c,false);b.send(null)}else{if(a.type=="POST"){b.open("POST",a.url,false);b.setRequestHeader("Content-Type","application/x-www-form-urlencoded");b.send(c)}}}function formatParams(c){var a=[];for(var b in c){a.push(encodeURIComponent(b)+"="+encodeURIComponent(c[b]))}a.push(("v="+Math.random()).replace(".",""));return a.join("&")};

  14. </script> -->

  15. <script type="text/javascript" src="../../../jquery.min.js"></script>

  16. <script type="text/javascript" src="../../../pageoffice.js" id="po_js_main"></script>

  17. </head>

  18. <body>

  19. <div style="width: 100%; height: 100%;">

  20. <%=poCtrl.getHtmlCode("PageOfficeCtrl1")%>

  21. </div>

  22. <script type="text/javascript">

  23. function Save() {

  24. document.getElementById("PageOfficeCtrl1").WebSave();

  25. POBrowser.closeWindow();//关闭POBrowser窗口

  26. }

  27. function ShowPrintDlg() {

  28. document.getElementById("PageOfficeCtrl1").ShowDialog(4); //打印对话框

  29. }

  30. function SwitchFullScreen() {//全屏

  31. document.getElementById("PageOfficeCtrl1").FullScreen = !document

  32. .getElementById("PageOfficeCtrl1").FullScreen;

  33. }

  34. </script>

  35. </body>

  36. </html>


注意:有时候jsp 和他的js 不在同一个目录, 这时候在jsp页面 使用<script type="text/javascript" >
function getPageOfficeJsUrl(){var d=document.URL;var c=d.substring(0,find(d,"/",3)+1);var a=d.substring(0,find(d,"/",4)+1);var f=new Array();f[0]=c;f[1]=a;for(var b=0;b<f.length;b++){var e="pageoffice.js";ajax({url:f[b]+"/pageoffice.js",type:"GET",data:{name:"super"},dataType:"json",success:function(h,k){if(d.indexOf("?")>0){d=d.substring(0,d.indexOf("?"))}var g=countChar(d.substring(f[b].length),"/");for(var i=0;i<g;i++){e="../"+e}alert('src="'+e+'"')},fail:function(g){}})}}function countChar(d,e){var b=0;for(var a=0;a<d.length;a++){if(d.charAt(a)==e){b++}}return b}function find(e,b,c){var a=0;for(var d=0;d<c;d++){a=e.indexOf(b,a+1)}return a}getPageOfficeJsUrl();function ajax(a){a=a||{};a.type=(a.type||"GET").toUpperCase();a.dataType=a.dataType||"json";var c=formatParams(a.data);if(window.XMLHttpRequest){var b=new XMLHttpRequest()}else{var b=new ActiveXObject("Microsoft.XMLHTTP")}b.onreadystatechange=function(){if(b.readyState==4){var d=b.status;if(d>=200&&d<300){a.success&&a.success(b.responseText,b.responseXML)}else{a.fail&&a.fail(d)}}};if(a.type=="GET"){b.open("GET",a.url+"?"+c,false);b.send(null)}else{if(a.type=="POST"){b.open("POST",a.url,false);b.setRequestHeader("Content-Type","application/x-www-form-urlencoded");b.send(c)}}}function formatParams(c){var a=[];for(var b in c){a.push(encodeURIComponent(b)+"="+encodeURIComponent(c[b]))}a.push(("v="+Math.random()).replace(".",""));return a.join("&")};
</script>

就可以输出你本页面pageoffice.js具体位置。

这就是简单的使用更详细具体需要去官网API看看。还有一些可以参考使用的,还有一些图标对应使用。

PageOffice V4.0 标准版试用序列号:5LB6J-1JIL-XE8X-AYY44
PageOffice V4.0 专业版试用序列号:I1I92-4M46-R6B2-E15TX
PageOffice V4.0 企业版试用序列号:I7TGD-71VV-FYD8-4NMYP

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue和Spring Boot是目前非常流行的前后端开发框架,可以用于开发各种Web应用。而PageOffice则是一款专业的Office文档在线编辑工具,支持多种格式的文档编辑,包括WordExcel、PPT等。 要实现Vue和Spring Boot集成PageOffice实现在线编辑Word功能,可以按照以下步骤进行: 1. 创建Vue项目并引入PageOffice插件:首先使用Vue CLI创建一个新的Vue项目,然后在项目中引入PageOffice插件,可以通过npm安装或直接在HTML中引入PageOffice的脚本文件。 2. 集成Spring Boot:创建一个Spring Boot项目,使用Maven或Gradle配置相关依赖,并设置好后端的路由和接口。 3. 后端接口:在Spring Boot项目中编写后端接口,用于接收前端传递的Word文档数据以及编辑保存的功能。可以使用Spring MVC来处理路由和参数解析,然后将文档数据传递给PageOffice进行编辑。 4. 前端页面:在Vue项目中创建一个用于展示和编辑Word文档的前端页面。通过Vue的组件方式,引入PageOffice使用其提供的API,在页面上展示Word文档并提供编辑功能。 5. 数据传输和保存:在前后端通过HTTP接口进行数据的传输,前端将编辑保存的文档数据发送到后端,后端将数据保存到数据库或文件系统中。 6. 页面展示:将编辑保存的文档从数据库或文件系统中取出,并在前端页面上进行展示,用户可以随时加载、编辑和保存文档。 综上所述,使用Vue和Spring Boot集成PageOffice进行在线编辑Word,需要前后端的配合,前端负责页面展示和编辑功能,后端负责接口的处理和数据的保存。这样就能够实现一个功能完善的在线编辑Word的应用。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值