// 定义工作表的数据
const ws_data = [
['DM','2024指标(百万元)','DM指标占比(%)','公司/市场部会议','大区会','科室会','KA医院活动','地区总费用(百万元)'],// 表头
// 数据行
...newArray,
["大区总和"]
// ... 更多数据行
// 创建工作表
const ws = XLSX.utils.aoa_to_sheet(ws_data);
// 创建工作簿并添加工作表
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
// 导出工作簿(这里默认导出为xlsx格式)
XLSX.writeFile(wb, "地区DM活动费用分配模板.xlsx");
//Excel导入
let jsonData = [];//数据
// 在上传文件之前可以进行一些检查,比如文件类型等
const beforeUpload = (file) => {
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
console.log(isExcel,'isExcel');
if (!isExcel) {
ElMessage.error('只能上传Excel文件!');
return isExcel;
// 处理文件改变事件
let upLoad = async function (event, fileList) {
console.log('event',event.raw);
const files = event.raw;
const reader = new FileReader();
reader.onload = (e) => {
const data = e.target.result;
const workbook = XLSX.read(data, { type: 'binary' });// binary获取的数据类型为[{},{},{}]
const firstSheetName = workbook.SheetNames[0];//第一个sheet 名字
const worksheet = workbook.Sheets[firstSheetName];//第一个sheet中的数据
jsonData = XLSX.utils.sheet_to_json(worksheet);//把表中的数据转换为JSON
console.log('jsonData',jsonData);
excelIn(jsonData);
await reader.readAsArrayBuffer(files);
以上方法是在vue3 setup语法糖中实现的,包含了excel文件的上传分析和模板下载,通过这种方式,可以自己设置用户使用的excel模板,分析用户上传的excel文件,并把获取到的表格数据渲染到页面中。
在vue中使用,需要下载XLSX模块
npm i xlsx
在页面中引入模块
import * as XLSX from 'xlsx';
在原生js中引入
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>