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服务与客户端通讯