vue 前端下载excel的n中方法

最新推荐文章于 2024-05-14 10:49:01 发布

紫晓宁

最新推荐文章于 2024-05-14 10:49:01 发布

阅读量765

点赞数

分类专栏：前端web 文章标签： vue.js

本文链接：https://blog.csdn.net/zixiaoning/article/details/123906074

版权

前端web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、直接下载html中的表格元素

	<table id="table" border="1">
		<tr style="height:50px;">
			<th style="width:100px;color:red;">姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</table>
	<a id="down">点击下载excel</a>
	<script>
		let html = `<!DOCTYPE html>
			<html lang="en">
			<head>
				<meta charset="UTF-8">
			</head>
			<body>
				${document.getElementById('table').outerHTML}
			</body>
			</html>`
		let blob = new Blob([html],{ type: 'application/vnd.ms-excel'});
		let a = document.getElementById('down');
		a.href = URL.createObjectURL(blob);
		a.download = '测试excel下载'
	</script>


原文链接：https://blog.csdn.net/weixin_35958891/article/details/103381012

2、npm install node-xlsx

接口返回的数据，再处理成map对象或者数组对象，再写入到excel


downloadFile(){
    const xlsx = require('xlsx');
    let arrayData = [
        ['name', 'age'],
        ['zhangsan', 20]
    ];
    let jsonData = [{
        name: "zhangsan1",
        age: 30
    },
        {
            name: "zhangsan1",
            age: 24
        }
    ];
    // 将数据转成workSheet
    let arrayWorkSheet = xlsx.utils.aoa_to_sheet(arrayData);
    let jsonWorkSheet = xlsx.utils.json_to_sheet(jsonData);

    // 构造workBook
    let workBook = {
        SheetNames: ['arrayWorkSheet', 'jsonWorkSheet'],
        Sheets: {
            'arrayWorkSheet': arrayWorkSheet,
            'jsonWorkSheet': jsonWorkSheet,
        }
    };
     // 将workBook写入文件
    xlsx.writeFile(workBook, "./aa.xlsx");
}