web offfice纯预览
1、微软官方Office Web Viewer查看器
Office Web Viewer ： www.microsoft.com/en-us/micro…
使用方法：
预览前提：资源必须是公共可访问的
const Url = "xxxxx"
window.open(Url);
优点：
1.无需为 Web 转换 Office 文件（例如 PDF、HTML）。
2.任何人都可以从您的网站或博客查看 Office 文件，即使他们没有 Office。
3.它会密切关注您的网站或博客，因为读者不需要下载文件，他们会留在浏览器中。
4.一个链接适用于计算机、平板电脑和手机。
5.对于开发者来说极其方便，无需额外插件一个网址即可且免费。
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
注意：
虽然是微软官方，但毕竟互联网是开放的。如果为了安全，我个人认为一些保密的文件还是尽量不要采取这种方案，以下为官方提示。
Note: the needs to be URL encoded, and the document must be publicly accessible on the internet.
If your document is an Office document and is publicly accessible on the internet, then you are good to go. Office Web Viewer links are a great alternative to download links because your readers don’t need a special program to view your documents, and they don’t have the interruption of leaving their browser.
2、直接通过页面内嵌iframe（pdf特殊）
使用方法：
<iframe :src="previewUrl" width="100%" height="100%" frameborder="0"></iframe>
iframe 的宽高边框都是可配的，:width=宽的变量；:height=高的变量；:frameborder=边框的变量，no则是无边框
这些格式之外的文件没有办法预览如RAR，ZIP，会直接提醒你下载，基本完成预览的需求
3、pdf预览实现
方法有很多，我这里只说一下基于VuePdf实现预览
npm install --save vue-pdf
import pdf from 'vue-pdf'
<vue-pdf :src="previewUrl"></vue-pdf>
其他方式，可参考：
4、kkFileView
kkFileView为文件文档在线预览解决方案，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等
官网链接: kkFileView
官网链接: 码云地址
5、其他...
只是做预览功能，实现方式有很多，就不一一举例了哈
永中office
开发者平台：dev.yozocloud.cn/
在线预览地址：www.yozodcs.com/page/exampl…
web端支持以下功能：
① 支持在线显示、编辑、保存文档；
② 支持 Word 跟踪用户修改痕迹功能--修订
③ 支持 Word 红头文件制作-套红；
④ 支持 Word 插入公文域功能；
⑤ 支持 ppt 对象右侧展开旋转菜单功能；
⑥ 支持 Excel 的公式语法提示；
⑦ 支持 Word、Excel、ppt 的批注功能；
⑧ 支持只读方式显示 Word、Excel、PowerPoint 文档；
⑨ 支持部署 Web-Office 文档打开并发控制。
⑩ 支持 Win 操作系统、ios 系统、IE 浏览器/谷歌 Chrome/ 火狐 Firefox/搜狗/360 等全
合作方式有两种：按年付费的公有云和买断式的私有化部署
按年付费：
云预览3000/年 、9600/年
云编辑6480/年、10800/年、18000/年
价格可以参考：open.yozocloud.cn/price
私有化买断式：
在线预览9.98万
在线编辑20万
公有云：接口比较死版 所测即所得 不支持任何修改
优点：价格灵活
私有化：可二开 私有部署 安全和灵活
缺点：价格贵点
实现方式主要有js版本与java版本
永中office在线预览vue/js版本与java版本有一些区别，而核心思想还是没有变，也是需要上传文件到永中自己的服务器之后获取返回json体里面参数拼接url到永中自己的服务器实现在线预览，相对于java版来说只不过不需要自己模拟文件上传，并且vue/js版是用crypto-js加密库中sha256算法来获取签名。
js版本的实现：
1、在目录下先建一个signclient.js文件，主要是模拟签名的
2、使用的页面进行引入
//引入js
import signClient from "./sdk/signclient.js"
3、具体使用
/**
* 传入上传的文件
*/
handleChange(file){
let appId="yozobCmWHU365448";
let appKey="77d13e7d9b2c228ec3124664f714";
//获取sign签名信息
let sign=signClient(appKey,{"appId":[appId]});
//装载数据
this.fileData = new FormData();
this.fileList=[file];
this.fileData.append("file", file.file);
this.$axios.post( 'http://dmc.yozocloud.cn/api/file/upload?appId='+appId+'&sign='+sign, this.fileData).then(res => {
let da = res.data;
if(da.message==='操作成功'){
let fileVersionId=da.data.fileVersionId;
//重新获取sign
sign=signClient(appKey,{"appId":[appId],"fileVersionId":[fileVersionId]});
window.open("http://eic.yozocloud.cn/api/view/file?fileVersionId="+fileVersionId+"&appId="+appId+"&sign="+sign);
}else{
this.$message.warning("");
}
})
},
java版本思路：
后端部署好自己的服务，并且规定好前端上传文件后符合规范（文件id、文件名、文件地址等）的返回参数，前端拼接好数据之后直接调后端接口，返回的URL可直接用iframe进行展示，一定要符合永中的规范才行！！！
找了一点代码片段：
// java版本
openWordLink (type, mode, url) {
let officeData = JSON.parse(JSON.stringify(this.officeData))
officeData.method = type // 1打开 2保存 3关闭
officeData.params.userRight = mode // 1只读 0编辑
officeData.params.userId = this.userId //getRandIP()
officeData.params.fileId = "xxx"
officeData.params.fileName = "xxxS"
officeData.params.filePath = "xxx"
officeData.params.callbackUrl = officeData.params.callbackUrl + 1
officeData.params.saveFlag = true // 关闭文档要开启这个 保存
if (mode === 0) {
officeData.params.extraData = {
accessoryName: '测试',
according: '测试',
addressee: '测试',
copyToUnit: '测试',
documentIssueAgency: '测试',
documentNo: '测试',
documentTitle: '测试',
id: '测试',
issuanceDate: '2022-10-15 12:33:33',
autorDate: '2022-10-15 12:33:33',
lordSendUnit: '测试',
postShopName: '测试',
subjectTerm: '测试',
api: xx,
code: 'sjfw'
}
}
let data = {
jsonParams: encodeURIComponent(JSON.stringify(officeData))
}
this.$api.officalDocument.getOfficeData(data).then(res => {
console.log(res)
if (res.data.errorCode === '0') {
if (type === 1) {
this.src = res.data.result.urls
} else if (type === 3) {
this.src = ''
}
} else {
this.$notify.error({title: "提示", message: res.data.errorMessage});
}
});
}
金格office
主要基于：iWebOffice2015中间件实现
iWebOffice2015提供在线文档（doc、docx、xls、xlsx）阅读和编辑功能，当然还有其他功能（支持电子签章）
例子：vue项目集成金格WebOffice2015
官网地址：kinggrid.com/jinge_downl…
去官网地址下载官方下载包，会得到一个压缩文件，解压后打开里面的js文件夹，获取其中两个重要文件：iWebOffice2015.js和WebOffice.js
WebOffice.js是WebOffice2015对象的一些方法。
-
iWebOffice2015.js是根据不同的浏览器环境来渲染<object>
vue项目具体实现
1、将iWebOffice2015.js和WebOffice.js放入static目录下
2、在public文件夹index.html中引入WebOffice.js
<!--引入weboffice-->
<script type="text/javascript" src="../static/webOffice/WebOffice.js"></script>
注意：以上方式引入webOffice，是实例化对象时无法找到实例化方法WebOffice2015，不知道为什么。。。
改用cdn方式的方式引入，可以正常实例化：
<script src="<%= BASE_URL %>cdn/kgoffice/WebOffice.js" charset="utf-8"></script>
3、官方下载的iWebOffice2015.js有问题，几个地方需要修改：
- 官网
iWebOffice2015.js源文件在下面截图处少了一个闭合标签
- 由于异步加载不允许使用
document.write方法，这里注释掉document.write(str)
-
在iWebOffice2015.js末尾将拼接好的字符串暴露出来
str += '>';
// document.write(str);
str += '</object>';
const webOfficeTpl = str
export default webOfficeTpl
4、vue中代码实现
<template>
<div>
<a-card>
<div class="header">
<a-upload
v-model="fileList"
name="file"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<a-button type="primary">点我上传</a-button>
</a-upload>
<a-input v-model="url" style="width: 500px" placeholder="url1" class="marL20 dibVat" />
</div>
<div style="marginTop:15px">
<a-button type="primary" @click="openWordLink('0')" style="marginRight:10px">打开文档（只读）</a-button>
<a-button type="primary" @click="openWordLink('2')" style="marginRight:10px">打开文档（编辑）</a-button>
<a-button type="primary" @click="saveOfficeFile" style="marginRight:10px">保存文档</a-button>
<a-button type="primary" @click="closeOffice" style="marginRight:10px">关闭文档</a-button>
</div>
</a-card>
<div style="height: 900px; width: 100%; border: 0;box-sizing: border-box;margin-top: 30px">
<div id="office"></div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import webOfficeTpl from '../../../../static/webOffice/iWebOffice2015.js';
export default {
name: 'KgTest',
data() {
return {
url:'http://192.168.1.170:9000/lecent-property/upload/20221011/09ba09398c55cc794d8e2207736156e2.docx',
curIndex: null,
webOffice: null,
webOfficeObj: null,
userName:'zqs'
};
},
mounted() {
console.log(webOfficeTpl);
this.$nextTick(() => {
this.initWebOffice();
this.initWebOfficeObject();
})
},
methods: {
/**
* 初始化金格
* initWebOffice通过创建vue实例手动挂载来渲染<object>，将刚才暴露出来的<object>加载到office
*/
initWebOffice() {
this.webOffice = new Vue({
template: webOfficeTpl
}).$mount('#office');
},
/**
* 创建对象
* initWebOfficeObject中的关键点是this.webOfficeObj.CreateFile()，创建一个空白的文档
*/
initWebOfficeObject() {
this.webOfficeObj = new WebOffice2015();
console.log(this.webOfficeObj,88888888888888888);
this.webOfficeObj = new WebOffice2015();
this.webOfficeObj.setObj(document.getElementById('WebOffice'));
try{
//this.webOfficeObj.ServerUrl = "http://www.kinggrid.com:8080/iWebOffice2015/OfficeServer";
//this.webOfficeObj.RecordID = "1551950618511"; //RecordID:本文档记录编号
this.webOfficeObj.UserName = "XXX";
this.webOfficeObj.FileName = "Mytemplate.doc";
this.webOfficeObj.FileType = ".doc"; //FileType:文档类型 .doc .xls
this.webOfficeObj.ShowWindow = false; //显示/隐藏进度条
this.webOfficeObj.EditType = "1"; //设置加载文档类型 0 锁定文档，1无痕迹模式，2带痕迹模式
this.webOfficeObj.ShowMenu = 1;
this.webOfficeObj.ShowToolBar = 0;
this.webOfficeObj.SetCaption(this.webOfficeObj.UserName + "正在编辑文档"); // 设置控件标题栏标题文本信息
//参数顺序依次为：控件标题栏颜色、自定义菜单开始颜色、自定义工具栏按钮开始颜色、自定义工具栏按钮结束颜色、
//自定义工具栏按钮边框颜色、自定义工具栏开始颜色、控件标题栏文本颜色（默认值为：0x000000）
if (!this.webOfficeObj.WebSetSkin(0xdbdbdb, 0xeaeaea, 0xeaeaea, 0xdbdbdb, 0xdbdbdb, 0xdbdbdb, 0x000000)) {
alert(this.webOfficeObj.Status);
} //设置控件皮肤
if(this.webOfficeObj.WebOpen()) {
// StatusMsg(WebOfficeObj.Status);
}
this.webOfficeObj.AppendMenu("1","打开本地文件(&L)");
this.webOfficeObj.AppendMenu("2","保存本地文件(&S)");
this.webOfficeObj.AppendMenu("3","-");
this.webOfficeObj.AppendMenu("4","打印预览(&C)");
this.webOfficeObj.AppendMenu("5","退出打印预览(&E)");
this.webOfficeObj.AddCustomMenu();
this.webOfficeObj.HookEnabled();
this.webOfficeObj.CreateFile() // 根据FileType设置的扩展名来创建对应的空白文档
}
catch(e){
console.log("catch");
console.log(e.description);
}
},
/**
* 打开编辑器
*/
openWordLink(EditType) {
// this.closeOffice();
this.webOfficeObj.ShowMenu = 0;
this.webOfficeObj.ShowToolBar = 0;
this.webOfficeObj.EditType = EditType; //设置加载文档类型 0 锁定文档，1无痕迹模式，2带痕迹模式
this.webOfficeObj.WebOpen2(this.url)
/* try {
if(this.webOfficeObj.WebOpen2(this.url)){
console.log("来了");
console.log(this.webOfficeObj.Status);
}
}
catch(e){
console.log("来了2");
console.log(e.description);
} */
},
/**
* 保存
*/
saveOfficeFile() {
let fileId = "xxx";
this.webOfficeObj.ServerUrl = "xxx"; //保存文档地址
if(this.webOfficeObj.WebSave()) {
alert(this.webOfficeObj.Status)
}
},
/**
* 关闭
*/
closeOffice() {
this.webOfficeObj.WebClose();
},
},
};
</script>
以上就是如何在vue中引入实现，很遗憾，到了最后一步打开文档的时候，调用打开文档的方法一直报错，搞不懂这个错，所以目前无法预览、编辑
WPS office
1、 wps在线版本
wps开放平台：open.wps.cn/developer/k…
JSSDK各种版本下载地址：wwo.wps.cn/docs/update…
官方使用JS-SDK步骤：wwo.wps.cn/docs/front-…
vue中使用js-sdk例子：
1、将官网下载的js-sdk放入项目static文件夹下，我这里使用的是js-sdk ES6版本
2、在main.js文件中全局引入
import * as WPS from '../static/jwps.es6'
Vue.prototype.wps = WPS;
3、封装成全局组件
<template>
<div id="viewFile"></div>
</template>
<script>
export default {
props:['wpsUrl','token'],
data(){
return{
// 是否开启简易模式
simpleMode:false
}
},
mounted(){
this.openWps(this.wpsUrl,this.token);
},
methods:{
openWps(url, token) {
let _this = this;
const wps = _this.wps.config({
mode: _this.simpleMode?'simple':'normal',
mount: document.querySelector('#popContainer'),
wpsUrl: url,
commonOptions: {
// isShowTopArea: false, // 隐藏顶部区域(头部和工具栏)
// isShowHeader: false, // 隐藏头部区域,
isShowbottomArea: true
},
});
wps.setToken({token});
let app = wps.Application;
console.log(JSON.stringify(app))
}
}
}
</script>
4、在需要使用的页面进行引入
import viewFilePreview from '@/components/view'
<view-file-preview :wpsUrl="jwpsUrl" :token="jtoken"/>
5、在相关的页面进行调用，主要要用到wpsUrl、token，这里需要后端配合拿到真实的数据，我这里的数据只是用于展示效果
// 跳转 使用sessionStorage，避免关键信息在ip中暴露
// 使用push会停留当前页面
sessionStorage.wpsUrl = xxx
sessionStorage.token = "xxx"
const jump = this.$router.resolve({name: '封装的页面'});
window.open(jump.href,'_blank');
2、调用本机wps软件（没搞出来。。。）
重要文档：
JSAPI集成开发文档 kdocs.cn/l/srARJ5L8C…
JSAPI功能开发大全 kdocs.cn/l/sf9SgVEjP…
JSAPI问题排查手册 kdocs.cn/l/sutxB6E8C…
Vue集成开发步骤：
1、下载相关的sdk放入项目中
注意：这里有个坑，从官方下载的sdk中的wps_sdk在自动安装加载项时无法使用，需要重新下载新版的wpsjsrpcsdk.js(新名字)
2、项目中进行引用
import installWpsAddin from "./sdk/wps_reload";
import _WpsInvoke from "./sdk/wps";
3、打开页面时首先去加载wps并进行连接
created() {
if (!window.WpsInvoke) {
//连接wps并进行通信
require('@/pages/web-office/wps-localhost/sdk/wpsjsrpcsdk.js');
installWpsAddin()
}
},
4、打开测试文件
/**
* 打开文件
*/
openFile() {
let invokeParam = {
flag: "openOfficeFile",
filepath: 'http://localhost:8080/download/wps技术文档.docx'
} //根据需求任意定义
console.log('invokeParam:' + JSON.stringify(invokeParam))
_WpsInvoke.InvokeAsHttp(
projInfo.type, //wps加载项的类型，有WpsInvoke.ClientType.wps，WpsInvoke.ClientType.et， WpsInvoke.ClientType.wpp3种类型
projInfo.name, //wps加载项的名字，在实际项目中写上对应的名字
"openOfficeFileFromSystemDemo", //要调用的在wps加载项中的函数名
JSON.stringify(invokeParam), //调用的在wps加载项中的函数要传递的数据，是一个json对象，根据业务系统需求任意定义
function () {
}) //回调函数，wps加载项中InvokeFromSystemDemo这个函数的返回值作为这个函数的参数
},
