vue使用ntko控件完成word上传、html上传

前言

新项目前端用的是vue框架，后端用的是struts1框架（没错，就是struts1）。客户要求增加word上传的功能，这个功能在以前老项目里面已经存在，只需将jsp改造成vue。实际上，在改造过程中遇到了很多问题，记录下。

步骤

1. ntko需要传递一些参数，我把它们写在props上，父组件使用时只需传递这些参数就可以了。

    props: {
   
      settings: {
   
        docId: '',  // 文档id，同时是文档名称
        docFolder: '',  // 文件夹名称,
        fileExt: '.doc', // 文件扩展名：默认为.doc，如果你只上传word文档，这个不用改
        width: '700',   // 控件宽度
        height: '500'  // 控件高度
      }
    }

2. ntko是activex控件来着，使用方式如下：

<!--
xxxx：根据自己的情况填写
:width：绑定宽度
:height：绑定高度
-->
<object id='TANGER_OCX' classid='clsid:xxxxxxxxxxxx'
        codebase='../../../../public/lib/ntko-office/OfficeControl.cab#version=5,0,4,1'
        :width='settings.width' :height='settings.height'>
  <param name='TitleBar' value='0'>
  <param name="NoExpireKey" value="xxxxxxxxxxxxxxxxxxxxx">
  <param name="MakerCaption" value="xxxxxxxxxxxxxxxxxxxxx">
  <param name="MakerKey" value="xxxxxxxxxxxxxxxxxxxxx">
  <param name="ProductCaption" value="xxxxxxxxxxxxxxxxxxxxx">
  <param name="ProductKey" value="xxxxxxxxxxxxxxxxxxxxx">
  <span style="color: red;display: inline-block">当前浏览器不能装载文档控件，
    请在检查浏览器的选项中检查浏览器的安全设置。</span>
</object>

3. ntko的操作api需要一个ntko对象，所以需要一个属性存储ntko对象

    data() {
   
      return {
   
        officeObj: null  // ntko对象
      }
    }

4. 初始化

      /**
       * 初始化文档控件，主要做以下操作：
       * 1. 封装ntko对象
       * 2. 判断docId是否为空，如果为空，则创建一个新的word文档；
       *     否则，根据docId去下载文档并显示出来
       */
      initDoc(){
   
        // 获取控件对象
        this.officeObj = document.getElementById("TANGER_OCX")

        if (this.officeObj == null) {
   
          return
        }
        if (this.settings.docId == null || this.settings.docId === '') {
   
          // 打开一个空白文档
          this.officeObj.CreateNew('Word.Document')
        } else {
   
          // 下载文档
          this.httpDownload()
        }
      }

5. 下载word文档：注意，这里下载的都是word文档，下载其他文档需要另作处理

      /**
       * 下载office控件
       */
      httpDownload() {
   
        let fileName = this.settings.docId + '.doc'

        let fileUrl = "/downloadOfficeOcx.do?fileName=" + fileName + "&docFolder=" + this.settings.docFolder
        return this.officeObj.OpenFromURL(fileUrl, false)
      }

6. 上传word文档

      /**
       * 上传word文档
       */
      httpUpload() {
   
        let myUrl = "/uploadOfficeOcx.do"
        let fileName = this.settings.docId + '.doc'

        let params = "docFolder=" + this.settings.docFolder

        /**
         * officeFile：文件域的id，类似<input type=file id=officeFile 中的id
         * params：参数
         * 0：与控件一起提交的表单id，也可以是form的序列号，这里应该是0
         */
        return this.officeObj.saveToURL(myUrl, "officeFile", params, fileName, 0)
      }

7. 上传html文档

      /**
       * doc转HTML：会先上传word文档，然后再转换为html，再上传html文档
       */
      saveDocAsHTML()  {
   
        //上传office文件
        this.httpUpload()