vue前端下载文件/docx-preview实现文件预览

一、文件下载

）：如果在下载过程中不需要其他骚操作的话’直接a标签’

<a :href="http://***文件下载地址" download="">下载</a>

二、文件预览

1.npm安装插件

）：此插件容易安装失败

npm i docx-preview
//此插件容易安装失败 安装了cnpm的小伙伴可使用
cnpm i docx-preview

2.public文件下index.html引入

<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

3.vue示例代码

<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 ({
	      method: 'get',
	      responseType: 'blob', 
	      url: 'http***文档下载路径',
	    }).then(({data}) => {
	      docx.renderAsync(data,this.$refs.file) // 渲染到页面
	      loading.close();//关闭loading
	    })
	  }
   }
}
</script>

---

总结

提示：博主只用到.docx后缀文件下载以及预览;其他格式请自行尝试。

另:pdf文件预览请移步—>vue-pdf插件简单使用