Word文档-实现在线浏览

---

前言

提示：这里可以添加本文要记录的大概内容：

实现Word在线浏览功能，不下载，但我认为本质还是下载，只不过不下载到本地电脑了。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、package.json

"dependencies": {
	 "@vue-office/docx": "^1.6.3",
	 "@vue/composition-api": "^1.7.2"
}

在package.json文件添加以上信息，并在控制台执行：pnpm install，进行安装

二、Vue和Js

1.xxx.vue文件中添加已下信息

<template slot-scope="scope">
  <div>
    <neu-modal
      :visible="showDocPreview"
      title="Word文档浏览"
      @close-modal="showDocPreview = false"
    >
      <vue-office-docx
        :src="docx"
        :options="{
          experimental: true,
          useMathMLPolyfill: true,
          useBase64URL: true
        }"
      />
    </neu-modal>
  </div>
</template>
<script>
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";

export default {
  data() {
    return {
      docx: null,
      showDocPreview: false // 控制word预览模态框
    };
  },
  components: { VueOfficeDocx},
  methods: {
    async openModal(docx) {
      this.docx = docx;
      this.showDocPreview = true;
    }
};
</script>

2.Operation.js

代码如下（示例）：

const downLoadUrl = "/base/upload/downLoadFile";
export default self => [
  {
    id: "spcas_file_download",
    label: "浏览Word",
    isShow: scope => {
      const attName = scope.row.attName;
      return attName && attName.toLowerCase().endsWith(".docx");
    },
    methods: async scope => {
      const params = {
        attUpldId: scope.row.attUpldId,
        attAddr: scope.row.attAddr,
        attName: scope.row.attName + ".docx"
      };
      // generateDownloadURL（详见“补充”）
      let docx = await Utils.Loader.generateDownloadURL(downLoadUrl, params);
      Utils.Tools.store.hideLoading();
      self.openModal(docx);
    }
  }
];

补充

以上用到的方法

  generateDownloadURL(_url, _params, _isFilterNull) {
    let url = _.cloneDeep(_url);
    let isFilterNull = _isFilterNull == undefined ? true : _isFilterNull;
    let params = _.cloneDeep(_params);
    if (params && isFilterNull) {
      params = this.filterNull(params);
    }
    let keys = _.keys(params);
    keys.forEach((key, index) => {
      if (index == 0) {
        url += "?";
      } else {
        url += "&";
      }
      let value = params[key];
      if (_.isArray(value)) {
        value = value.join(",");
      }
      url = url + key + "=" + encodeURIComponent(value);
    });
    return this.baseURL + this.blurCache(url);
  }