vue3 ts 通过xlsx实现网页预览 base64 excel 文件 并且实现表格显现出来
时间: 2024-03-21 15:37:55 浏览: 35
可以使用xlsx和file-saver库来实现网页预览base64格式的excel文件,并将其表格显示出来。以下是一个简单的示例代码:
首先,需要安装xlsx和file-saver库:
```bash
npm install xlsx file-saver
```
然后,在vue组件中引入这两个库:
```typescript
<script lang="ts">
import * as XLSX from 'xlsx';
import * as FileSaver from 'file-saver';
export default {
data() {
return {
fileData: '',
fileName: ''
};
},
methods: {
previewExcel() {
const fileReader = new FileReader();
fileReader.onload = (e: any) => {
const data = e.target.result;
const workbook = XLSX.read(data, { type: 'binary' });
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
this.fileData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
const fileName = this.fileName.replace('.xlsx', '');
this.exportToExcel(fileName);
};
fileReader.readAsBinaryString(this.file);
},
exportToExcel(fileName: string) {
const worksheet = XLSX.utils.json_to_sheet(this.fileData);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, worksheet, 'Sheet1');
const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
FileSaver.saveAs(blob, `${fileName}.xlsx`);
}
}
};
</script>
```
其中,`previewExcel`方法用于将base64格式的excel文件转换为表格数据,并将其显示出来;`exportToExcel`方法用于将表格数据导出为excel文件并下载到本地。
在模板中,我们可以使用`input`元素和`FileReader`API来选择文件并将其转换为base64格式:
```html
<template>
<div>
<input type="file" @change="handleFileChange" />
<button @click="previewExcel">Preview Excel</button>
<table>
<thead>
<tr>
<th v-for="(header, index) in fileData[0]" :key="index">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in fileData" :key="index">
<td v-for="(cell, index) in row" :key="index">{{ cell }}</td>
</tr>
</tbody>
</table>
</div>
</template>
```
其中,`handleFileChange`方法用于获取选择的文件并将其转换为base64格式:
```typescript
methods: {
handleFileChange(e: any) {
const file = e.target.files[0];
this.fileName = file.name;
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.fileData = reader.result;
};
}
}
```
这样,我们就可以通过选择excel文件并点击按钮来预览表格了。