摘要:本文将详细介绍前端Vue中导出Excel的方法,包括使用第三方库和纯前端实现两种方式。同时解释其原理,帮助读者了解如何在Vue项目中高效地导出Excel文件。
-
第三方库:
exceljs
exceljs
是一款功能强大的JavaScript库,它能够在前端中创建、编辑和导出Excel文件。它的原理是使用纯JavaScript实现了Excel的文件格式,通过生成Excel文件的数据结构,并转换为二进制格式进行下载。
导出Excel的方法:
第一步:安装exceljs
库
在Vue项目中使用npm或yarn安装exceljs
库:
npm install exceljs
或
yarn add exceljs
第二步:导入exceljs
在需要导出Excel的组件中导入exceljs
库:
import ExcelJS from 'exceljs';
第三步:创建Excel工作簿、工作表和添加数据 在需要导出的地方,创建一个新的Excel工作簿,添加工作表,并将数据添加到工作表中:
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');
// 假设data为要导出的数据数组
data.forEach((item, index) => {
worksheet.addRow([item.name, item.age, item.email]);
});
第四步:导出Excel文件 将生成的Excel文件进行二进制编码,并创建一个下载链接供用户下载:
workbook.xlsx.writeBuffer().then((buffer) => {
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'data.xlsx'; // 下载文件名
link.click();
});
-
纯前端实现
有时候我们不想引入额外的库,也可以在Vue中纯前端实现导出Excel。这种方法的原理是利用浏览器支持的
Blob
和URL.createObjectURL
功能,将数据转换为CSV格式,并以文件形式下载。
导出Excel的方法:
第一步:编写导出函数 在Vue组件中编写一个导出函数,将数据转换为CSV格式,并创建一个下载链接供用户下载:
exportExcel(data) {
const csv = data.map(item => `${item.name},${item.age},${item.email}`).join('\n');
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'data.csv'; // 下载文件名
link.click();
}
第二步:调用导出函数 在需要导出的地方,调用导出函数,并将数据传入:
// 假设data为要导出的数据数组
this.exportExcel(data);
-
引入方法
一、安装vue-json-excel
npm install vue-json-excel -S
二、main.js中引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
三、在代码中使用
<template>
<download-excel
class="export-excel-wrapper"
:data="DetailsForm"
:fields="json_fields"
:header="title"
name="需要导出的表格名字.xls"
>
<!-- 上面可以自定义自己的样式,还可以引用其他组件button -->
<el-button type="success">导出</el-button>
</download-excel>
</template>
四、数据
-
DetailsForm:需要导出的数据
-
title:表格标题
-
json_fields:里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定,默认导出全部数据中心全部字段
<script>
title: "xx公司表格",
json_fields: {
"排查日期":'date',
"整改隐患内容":'details',
"整改措施":'measure',
"整改时限":'timeLimit',
"应急措施和预案":'plan',
"整改责任人":'personInCharge',
"填表人":'preparer',
"整改资金":'fund',
"整改完成情况":'complete',
"备注":'remark',
},
DetailsForm: [
{
date: "2022-3-10",
details: "卸油区过路灯损坏",
measure: "更换灯泡",
timeLimit: "2022-3-21",
plan: "先使用充电灯代替,贴好安全提醒告示",
personInCharge: "王xx",
preparer: "王xx",
fund: "20元",
complete: "已完成整改",
remark: "重新更换了灯泡",
},
],
</script>
五、效果
六、一些常用参数
如果有疑问欢迎留言,为您解答!!!