npm install --save xlsx
v2
const XLSX = require("xlsx"); //使用import有的属性无法找到
export function exportExcel(filename,data) {
let exc = XLSX.utils.book_new(); // 初始化一个excel文件
let exc_data = XLSX.utils.aoa_to_sheet(data); // 传入数据 , 到excel
// 将文档插入文件并定义名称
XLSX.utils.book_append_sheet(exc, exc_data, filename);
// 执行下载
XLSX.writeFile(exc, filename + 'xlsx');
}
<template>
<button @click="download">下载表格</button>
</template>
<script>
import { exportExcel } from "./excelConfig";
export default {
data() {
return {
exc_data:[
['第一列', '第二列' ,'第三列'],
['aa', 'bb' ,'cc'],
['dd', 'ee' ,'ff'],
]
};
},
methods: {
download() {
exportExcel('vue2导出的表格',this.exc_data);
},
},
};
</script>
v3
import * as XLSX from 'xlsx'
export function exportExcel(filename,data) {
let exc = XLSX.utils.book_new();
let exc_data = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(exc, exc_data, filename);
XLSX.writeFile(exc, filename + 'xlsx');
}
<template>
<button @click="download">下载表格</button>
</template>
<script setup>
import { exportExcel } from "./excelConfig"
const exc_data = [
['第一列', '第二列' ,'第三列'],
['aa', 'bb' ,'cc'],
['dd', 'ee' ,'ff']
];
function download() { exportExcel('vue3导出的表格',this.exc_data) }
</script>
效果如下
http://img-blog.csdnimg.cn/5feed55c823e4030b862c63d7d3ea45b.png
通过blob文件流导出(如果后端返回给前端的是blob数据,前端转换成表格导出)
xxxApi(params).then(res=>{
if(res){
const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
const a = document.createElement('a')
a.download = '表格.xlsx'
a.href = window.URL.createObjectURL(blob)
a.click()
console.log('导出成功')
}else{
console.log('导出失败')
}
})
Comments | NOTHING