vue POST 请求方式下载excel文件

1.使用技术

node -koa
vue

2.上代码

前端请求

先配置vue脚手架里的request请求，在响应请求前加入以下判断

 const res = response.data// 处理post下载if (response.data.type === 'application/vnd.openxmlformats') {return response.data}

exportArticleStat({'cids':cids}).then(res=>{const content = res;const blob = new Blob([content]);const fileName = "推送任务数据分析导出.xlsx";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);}
})

后端请求处理：注意在响应前要加以下响应头

router.post('/mp/exportArticleStat', async (ctx, next) => {await Push.exportArticleStat(ctx).then(function(res) {ctx.set('Content-Type', 'application/vnd.openxmlformats');ctx.set("Content-Disposition", "attachment; filename=" + "terminal.xlsx");ctx.body = res;}).catch(err => {ctx.body = {code: -1,msg: err}})
})

以下为下载excel的接口方法

/*** 图文分析数据导出*/
const exportArticleStat = function(ctx){return new Promise(function (resolve, reject) {let cids = ctx.request.body.cids;async.map(cids,function (item,callback) {articleAnalysis(item.cid).then(res=>{callback(null,{"pushname":item.pushname,"data":res})})},function (err,results) {excelUtils.articleStatExcel(results).then(res=>{resolve(res)})})})
}

var xlsx = require('node-xlsx');const articleStatExcel = function(param){return new Promise(function (resolve, reject) {let excelData = []for(let items of param){let data = []let hearders = ['微信号','推送时间','截至时间','标题','送达人数','阅读人数','阅读次数','原文阅读次数','原文阅读次数','分享人数','分享次数','收藏人数','收藏次数',]data.push(hearders)//处理查询clickhouse 的数据for (let item of items.data) {for(let it of item.details){let arr = new Array()arr.push(item.platform)arr.push(it.time)arr.push(it.stat_date)arr.push(it.title)arr.push(it.target_user)arr.push(it.int_page_read_user)arr.push(it.int_page_read_count)arr.push(it.ori_page_read_user)arr.push(it.ori_page_read_count)arr.push(it.share_user)arr.push(it.share_count)arr.push(it.add_to_fav_user)arr.push(it.add_to_fav_count)data.push(arr)}}excelData.push({name: items.pushname,data: data})}var buffer = xlsx.build(excelData)resolve(buffer)})
}

vue POST 请求方式下载excel文件相关推荐

php通过ajax下载文件,PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...
PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...
vue使用xlsx插件下载excel文件
1.安装xlsx插件 cnpm install xlsx 2.新建xlsx.js文件,添加以下代码,放在plugins或utils插件文件夹下 // 下载excel功能 import XLSX fro ...
Vue 下载 Excel 文件
Vue 下载 Excel 文件 Vue前端将List列表下载为Excel文件安装依赖包首先前端将List列表生成Excel文件需要下载几个依赖包. npm install -S file-save ...
VUE项目兼容IE11 遇见的问题 SyntaxError: strict 模式下不允许一个属性有多个定义；ie11下载excel文件需要用navigator.msSaveBlob
最近要把vue项目兼容ie11 前面引入bable等一系列操作就不说了,下面说一下具体具体的问题 1 如图所示 SyntaxError: strict 模式下不允许一个属性有多个定义, 点击sta ...
IE中点击链接下载EXCEL文件直接以乱码方式打开解决
我需要在页面上通过javascript控制,点击一个链接下载excel文件模板,总觉得方法都写对了,可每次点击都是新开一个窗口,显示的全是乱码.几日以来一直被这个问题困扰,今天无意中得知这个方法,试了 ...
java使用jxl生成excel表格,jsp使用js下载excel文件xls
java使用jxl生成excel表格,jsp使用js下载excel文件后端代码 maven jar包主体代码逻辑引入的jar包具体代码段重点详解表头和表格内容两种格式直接将 HttpSe ...
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文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...

vue POST 请求方式下载excel文件

1.使用技术

2.上代码

vue POST 请求方式下载excel文件相关推荐

最新文章

热门文章