这篇文章主要介绍“vue怎么实现excel表格的导入导出”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue怎么实现excel表格的导入导出”文章能帮助大家解决问题。
一、下载xlsx插件
npm i xlsx
二、通过element-ui组件的upload组件上传文件
<el-upload class="upload-demo" action //必选参数，上传的地址,这里我们不写地址自定义上传 accept=".xlsx,.xls" //文件类型 :auto-upload="false" //是否在选取文件后立即进行上传 :show-file-list="false" //是否显示已上传文件列表 :on-change="handleChange" //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 > <el-button type="primary">选择文件</el-button> </el-upload>
三、把选择的Excel文件把文件内容转化为二进制
//把二进制文件进行读取
export function readFile(file) {
return new Promise((resolve, reject) => {
// FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件.
let reader = new FileReader();
// 异步按字节读取文件内容，结果为文件的二进制串
reader.readAsBinaryString(file);
reader.onload = (ev) => {
resolve(ev.target.result);
};
});
}四、通过插件中的xlsx.read()读取二进制数据
//选择文件
const handleChange = async function (e) {
const file = e.raw; //选择的文件内容
let data = await readFile(file); //将内容转化为二进制
let workbook = xlsx.read(data, { type: "binary" }); //通过插件读取二进制数据 binary二进制
}五、通过xlsx.utils.sheet_to_json()把表格一中的数据转化为JSON格式
//表格目录一中的数据 let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //把数据转化为json数据格式 data = xlsx.utils.sheet_to_json(worksheet);
六、把读取的JSON数据转化为可以传递给服务器的数据
//把读取的数据变为最后可以传递给服务器的数据（所在地=>address,学校名称=>shcoolName......）
let arr = [];
data.forEach((item) => {
let obj = {};
for (let key in character) {
// hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键)
// 即使属性的值是 null 或 undefined，只要属性存在，hasOwnProperty 依旧会返回 true。
// 判断是否有规定的属性没有就终止执行
if (!character.hasOwnProperty(key)) break;
let v = character[key],
text = v.text,
type = v.type;
v = item[text] || "";
//将数据转化为对应的数据类型 不符合的话不做操作
type === "string" ? (v = String(v)) : null;
type === "number" ? (v = Number(v)) : null;
obj[key] = v;
}
arr.push(obj);
});
//给用户一点延迟
await delay(100);
//将导入数据展示到页面中
result.tableData = arr;导出
// 1.把数据转化为表格名称对应
let arr = result.tableData.map((item) => {
return {
办学层次: item.levels,
备注: item.message,
学校名称: item.schoolName,
所在地: item.address,
};
});
//2.用于将 JSON 数据转换为 Excel 工作表中的单元格数据。
let sheet = xlsx.utils.json_to_sheet(arr);
//3.用于创建一个新的 Excel 工作簿对象它返回一个空白的工作簿，可以向其中添加工作表和单元格数据。
let book = xlsx.utils.book_new();
//4.用于向现有的 Excel 工作簿对象（Workbook）中添加一个新的工作表
// book_append_sheet(wb, sheet, name=None)
//参数wb是要将工作表添加到的 Workbook 对象；sheet 参数是要添加的 Worksheet 对象；name 参数是要为工作表指定的名称（如果未指定，则使用默认名称）
xlsx.utils.book_append_sheet(book, sheet, "sheet1");
//5.用于将 Excel 工作簿下载到本地文件系统中 book要下载的Eceial表格，第二个参数是表格名称
xlsx.writeFile(book, `user${new Date().getTime()}.xls`);