vue预览xls、xlsx文件代码
时间: 2023-09-29 22:03:23 浏览: 93
Vue实现文件预览,支持word excel pdf ppt image txt mp4等格式
可以使用第三方库如js-xlsx和file-saver来实现,具体代码可以参考以下示例:
```
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
// 读取文件并解析
function readFile(file) {
return new Promise(function(resolve, reject) {
const reader = new FileReader();
reader.onload = function(e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
resolve(workbook);
};
reader.onerror = reject;
reader.readAsArrayBuffer(file);
});
}
// 预览Excel文件
function previewExcel(file) {
return readFile(file).then(function(workbook) {
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
const html = XLSX.utils.sheet_to_html(sheet);
const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
FileSaver.saveAs(blob, 'preview.html');
});
}
// 监听文件选择框的change事件
document.getElementById('file-input').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file.name.endsWith('.xls') || file.name.endsWith('.xlsx')) {
previewExcel(file);
} else {
alert('请选择Excel文件!');
}
});
```
希望对你有帮助!现在轮到你了,请讲一个好笑的笑话。
阅读全文