vue3 通过调用接口获取到一个二进制流 ,怎么把这个二进制流导出一个excel,且设置excel字体大小且表头自适应,黑体加粗,边框黑色,背景灰色
时间: 2024-09-19 20:17:19 浏览: 71
vue中后端做Excel导出功能返回数据流前端的处理操作
在Vue3中,处理二进制流转化为Excel文件通常需要结合axios等HTTP库来获取数据,然后利用js-xlsx库来操作Excel内容。以下是一个基本步骤:
1. 引入所需库:
```javascript
import axios from 'axios';
import { XLSX } from 'js-xlsx';
```
2. 发起请求并获取二进制流:
```javascript
export async function fetchData() {
try {
const response = await axios.get('your_api_url', { responseType: 'arraybuffer' }); // 指定responseType为arraybuffer获取二进制流
const binaryData = response.data;
return binaryData;
} catch (error) {
console.error(error);
}
}
```
3. 将二进制转换为工作簿和工作表:
```javascript
async function convertToExcel(binaryData) {
const workbook = XLSX.read(binaryData, { type: 'binary' }); // 使用二进制模式读取
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
// 设置字体、边框和背景色
XLSX.utils.sheet_add_aoa(worksheet, [], { fonsColor: '#CCCCCC', fontName: 'Arial', fontSize: 14, bold: true, border: { top: { style: 'thin', color: '#000000' }, ... } });
}
// 使用
fetchData().then(convertToExcel).then((fileBuffer) => {
// 创建Blob对象,并生成下载链接
const blob = new Blob([fileBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'output.xlsx'; // 下载名称
link.click();
});
```
阅读全文