时间:2021-05-26
前端VUE页面上的导出或者下载功能,一般是调用后端的一个接口,由接口生成excel,word这些文件的流信息,返回给vue,然后由vue去构建下载的动作,这边整理了一下,封装了一下,方便以后复用。
封装一个download文件
使用年月日时分秒毫秒做为文件的名称,下载为excel文件
/** * 下载文件 */export const downloadFile = (url,ext, params) => { let accessToken = getStore('accessToken'); return axios({ method: 'get', url: `${base}${url}`, params: params, headers: { 'accessToken': accessToken }, responseType: 'blob', //二进制流 }).then(res => { // 处理返回的文件流 const content = res; const blob = new Blob([content], { type: 'application/vnd.ms-excel;charset=utf-8' }); var date = new Date().getFullYear() + "" + (new Date().getMonth() + 1) + "" + new Date().getDate() + "" + new Date().getHours() + "" + new Date().getMinutes() + "" + new Date().getSeconds() + "" + new Date().getMilliseconds(); const fileName = date + "." + ext; if ("download" in document.createElement("a")) { // 非IE下载 const elink = document.createElement("a"); elink.download = fileName; elink.style.display = "none"; elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href); // 释放URL 对象 document.body.removeChild(elink); } else { // IE10+下载 navigator.msSaveBlob(blob, fileName); } });};为具体功能封装一个组件,方便在前台调用
// 评价导出export const getRecordExport= (params) => { return downloadFile('/record/export',"xlsx", params)}vue页面上调用它,实现导出
<script>import { getReportExport} from "@/api/index";import util from "@/libs/util.js";export default { name: "task-manage", data() {}, methods: { exportExcel() { getReportExport(this.searchForm).then(res=>{}); } }}截图
到此这篇关于vue使用axios实现excel文件下载的功能的文章就介绍到这了,更多相关vue实现excel文件下载内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了vue+axios实现post文件下载的具体代码,供大家参考,具体内容如下功能:点击导出按钮,提交请求,下载excel文件;这里是axios
需求点击导出下载表格对应的excel文件在vue项目中,使用的axios,后台java提供的post接口api实现第一步,在axios请求中加入参数,表示接收的
需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件实现:axios(ajax类似)主要代码:axios:设置返回数据格式为blob或者ar
1.通过axios实现数据请求vue.js默认没有提供ajax功能的。所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互。注
通过浏览器直接访问导出接口就会自动下载创建好的Excel表格。但是我们在vue里使用axios请求接口,一般是处理json数据,如果要处理文件流数据,需要做下特