vue前端下载文件/docx-preview实现文件预览
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插件简单使用
更多推荐
已为社区贡献2条内容
所有评论(0)