因为公司业务的需求,需要在线编辑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