vue在线预览word文件

1、预览word文件

1、安装插件

npm install --save mammoth

2、引入插件

import mammoth from "mammoth";

3、页面布局

<div id="wordView" v-html="vHtml"/></div>

4、在线预览word文件

data() {
  return {
    vHtml: "",
    wordURL:'' 
  };
},
created() {
  this.readExcelFromRemoteFile(this.wordURL);
}
methods：{
   // 在线查看word文件
    readExcelFromRemoteFile(url) {
      var _this = this;
      var xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = function () {
        if (xhr.status == 200) {
          mammoth
            .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
            .then(function (resultObject) {
              _this.$nextTick(() => {
                // document.querySelector("#wordView").innerHTML =
                //   resultObject.value;
                _this.vHtml = resultObject.value;
              });
            });
        }
      };
      xhr.send();
    },
}