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文件预览请移步
上一篇:
Java架构师技术进阶路线图
下一篇:
go 简单的RPC服务与客户端通讯
