vue项目在浏览器预览word文档

在项目中有时候会需要在浏览器端打开docx文件，一开始想这个功能很让人头疼，PDF文件在浏览器端很好实现预览，但是纯前端如何实现docx文件预览呢，想了一下决定用第三方库配合二进制下载来实现，这是最简单的方式，上代码！！！

第一步、下载依赖库vue-office/docx

//下载依赖库

npm i vue-office/docx

第二步、写一个二进制下载方法（如果文件路径不需要特殊处理的话不需要这一步，直接看第四步）

let base64 = require('js-base64').Base64;

export function download(option, filename, callBack) {

    const xhr = new XMLHttpRequest();

    xhr.open('get', option.url);

    var userName = window.wConfig.yjyaName//认证用户名

    var passwd = window.wConfig.yjyapasswd//认证密码

    var authorization = userName + ':' + passwd;

    var authorizationBase64 = base64.encode(authorization);//加密

    xhr.setRequestHeader("Authorization", "Basic " + authorizationBase64);//设置请求头

    xhr.responseType = 'blob';//设置响应类型为blob

    xhr.send();

    xhr.onload = function () {

        if (this.status === 200 || this.status === 304) {

            callBack(this.response);

        }

    };

}

第三步、需要二进制下载后的页面使用

<template>

  <vue-office-docx :src="docx" @rendered="rendered" />

</template>

<script>

//引入VueOfficeDocx组件

import VueOfficeDocx from '@vue-office/docx';

// 引入二进制下载方法

import { download } from '../utils/download';

export default {

  components: {

    VueOfficeDocx

  },

  data() {

    return {

      docx: null, //设置文档地址

    }

  },

  beforeRouteEnter(to, from, next) {

    next(vm => {

      vm.fileName = vm.$route.query.fileName;

    })

  },

  mounted() {

    let url = window.wConfig.postBaseUrl + this.fileName

        //二进制下载方法

    download({

      url: url

    }, this.fileName, (data) => {

      const blob = new Blob([data], {

        //docx的MIME的类型

        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",

      })

      this.url = URL.createObjectURL(blob);//二进制下载后的连接

      this.docx = this.url//不需要二进制下载文件的话直接把文件路径赋值就行

    })

  },

  methods: {

    rendered() {

      console.log("渲染完成")

    }

  }

}

</script>

第四步、不需要二进制下载的页面使用

<template>

  <vue-office-docx :src="docx" @rendered="rendered" />

</template>

<script>

//引入VueOfficeDocx组件

import VueOfficeDocx from '@vue-office/docx';

 

export default {

  components: {

    VueOfficeDocx

  },

  data() {

    return {

      docx: null, //设置文档地址

    }

  },

  mounted() {

      this.docx = "文件地址"

  },

  methods: {

    rendered() {

      console.log("渲染完成")

    }

  }

}

</script>

第五步、效果预览

这个功能就做好了 欢迎各位同学留言指正。