Vue预览world文档 -- docx-preview

1. 下载

npm i docx-preview --save

2. 页面引入

// 引入axios用来发请求
import axios from "axios";
// 引入预览插件
import { renderAsync } from "docx-preview";

3.页面元素

<template>
  <div>
    <el-button @click="downloadDOCX">下载</el-button>
    <el-button @click="goPreview">点击预览word文件</el-button>
   <!-- 预览文件的位置 -->
    <div class="docWrap">
      <div ref="file"></div>
    </div>
  </div>
</template>

4. 页面方法

export default {
  name: 'TransactionLog',
  components: {},
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    //下载
    downloadDOCX() {
      axios({
        method: 'POST',
        responseType: 'blob',
        url: `${process.env.VUE_APP_BASE_API}/rest/world/getNoticeLetterWord`,
        data: {'入参'},
      }).then(response => {
        let url = URL.createObjectURL(response.data);
          console.log(url);
          const a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          //download属性可以设置下载到本地时的文件名称,经测试并不需要加文件后缀
          a.setAttribute('download', '文件名.docx');
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          //释放内存
          URL.revokeObjectURL(url);

      }).catch( res => {})
    },
   
    // 预览
    goPreview() {
      // 需求需要先获取要预览的文件名称
      this.$http.post('文件名称查询API').then(res => {
        if(res && res.length) {
          this.worldFileList = res
          // 获取到后测试把[0]项传过去
          this.worldFileView(this.worldFileList[0])
        }
      }).catch(() => {})
    },
    worldFileView(val) {
      axios({
        method: 'POST',
        responseType: 'blob', // 注意预览的类型
        url: `${process.env.VUE_APP_BASE_API}请求地址拼接预览API`,
        Headers: { 'Content-Type': 'application/octet-stream' }, //请求头，看各自需求
        data: { fileName: val },  // 入参
      }).then(response => {
        // world 文档内容预览
        let bodyContainer = this.$refs.file
        // 配置
        renderAsync(
          // 预览的数据，拿到接口返回值，（具体看文件流在那个值下边，看数据层级）
          response.data, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
          bodyContainer, // HTMLElement 渲染文档内容的元素,
          null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
          this.docxOptions // 配置  暂时没配置  看自己需求配置
        )
      }).catch( res => {})
    }
  }
}
</script>