vue axios 导出功能

vue axios 导出功能

请求后台接口后台返回二进制流前端实现浏览器自动下载成exlce文件

如下图：

主要方法如下：

/** * download方法 * @param {String} type [请求的方式] * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] * @param {String} fileType [导出文件类型] 默认值 xls * @param {String} fileName [导出文件名称] 默认值 导出文件 */function download(url, params, fileType, fileName) { fileType = fileType || 'xls'; fileName = fileName || '导出文件'; let config = { params: params, // headers和responseType一定要在一起设置，否则会导致 获取到的二进制文件流 格式不正确 headers: { 'content-disposition': "attachment;filename=total." + fileType, 'Content-Type': 'application/x-download;charset=utf-8' }, responseType: 'blob' // 设置请求数据格式 }; return new Promise((resolve, reject) => { axios.get(url, config) .then(err => { resolve(err.data); if (!err) { return } let url = window.URL.createObjectURL(err.data); let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', `${fileName}.${fileType}`); document.body.appendChild(link); link.click(); }) .catch(err => { reject(err.data); }) });}export default { download}

调用

// 导出exportBtn() { this.axios.download(`/api/common-service/export`);}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。