vue如何实现二进制流文件导出excel
更新时间：2022年06月02日 11:19:31 作者：甜仔是只猫
这篇文章主要介绍了vue如何实现二进制流文件导出excel，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue二进制流文件导出excel
问了一下其他的后端，他们公司前端是a标签，后端是给了一个地址，a标签或者window.open()都可以实现。
我们公司是后端返回的二进制流文件，实现了一下，亲测可以，没有问题
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">下载</button>
<!-- yarn add axios -->
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
const btn = document.getElementById("btn");
btn.onclick = function () {
axios({
method: "post",
url: "http://localhost:3000/download",
data: {
// test: "test data",
},
responseType: 'blob' //返回类型
}).then((res) => {
let name = '合格率' //注意这里不可以再加.xlsx了，函数中已经封装了
createExcel(res.data, name) //这里就直接这样调用方法就行了
});
}
// vue中可以写方法 然后再暴露出去
function createExcel(res, name) {
let blob = new Blob([res], {
type: 'application/vnd.ms-excel'
})
let fileName = name + '.xlsx'
// 允许用户在客户端上保存文件
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName)
} else {
var link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
link.click()
//释放内存
window.URL.revokeObjectURL(link.href)
}
}
// 1.msSaveBlob：只提供一个保存按钮
//window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');
// 2.msSaveOrOpenBlob：提供保存和打开按钮
// window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt');
</script>
</html>
后端node
const http = require("http");
const fs = require("fs");
const server = http.createServer((req, res) => {
if (req.url === "/download") {
res.writeHead(200, {
"Content-type": "application/vnd.ms-excel", // 返回 excel
// 跨域设置
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "content-type",
});
// 异步读取文件内容 这里新建了一个test.xlsx的excel
fs.readFile("test.xlsx", (err, data) => {
// 返回二进制文件流
res.end(data);
});
}
});
server.listen(3000, () => {
console.log("好厉害，3000的服务器起来了");
});关于二进制文件流导出Excel文件的一些坑
实现下载效果
<el-button type="warning" icon="el-icon-download" size="mini" @click="download()">导出</el-button>
//下载操作
download() {
return axios({
url: '/download/sms',
method: 'post',
data: this.queryForm,
responseType: 'blob',
headers: {
'Content-Type': 'application/json'
}
})
.then(res => {
console.log(res, '返回数据列');
const blob = new Blob([res.data], {
type: 'application/vnd.ms-excel'
});
console.log(blob, '----------0990');
const fileName = '短信列表.xls';
const linkNode = document.createElement('a');
linkNode.download = fileName; //a标签的download属性规定下载文件的名称
linkNode.style.display = 'none';
linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
document.body.appendChild(linkNode);
linkNode.click(); //模拟在按钮上的一次鼠标单击
URL.revokeObjectURL(linkNode.href); // 释放URL 对象
document.body.removeChild(linkNode);
})
.catch((err) => {
console.log(err);
});
return res;
},踩坑
1、刚开始看网上说需要axios原生才能请求，然后就引入了axios之后但是一直报错，导致download的then代码无法执行，直接走catch，输出错误
研究了半天才发现是blob返回没有code，也没有message，而我在拦截器中直接设置了code的判断拦截，所以导致请求一直报错
2、在发送请求时必须要加上responseType: ‘blob’,不然导出的文件是乱码格式的
3、在then里面定义的blob new出来的数据需要再走一层，而不是直接输出
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue全局实现数字千位分隔符格式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
Vue3项目pc端浏览器样式正常但移动端部分样式失效问题的解决方法
这篇文章主要介绍了Vue3项目pc端浏览器样式正常但移动端部分样式失效问题的解决方法,文中通过图文讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-07-07
使用vue.js进行项目的开发已经有了一定的时间，在任务的过程中以及和不同的开发使用者交流中，逐渐对vue.js的使用心得有了一定的积累。本文主要给大家分享一些开发时需要注意的事项2016-04-04
这篇文章主要介绍了vue3之声明式和编程式导航,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue项目刷新当前页面的三种方法，本文图文并茂给大家介绍的非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-12-12
解决uniapp项目在微信开发工具里打开报错Error:app.json:在项目根目录未找到app.json
这篇文章主要给大家介绍了关于解决uniapp项目在微信开发工具里打开报错Error:app.json:在项目根目录未找到app.json的相关资料,文中通过图文将解决的办法介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue3打包部署报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了keep-alive不能缓存多层级路由菜单问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要给大家介绍了关于Vue中$refs的探索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了Vue中封装input组件的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-10-10
最新评论