Vue+SpringBoot 集成 PageOffice 实现在线编辑Word、excel文档

2d592d24e248cca13856114520a21bdc.jpeg来源:blog.csdn.net/qq_44306545/article/details/127749139

👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/  赠书福利

全栈前后端分离博客项目 1.0 版本完结啦,2.0 正在更新中..., 演示链接http://116.62.199.48/ ,全程手摸手,后端 + 前端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,直到项目上线。目前已更新了183小节,累计29w+字,讲解图:1244张,还在持续爆肝中.. 后续还会上新更多项目,目标是将Java领域典型的项目都整一波,如秒杀系统, 在线商城, IM即时通讯,Spring Cloud Alibaba 等等,戳我加入学习,已有730+小伙伴加入(早鸟价超低)

6f1e4c0fe5c462d212364f24f3b5cfdc.gif

  • 说明

  • 一、环境要求

  • 二、前端项目

  • 三、后端项目

  • 四、最终效果


说明:

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页面

3b4dc7b9887e8104f7213cfb25546e1f.png

图片
POBrowser.openWindowModeless('SimpleWord/Word', 'width=1150px;height=900px;')

4.在Word.vue页面created中通过axios请求后台获取pageoffice控件(注意:后台返回string字符串,前端需要使用v-html解析)

这里给后台发请求的是axios,如果需要添加token可以在main.js中配置拦截器给请求添加token

6c13ac68642ab4a474c4ec057a51894e.png

图片

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请求都放出来)

ac41bbe02bb26dd537b11a7388ebf18d.png

图片

5a5ea45d770fec15f7e9221feb624449.png

图片
@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();
}

四、最终效果

b9ad87c77fe354322c1d8b36dd0704f8.png

图片

👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/  赠书福利

全栈前后端分离博客项目 1.0 版本完结啦,2.0 正在更新中..., 演示链接http://116.62.199.48/ ,全程手摸手,后端 + 前端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,直到项目上线。目前已更新了183小节,累计29w+字,讲解图:1244张,还在持续爆肝中.. 后续还会上新更多项目,目标是将Java领域典型的项目都整一波,如秒杀系统, 在线商城, IM即时通讯,Spring Cloud Alibaba 等等,戳我加入学习,已有730+小伙伴加入(早鸟价超低)

5597370d2ae4613c9d7ba482492bda85.gif

 
 

e9ad2ab4d27dd4c88d9f01ee67b310b8.jpegf80d95febef432f933611f40ab1a7e98.gif

 
 
 
 
 
 

1. 我的私密学习小圈子~

2. 写了个工具,让 CRUD 开发效率提升100倍,开源咯!

3. 项目终于上了这个数据单位转换工具类,金额转换太优雅了!

4. 工作中常用的 git 命令,收藏版!

8daf1c5be48cdc82977d2e2331ce3418.gif

最近面试BAT,整理一份面试资料《Java面试BATJ通关手册》,覆盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等等。
获取方式:点“在看”,关注公众号并回复 Java 领取,更多内容陆续奉上。
PS:因公众号平台更改了推送规则,如果不想错过内容,记得读完点一下“在看”,加个“星标”,这样每次新文章推送才会第一时间出现在你的订阅列表里。
点“在看”支持小哈呀,谢谢啦
VueSpring Boot是目前非常流行的前后端开发框架,可以用于开发各种Web应用。而PageOffice则是一款专业的Office文档在线编辑工具,支持多种格式的文档编辑,包括WordExcel、PPT等。 要实现VueSpring 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. 页面展示:将编辑保存的文档从数据库或文件系统中取出,并在前端页面上进行展示,用户可以随时加载、编辑和保存文档。 综上所述,使用VueSpring Boot集成PageOffice进行在线编辑Word,需要前后端的配合,前端负责页面展示和编辑功能,后端负责接口的处理和数据的保存。这样就能够实现一个功能完善的在线编辑Word的应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值