使用插件:Spire.Cloud在线Office文档编辑器(官网:冰蓝科技在线编辑)
无需安装,在 index.html 里面引入即可
重点:支持在线创建、编辑、保存和打印 Office (Word / Excel / PPT) 文档
助您轻松实现高效率、无纸化办公
使用浏览器打开:https://cloud.e-iceblue.cn/,点击右上角头像注册/登录账号。
其次,点击菜单栏“我的应用”创建应用,获取APP ID和APP Key。
(个人理解:动态切换链接不刷新页面时显示不出来的,刷新页面才可以,错误是因为id为iframeEditor得div被替换成了ifarme,切换地址后找不到这个div,无法所以动态切换链接会报错)
xxxxxxxxx报告 xxxxxxxxxxxx报告 查询 //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})} //动态生成div updatdiv() {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显示还是旧的链接得问题!