富贵资源网 Design By www.hznty.com
前端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=>{}); } } }
截图
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...