## web offfice纯预览 ### 1、微软官方Office Web Viewer查看器 Office Web Viewer ： **使用方法：** 预览前提：资源必须是公共可访问的 ``` 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 的宽高边框都是可配的，:width=宽的变量；:height=高的变量；:frameborder=边框的变量，no则是无边框** 这些格式之外的文件没有办法预览如RAR，ZIP，会直接提醒你下载，基本完成预览的需求 ### 3、pdf预览实现方法有很多，我这里只说一下基于VuePdf实现预览 ``` npm install --save vue-pdf import pdf from 'vue-pdf' ``` 其他方式，可参考： 1、 2、 3、 ### 4、kkFileView kkFileView为文件文档在线预览解决方案，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等官网链接: [kkFileView](https://kkfileview.keking.cn/zh-cn/index.html) 官网链接: [码云地址](https://gitee.com/kekingcn/file-online-preview) ### 5、其他... 只是做预览功能，实现方式有很多，就不一一举例了哈 ## 永中office 开发者平台：在线预览地址： **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/年价格可以参考： **私有化买断式：** 在线预览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 官网地址：去官网地址下载官方下载包，会得到一个压缩文件，解压后打开里面的js文件夹，获取其中两个重要文件：iWebOffice2015.js`和`WebOffice.js - `WebOffice.js`是WebOffice2015对象的一些方法。 - `iWebOffice2015.js`是根据不同的浏览器环境来渲染`

'; const webOfficeTpl = str export default webOfficeTpl ``` 4、vue中代码实现 ``` ``` 以上就是如何在vue中引入实现，很遗憾，到了最后一步打开文档的时候，调用打开文档的方法一直报错，搞不懂这个错，所以目前无法预览、编辑 ## WPS office ## 1、 wps在线版本 wps开放平台： JSSDK各种版本下载地址：官方使用JS-SDK步骤： **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、封装成全局组件 ``` ``` 4、在需要使用的页面进行引入 ``` import viewFilePreview from '@/components/view' ``` 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集成开发文档 JSAPI功能开发大全 JSAPI问题排查手册 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这个函数的返回值作为这个函数的参数 }, ```