vue中下载excel文件

请求用的axios
请求函数封装
req.js

import axios from 'axios'
const api = axios.create({baseURL : _getBaseUrl(),
});
function _getBaseUrl(){const env = process.env.NODE_ENV;if (env === 'production') {return 'http://xxx.xxx.x.xxx:8080'}return 'http://xxx.xxx.x.xxx:8080'
}
/*** 上传文件* @param {请求目录文件} url * @param {文件对象} file * @param {成功回调函数} _cb * @param {失败回调函数} _catchcb */
export function uploadFile (url,file,_cb,_catchcb) {const fd = new FormData();fd.append('file',file)return api.post(url,fd,{headers : {'Content-Type' : 'multipart/form-data','Access-Control-Allow-Origin' : '*'}}).then(_cb).catch(_catchcb)
}
/*** 下载文件* @param {请求url} url * @param {成功回调函数} _cb * @param {失败回调函数} _catchcb */
export function downLoadFile (url,_cb,_catchcb) {return api.get(url,{responseType: 'blob'},{responseType: 'arraybuffer',headers : {'Content-Type' : 'application/json',}}).then(_cb).catch(_catchcb)
}

处理服务端返回文件，工具类封装
tools.js

  /*** 处理下载的报表* @param {file}  文件对象* @param {filename}  需要保存的文件对象名称* 保存的文件格式为：filename-年月日.xlsx*/export function operateFile (file,filename) {let fileName = fname + "-" + new Date().getFullYear() + '' +( new Date().getMonth()+1)  + '' +new Date() .getDate()+".xlsx";let blobObject = new Blob([file], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); //是IE浏览器if(!!window.ActiveXObject || "ActiveXObject" in window){window.navigator.msSaveOrOpenBlob(blobObject,fileName);}else{//火狐谷歌都兼容//模板中要有一个预定义好的a标签let link = document.getElementById('a_id')link.href = URL.createObjectURL(blobObject);link.download = fileNamelink.click();}}export default{operateFile: operateFile,}

组件中调用

<template><div class="inputWrapper"><a id="a_id"></a><button class="confirmBtn" @click="dl_confirm">确&nbsp;定</button>     </div>
</template>
<script>data() {return {};},methods: {dlConfirm:function(dlData){//下载报表弹框的确定按钮console.log(dlData)this.downLoadShow = falselet that = thislet data = {"aaa":ccc,"bbb":ddd}let url = "/terminal/export?"+qs.stringify(data)downLoadFile(url,function(res){console.log(res)if (res.data) {tools.operateFile(res.data,"xxx")} else {console.log("失败")}},function(err){console.log(err)that.showToast(err)})},}</script>

vue中下载excel文件相关推荐

vue中下载excel的使用，后端链接两种情况，一个是链接，一个是文件流
vue中下载excel使用一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {this.time ...
vue中导入excel文件
vue中导入excel文件 1.安装插件 npm install -S file-saver xlsxnpm install -D script-loader 2.在utils中创建excel文件夹放 ...
Vue 中实现 excel文件上传功能
场景: 上传excel表,并将excel表中的数据构建成实体 <div class="pull-right" v-if="doc"><el-u ...
vue前端下载excel文件
// html <el-button type="primary" plain @click="frontDownload">本地下载</el ...
react接收后端文件_React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
java文件流下载excel_React获取Java后台文件流下载Excel文件
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
vue实现下载EXCEL模板、导入EXCEL文件
vue实现下载EXCEL模板.导入EXCEL文件在项目中很常见需要先下载模板,根据模板导入下面展示一些下载模板代码片段. 需要有一个下载模板的接口,点击下载触发函数,调用接口,返回下载地址接口 ...
Vue 下载 Excel 文件
Vue 下载 Excel 文件 Vue前端将List列表下载为Excel文件安装依赖包首先前端将List列表生成Excel文件需要下载几个依赖包. npm install -S file-save ...
vue中下载文件导出保存到本地
vue中下载文件导出保存到本地先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地看看返回数据 res.config.url 中是下载链接地 ...

vue中下载excel文件

vue中下载excel文件相关推荐

最新文章

热门文章