springboot+pageoffice实现Word在线编辑

1、下载jar包

_卓正软件 - PageOffice官方网站 - 在线编辑Word、Excel的Office文档控件


在这里插入图片描述
在这里插入图片描述

2.将jar包打入maven仓库

mvn install:install-file -Dfile=D:\pageoffice4.5.0.3.jar -DgroupId=my.pageoffice -DartifactId=pageoffice -Dversion=1.0 -Dpackaging=jar 

3、添加依赖

<dependency>
	<groupId>my.pageoffice</groupId>
	<artifactId>pageoffice</artifactId>
	<version>1.0</version>
</dependency>
<dependency>
	<groupId>org.xerial</groupId>
	<artifactId>sqlite-jdbc</artifactId>
	<version>3.7.2</version>
</dependency>

4、获得licence.lic

 将Samples4放入tomcat,访问:http://localhost:8080/Samples4 ,可以看到如下:

 

 再往下拉,看到 

 

 随便点一个,会让注册,随便填,但注册码需要注意,要搜与jar版本匹配的或更高版本的,如果jar是4.0,注册码是2.0的最后打开pageoffice时就会提示你 

当前PAGEOFFICE需要获取更高版本的授权才能正常运行。(ERROR:0X0005) 

PageOffice V4.0 标准版试用序列号:IMTG6-BSXJ-JGZ6-3BIWM
PageOffice V4.0 专业版试用序列号:CA1XB-MF7Y-12ST-PSBP2 

注册完成后,可以在D:\apache-tomcat-8.5.43\webapps\Samples4\WEB-INF\lib看到licence.lic文件 

 

把这个licence.lic移动到一个位置,与6、中的 posyspath 一致 

5、整合 thymeleaf 

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

 6、 配置Bean

import com.zhuozhengsoft.pageoffice.poserver.Server;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.boot.web.servlet.ServletRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
 
/**
 * @Description :初始化Bean
 * ---------------------------------
 * @Author : SG.Y
 * @Date : 2019/5/9 15:40
 */
@Configuration
@ConfigurationProperties
public class BeanInitConf {
 
    // PageOffice配置
    private String posyspath ="d:/lic/";
 
    /***
     * PageOffice 注册
     * @return
     */
    @Bean
    public ServletRegistrationBean servletRegistrationBean() {
        Server poserver = new Server();
        //设置PageOffice注册成功后,license.lic文件存放的目录
        poserver.setSysPath(posyspath);
        ServletRegistrationBean srb = new ServletRegistrationBean(poserver);
        // 下面是把资源文件暴露出来,必须配置,否则页面访问不了
        srb.addUrlMappings("/poserver.zz", "/posetup.exe", "/pageoffice.js", "/jquery.min.js", "/pobstyle.css", "/sealsetup.exe");
        return srb;
    }
 
    public void setPosyspath(String posyspath) {
        this.posyspath = posyspath;
    }
 
}
 

 7、测试代码

注意里面的文档、licence.lic等路径 

package com.dxl.system.controller.wordonline;
 
import com.zhuozhengsoft.pageoffice.FileSaver;
import com.zhuozhengsoft.pageoffice.OpenModeType;
import com.zhuozhengsoft.pageoffice.PageOfficeCtrl;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;
 
/**
 * @Description :Office在线编辑、预览API
 * ---------------------------------
 * @Author : SG.Y
 * @Date : 2019/5/14 16:36
 */
@Controller
//@Api(value = "word",tags = {"word--接口"})
public class OfficeOnlineApi {
 
@GetMapping("/w")
public String showWord2(){
    return "ww";
}
    /**
     * 在线word文档编辑
     *
     * @param request
     * @param map
     * @return
     */
    @GetMapping("/word")
    public String showWord(HttpServletRequest request, Map<String, Object> map) {
        PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
        //设置授权程序servlet
        poCtrl.setServerPage("/poserver.zz");
        //添加自定义按钮
        poCtrl.addCustomToolButton("保存", "Save", 1);
        //保存按钮接口地址
        poCtrl.setSaveFilePage("/save");
        //打开文件(打开的文件类型由OpenModeType决定,docAdmin是一个word,并且是管理员权限,如果是xls文件,则使用openModeType.xls开头的,其他的office格式同等),最后一个参数是作者
        // TODO 这里有个坑,这里打开的文件是本地的,地址如果写成/结构的路径,页面就会找不到文件,会从http://xxxxx/G/id...去找,写成\\就是从本地找
        poCtrl.webOpen("d:\\test.docx", OpenModeType.docAdmin, "光哥");
        //pageoffice 是文件的变量,前端页面通过这个变量加载出文件
        map.put("pageoffice", poCtrl.getHtmlCode("PageOfficeCtrl1"));
        //跳转到word.html
        return "word";
    }
 
    /**
     * 在线ppt文档编辑
     *
     * @param request
     * @param map
     * @return
     */
    @GetMapping("/ppt")
    public String showPPT(HttpServletRequest request, Map<String, Object> map) {
        PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
        //设置授权程序servlet
        poCtrl.setServerPage("/poserver.zz");
        //添加自定义按钮
        poCtrl.addCustomToolButton("保存", "Save", 1);
        //保存接口地址
        poCtrl.setSaveFilePage("/save");
        //打开文件(打开的文件类型由OpenModeType决定,docAdmin是一个word,并且是管理员权限,如果是xls文件,则使用openModeType.xls开头的,其他的office格式同等),最后一个参数是作者
        // TODO 这里有个坑,这里打开的文件是本地的,地址如果写成/结构的路径,页面就会找不到文件,会从http://xxxxx/G/id...去找,写成\\就是从本地找
        poCtrl.webOpen("G:\\ideaProject\\springboot-demo\\online-office\\src\\main\\resources\\file\\test.pptx", OpenModeType.pptNormalEdit, "光哥");
        //pageoffice 是文件的变量,前端页面通过这个变量加载出文件
        map.put("pageoffice", poCtrl.getHtmlCode("PageOfficeCtrl1"));
        //跳转到word.html
        return "ppt";
    }
 
    /**
     * 保存文件接口
     *
     * @param request
     * @param response
     */
    @RequestMapping("/save")
    public void saveFile(HttpServletRequest request, HttpServletResponse response) {
        // 保存修改后的文件
        FileSaver fs = new FileSaver(request, response);
        fs.saveToFile("d:\\test.docx");
        fs.close();
    }
 
}
 

 8、templates中写html

word.html (注意:POBrowser.openWindowModeless第一个参数  路径) 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>在线编辑Office文件</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="pageoffice.js" id="po_js_main"></script>
</head>
<body>
<!--POBrowser打开一个窗口用来编辑文件-->
<a id="open_a" style="display: none;" onclick="javascript:POBrowser.openWindowModeless('/word','width=1200px;height=800px;');" href="#">打开文件</a>
<!-- 页面布局 -->
<div style="width:100%;height:900px; align-content: center" th:utext="${pageoffice}"></div>
<script type="text/javascript">
    function Save() {
        document.getElementById("PageOfficeCtrl1").WebSave();
    }
</script>
<script>
    $(function () {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
 
        // 获取浏览器类型
        function getType() {
            //判断是否chorme浏览器
            if (userAgent.indexOf("Chrome") > -1) {
                return "Chrome";
            }
            //判断是否IE浏览器
            if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                return "IE";
            }
 
            //判断是否Edge浏览器
            if (userAgent.indexOf("Trident") > -1) {
                return "Edge";
            }
        }
 
        // POBrowser打开一个窗口用来编辑文件
        function open() {
            $("#open_a").click();
        }
 
        // pageOffice有很多浏览器都不支持,不支持则使用POBrowser打开一个窗口用来编辑文件
        if (getType() != 'Edge') {
            // 延迟一秒在打开,是因为如果即时打开,可能有些文件请求还没加载好,会检测出客户端未安装pageOffice控件
            setTimeout(open, 1000)
        }
 
    });
</script>
</body>
</html>

 ww.html(后来又随便测试用谷歌、火狐打开pageoffice又增加的)可以自己定义所使用html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线编辑Office文件</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="pageoffice.js" id="po_js_main"></script>
</head>
<body>
<a id="ddddd" onclick="javascript:POBrowser.openWindowModeless('/word','width=1200px;height=800px;');" href="#") >POBrowser方式打开Word文档</a><br><br><br>
</body>
</html>

 

9、效果

 点击:(没安装时会提示下载安装)

 

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue和Spring Boot是目前非常流行的前后端开发框架,可以用于开发各种Web应用。而PageOffice则是一款专业的Office文档在线编辑工具,支持多种格式的文档编辑,包括Word、Excel、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的应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值