前端实现在线预览、编辑Office文档（vue版）

使用插件：Spire.Cloud在线Office文档编辑器（官网：冰蓝科技在线编辑）
无需安装，在 index.html 里面引入即可

重点：支持在线创建、编辑、保存和打印 Office (Word / Excel / PPT) 文档
助您轻松实现高效率、无纸化办公

使用浏览器打开：https://cloud.e-iceblue.cn/，点击右上角头像注册/登录账号。
其次，点击菜单栏“我的应用”创建应用，获取APP ID和APP Key。

（个人理解：动态切换链接不刷新页面时显示不出来的，刷新页面才可以，错误是因为id为iframeEditor得div被替换成了ifarme，切换地址后找不到这个div，无法所以动态切换链接会报错）

<div class="reportbox"><a-form :layout="formLayout"><a-form-item><a-select style="width: 180px" v-model="from.reportType"><a-select-option value="PeriodicAnalysis"> xxxxxxxxx报告 </a-select-option><a-select-option value="FoulingAssessment"> xxxxxxxxxxxx报告 </a-select-option></a-select></a-form-item><a-form-item :wrapper-col="{ span: 12, offset: 5 }"><a-button type="primary" @click="queryReport" style="width: 100px"> 查询 </a-button></a-form-item></a-form><div id="div" style="height: auto" >//div动态创建</div><div v-if="show" class="pdff"><a-empty /></div></div>

前端JavaScript代码实现

  generateWord() {var docEditorconst urlString = this.fileUrlconst appid = ' 你的appid 'const appkey = ' 你的appkey 'const innerAlert = function (message) {if (console && console.log) console.log(message)}const onReady = function () {innerAlert('Document editor ready')}const onDocumentStateChange = function (event) {const title = document.title.replace(/\*$/g, '')document.title = title + (event.data ? '*' : '')}const onError = function (event) {if (event) innerAlert(event.data)}function ajax(options) {options = options || {}const method = (options.type || 'GET').toUpperCase()let url = options.urllet queryString = nullif (!url) returnif (options.data) {queryString = []for (var attr in options.data) {queryString.push(attr + '=' + options.data[attr])}queryString = queryString.join('&')}if (method === 'GET' && queryString) {url += '?' + queryStringqueryString = ''}const xhr = new XMLHttpRequest()xhr.open(method, url, true)if (method === 'POST') xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.send(queryString)xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {var data = xhr.responseTextif (options.dataType === 'json') data = JSON.parse(data)options.success && options.success(data)} else {options.error && options.error(xhr.status)}}}}// 用于保存const callbackfn = function (result) {if (result && result.data) {const data = result.datalet fileName = data[0]const url = data[1]if (fileName.indexOf('=') > -1) fileName = fileName.split('=')[1]ajax({url: '',type: 'post',data: { filename: fileName, fileuri: url },dataType: 'json',async: false,success: function (json) {if (json.code == 200 || json.code == '200') {alert('保存成功')} else {this.error(json, '保存失败')}},error: function (json, msg) {alert(+msg)},})}}docEditor = new SpireCloudEditor.OpenApi('iframeEditor',{fileAttrs: {fileInfo: {name: this.fileName,  // this.fileName动态返回ext: 'docx',primary: String(new Date().getTime()),creator: '',createTime: new Date(),},sourceUrl: urlString,   // urlString动态返回createUrl: '',callbackUrl: '', This item can be empty, but only if the 'onSave' callback function must be defined in events. If the callback function is undefined and this item is empty, Cloud Editor will not provide save function.verification: null, //用户文件系统下载文件时若需要验证类似token的数据可以写在这里canEdit: true,canDownload: true,canForcesave: true,},user: {primary: '',name: '',canSave: true,customization: {public: {common: {whiteLabel: false,defaultZoom: 1,openReviewChanges: false,permGroups: ['everyone'], //限制编辑分组viewVersion: false,header: {hideTitle: false,defaultView: 'full',},},word: null, //doc定制powerpoint: null, //ppt定制excel: null, //xls定制},},},editorAttrs: {//编辑器配置editorWidth: '100%',editorHeight: '900px',editorType: 'document', //编辑器类型，可不配置，程序根据文件类型获取，结果为 document,presentation,spreadsheetplatform: 'desktop', //编辑器平台类型，可选desktop， mobile， embeddedviewLanguage: 'zh', //平台界面展示语言可选en/zhcanChat: true, //是否可聊天canComment: true, //是否可批注canReview: true,embedded: {saveUrl: '',embedUrl: '',shareUrl: '',},events: {onReady: onReady,onDocumentStateChange: onDocumentStateChange,onError: onError,onSave: callbackfn,},},},appid,appkey,)},queryReport（）{this.updatdiv() //  动态生成div 每次条件改变的时候清除div，搜索的时候创建新的div// axios请求 根据实际情况！apiUrl请求地址（我的项目请求地址是第三方）axios.get(apiUrl, {headers: {Authorization: 'Bearer ' + sessionStorage.token,},params: pam,}).then((res) => {// console.log(res)this.fileUrl = res.data.data.downloadUrlthis.fileName = res.data.data.fileNamethis.generateWord()  // 此处调用生成word}).catch((error) => {this.show = trueconsole.log(error)this.spinning = false})}//  动态生成divupdatdiv() {let div = document.querySelector('#div')var divChild = document.createElement('div') //一级var childDiv = document.createElement('div') // 二级childDiv.id = 'iframeEditor'divChild.appendChild(childDiv)div.innerHTML = ''div.appendChild(divChild)},

这样就解决了链接更改之后word显示还是旧的链接得问题！

前端实现在线预览、编辑Office文档（vue版）相关推荐

利用微软的Office Online在线预览播放Office文档，无工具栏
利用微软的Office Online在线预览播放Office文档通过微软的在线预览URL链接可以直接打开在线PPT文档如下 https://view.officeapps.live.com/op/v ...
在线预览doc,docx文档
在线预览doc,docx文档前言:上传成功以后的每个文档都能获取到所传文件的路径; 我这里是一个maven项目,需要在pom文件引入 <dependenc ...
wps在线预览接口_文档在线预览的实现
最近在研究企业文档管理,这个是基本上所有企业都需要的软件,当然也是有很多种解决方案.对于企业文档来说,最基本的需求就是独立存储,共享.这种需求只需要建立一个Windows共享文件夹或者架一个Samba ...
wps在线预览接口_WPS文档在线预览接入的一点心得
花了大半天时间接入WPS文档在线预览功能,还算比较顺利. 原来的OA系统一直用到文档在线预览功能,之前是用微软+officeweb365来实现的.一直感觉不太理想.昨天无意间见到金山WPS开放了在线文 ...
文档预览：在浏览器中预览查看 Office 文档
您的网站或博客上是否有希望读者查看的 Office 文档,即使他们没有安装 Office?您愿意在下载之前查看文档吗?要为您的观众提供更好的体验,请尝试使用 Office Web 查看器. 什么是 O ...
python爬虫读取pdf_python爬虫处理在线预览的pdf文档
引言最近在爬一个网站,然后爬到详情页的时候发现,目标内容是用pdf在线预览的比如如下网站: https://camelot-py.readthedocs.io/en/master/_static/ ...
WEB前端实现在线预览、编辑Office文档
这篇文章介绍如何在web前端引入JS插件实现在线预览.编辑Office文档. 使用插件:Spire.Cloud在线Office文档编辑器(官网:冰蓝科技在线编辑) 重点:该方案仅需浏览器支持HTML5 ...
前端页面预览word_前端实现在线预览文档
前端实现在线预览文档发布时间:2019-06-03 17:22, 浏览次数:529 <>前端实现在线预览文档最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式 ...
前端实现在线预览文档
前端实现在线预览文档最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式的文档,网上查找了很多资源,各说纷纭,但是在一一尝试之后只有使用微软的预览接口才能成功,其他的会出现各 ...
前端-Excel在线预览
前端-Excel在线预览最近项目中有一个 Excel 预览的需求,就调研了一下 xls/xlsx.word.ppt 文件在线预览功能的实现 . 实现 xls/xlsx.word.ppt 在线预览功能 ...

前端实现在线预览、编辑Office文档（vue版）

前端实现在线预览、编辑Office文档（vue版）相关推荐

最新文章

热门文章