vue+element+springboot前后端分离项目整合pageoffice实现在线编辑Word和Excel跟签章等

Amy_Victoria

已于 2022-05-17 19:12:46 修改

阅读量8.9k

点赞数 3

分类专栏： java springboot 文章标签： springboot java vue

于 2022-03-30 11:46:58 首次发布

本文链接：https://blog.csdn.net/Amy_Victoria/article/details/123841772

版权

因为公司业务的需求，需要在线编辑word等的功能。

这里只是为了讲解怎么整合，官网上还有很多更加复杂的功能可以根据自己的需求增加，应该都是大同小异

先展示下效果

先写一下重点，前端项目中只要实现下面两点就行了，功能页面都是放在后端的

（1）
<!-- 引用后端项目中的pageoffice.js文件跟jquery.min.js文件 -->
<!-- 后端的地址-->
<script type="text/javascript" src="http://localhost:8082/pageoffice.js"></script>
<script type="text/javascript" src="http://localhost:8082/jquery.min.js"></script>
（2）添加打开文档的js代码：
<!-- 后端的接口地址-->
 <a href="javascript:POBrowser.openWindowModeless('http://localhost:8082/pageoffice/word','width=1200px;height=800px;');">最简单的打开和保存</a>

前端部分

在前端项目的public文件夹下创建html文件，重点，一定要在public文件夹下创建html文件

test.html

<!DOCTYPE html>
<html>
    <head>
        <title>打开word文件</title>
        <script type="text/javascript" src="http://localhost:8082/pageoffice.js"></script>
        <script type="text/javascript" src="http://localhost:8082/jquery.min.js"></script>
    </head>
    <body>
        <a href="javascript:POBrowser.openWindowModeless('http://localhost:8082/pageoffice/word','width=1200px;height=800px;');" >最简单的打开和保存</a>
<!--http://localhost:8082/pageoffice/word  后端项目地址+接口地址-->
    </body>
</html>

因为vue里不能使用<script type="text/javascript" src="http://localhost:8082/pageoffice.js"></script>这种形式的引入后端的js文件，所以需要跳转到html页面去实现

vue页面（方法一）

<template>
  <div class="app-container">
    <a href="javascript:void(0)" @click="jumpOutsideLink(`${$publicURL}test.html`, '测试打开')">测试打开</a>
  </div>
</template>


<script>
import MyTable from '@/components/MyTable.vue';
import { getApiUrl, formateTimeStamp } from '@/utils/utils'
import { getToken } from '@/utils/auth'

exp

最低0.47元/天解锁文章

Amy_Victoria

关注

3
点赞
踩
27

收藏

觉得还不错? 一键收藏
15
评论
vue+element+springboot前后端分离项目整合pageoffice实现在线编辑Word和Excel跟签章等

vue+element+springboot前后端分离项目整合pageoffice实现在线编辑Word和Excel跟签章等
复制链接

扫一扫

专栏目录