VUE集成Office插件NTKO

使用NTKO插件

这玩意能不用就别用，因为它是插件，局限性比较大，在无法预知的用户环境上，各种问题。。。 但是在安全上做的比较好，不会在用户本地缓存临时文件等，都是在内存中操作，然后流传输，，，over 

浏览器判断

computed: { browser() { const userAgent = navigator.userAgent const rMsie = /(msie\s|trident.*rv:)([\w.]+)/ const rFirefox = /(firefox)\/([\w.]+)/ const rOpera = /(opera).+version\/([\w.]+)/ const rChrome = /(chrome)\/([\w.]+)/ const rSafari = /version\/([\w.]+).*(safari)/ const uaMatch = (ua) => { let match = rMsie.exec(ua) if (match != null) { return { browser: 'IE', version: match[2] || '0' } } match = rFirefox.exec(ua) if (match != null) { return { browser: match[1] || '', version: match[2] || '0' } } match = rOpera.exec(ua) if (match != null) { return { browser: match[1] || '', version: match[2] || '0' } } match = rChrome.exec(ua) if (match != null) { return { browser: match[1] || '', version: match[2] || '0' } } match = rSafari.exec(ua) if (match != null) { return { browser: match[2] || '', version: match[1] || '0' } } if (match != null) { return { browser: '', version: '0' } } } return uaMatch(userAgent.toLowerCase()) } } 

DOM

classid,codebase这些是在ntko插件包里面有的，放在data里面就行

async initWebDomOffice() { const browser = this.browser.browser let domStr = '' this.initOfficeSetting(domStr) } 

初始化

initOfficeSetting(domStr) { if (this.isView) { return this.viewFileOnline(this.routerParams.attId, this.routerParams.source) } // 该控件只支持office类的文档，这里就是一个控制 if (!this.attInfo['attType'] || this.openTypes.indexOf(this.attInfo['attType'].toLowerCase()) < 0) { return this.setNotSupportAtt(`暂不支持非Office文档在线编辑！当前附件格式为：${this.attInfo['attType']}`) } document.getElementById('ntko').innerHTML += domStr this.$nextTick(() => { const TANGER_OCX = document.getElementById('TANGER_OCX') TANGER_OCX.FileSave = false TANGER_OCX.FileNew = false TANGER_OCX.FileOpen = false TANGER_OCX.FileSaveAs = false TANGER_OCX.FilePageSetup = false TANGER_OCX.FilePrint = false // 打印 TANGER_OCX.FilePrintPreview = false // 打印预览 TANGER_OCX.Caption = this.attInfo['fileName'] if (this.isView) { // TANGER_OCX.IsNoCopy = true TANGER_OCX.TitleBar = false // 是否显示标题栏 TANGER_OCX.RibbonBars = false // 是否显示OFFICE功能区 TANGER_OCX.ToolBars = false // 是否显示工具栏 TANGER_OCX.IsResetToolbarsOnOpen = false // 是否在打开文档之后重置工具栏为常用模式 TANGER_OCX.CustomToolBar = false // 自定义工具栏 TANGER_OCX.Menubar = false // 是否显示菜单栏 TANGER_OCX.IsShowToolMenu = false // 工具菜单 TANGER_OCX.IsShowHelpMenu = false // 帮助菜单 TANGER_OCX.IsShowInsertMenu = false // 插入菜单 TANGER_OCX.IsShowEditMenu = false // 编辑菜单 TANGER_OCX.FilePageSetup = false // 文件菜单的页面设置项 TANGER_OCX.FileProperties = false // 文件菜单的属性项 TANGER_OCX.IsEnableDoubleClickFSM = false // 是否允许双击切换全屏 } // pdf 是需要单独处理的 try { if (this.attInfo['attType'].toLowerCase() === '.pdf') { if (this.isWin64) { TANGER_OCX.AddDocTypePlugin('.pdf', 'PDF.NtkoDocument', '4.0.2.0', '/ntko/ntkooledocallx64.cab', 51, true) } else { TANGER_OCX.AddDocTypePlugin('.pdf', 'PDF.NtkoDocument', '4.0.2.0', '/ntko/ntkooledocall.cab', 51, true) } } // AddHTTPHeader只针对IE浏览器生效，这里的请求后端做了不验证header TANGER_OCX.AddHTTPHeader('Authorization:' + this.$cookie.get('token')) TANGER_OCX.IsShowOpeningDocUI = false // 后端返回文件流就行 TANGER_OCX.BeginOpenFromURL(`/storeApi/ntko/view?id=${this.routerParams.attId}`, true, false) } catch (e) { console.log('加载NTKO发生错误，请检查是否安装！') } }) } 

事件

触发

不管是ie浏览器还是其他浏览器，都需要找到入口的html文件，一般都是index.html，写触发事件方法

然后回到vue的文件中

initDefaultDomFunction() { document.getElementById('ntko').onDocumentOpened = () => { // todo } // 0 新建 1 打开 2 关闭 3 保存 document.getElementById('ntko').onFileCommand = (type) => { // todo } document.getElementById('ntko').onDocumentClosed = () => { // todo } document.getElementById('ntko').onSaveToURL = (code, res) => { // todo } } 

有个比较坑的点 saveToURL

这个方法的返回值，在IE中是同步返回的，但是其他浏览器需要添加个回调方法，就是上面的 OnSaveToURL

const result = TANGER_OCX.saveToURL('/storeApi/ntko/save', 'upLoadFile', 'fileName', 0, false) if (this.browser.browser === 'IE') { if (!result) { return TANGER_OCX.ShowTipMessage('提示', '附件保存失败！') } document.getElementById('ntko').onSaveToURL(0, result) } 

跳转到

if (this.attInfo['fileType'].toLowerCase() === '.pdf') { TANGER_OCX.ActiveDocument.GotoPage(5) } else { TANGER_OCX.ActiveDocument.Application.selection.Goto(1, 1, 5) } 

设置只读，ppt无法设置只读模式

try { if (['.doc', '.docx'].indexOf(this.attInfo['attType'].toLowerCase()) > -1) { TANGER_OCX.ActiveDocument.Protect(3, false) } else if (['.xls', '.xlsx'].indexOf(this.attInfo['attType'].toLowerCase()) > -1) { TANGER_OCX.ActiveDocument.Application.ActiveWorkbook.Protect('', true) TANGER_OCX.ActiveDocument.Application.ActiveSheet.Protect('', true, true, true) } else { TANGER_OCX.SetReadOnly(true) } } catch (error) { console.log('文档进入只读模式失败！', error) } 

设置修订模式

TANGER_OCX.ActiveDocument.TrackRevisions = true // 控制是否进入修订模式 TANGER_OCX.ActiveDocument.ShowRevisions = true // 设置是否显示痕迹 TANGER_OCX.ActiveDocument.Application.ActiveWindow.View.ShowRevisionsAndComments = true TANGER_OCX.ActiveDocument.Application.ActiveWindow.View.RevisionsView = 0 

NTKO自带浏览器

这个其实就是IE浏览器，但是它实现了自己的一些东西，比较方便，但是测试贼蛋疼，没有F12，而且对vue框架不太好，因为IE嘛，你知道的，低版本就凉了。。。

const ntkoBrowser = require('@/utils/ntkobackground.min.js').ntkoBrowser const ntkoed = ntkoBrowser.ExtensionInstalled() if (!ntkoed) { ntkoBrowser.openWindow(`/file#/ntko/${params.attId}`) } else { return this.$notify.info('sorry！') } 

不过它里面有用到postMessage，这个挺好的，如果新打开一个窗口，操作后关闭该窗口，刷新原窗口数据，咱也可以用这个

window.opener.postMessage({ type: 'ntko_save_success' }) window.addEventListener('message', ({ data }) => { if (data && data.type === 'ntko_save_success') { // todo } }, false)