Vue组件中实现文件预览

1.npm 安装 docx-preview

npm i docx-preview

2.在Vue组件中使用docx-preview插件

<template>
  <div>
    <div ref="file"></div>
  </div>
</template>

<script>
import Axios from "axios";
import { Loading } from "element-ui";
let docx = require('docx-preview');
let loading;
export default {
  created() {
    loading = Loading.service({ //开始loading加载动画
      lock: true,
      text: "报告文件加载中...",
      background: "rgba(0, 0, 0, 0)",
    });
    this.getPdfCode ()
  },
  
  methods: {
	  getPdfCode () {
	    Axios.get('文档下载路径',{
	      responseType: 'blob'
	    }).then(({data}) => {
	      docx.renderAsync(data,this.$refs.file) // 渲染到页面
	      loading.close();//关闭loading
	    })
	  }
   }
}
</script>

3.移动端调整文档div的宽度

docx-preview 默认是按PC端预览的，移动端的宽度不够，超出部分无法显示，可以手动设置文档div的宽度 在700px左右，这样就实现了移动端预览Word文件