一、准备工作
Vue项目导出和导入功能真的好赞！用户体验瞬间提升，还省时省力。简单说，导出就是把表格数据变成Excel文件；而导入，就是把Excel文件信息加到表格里去。这个玩法是不是挺酷？操作也不难，跟着步骤做就能搞定哈～
首先，装上xlsx和file-saver这个小秘籍，它们非常好用，让你搞定Excel文件，还能随时快速保存。接着就是大展身手编程的时候了，让数据畅快地飞翔~(✿◡‿◡)
二、导出数据为Excel文件
做Vue项目的时候，遇到需要导出Excel表格的情况，其实很容易解决！
1.安装依赖库
先在项目里装上这俩玩意儿：XLSX和file-saver。
bash npm install xlsx file-saver
2.编写导出代码
只要下个 xlsx 跟 file-saver，就能轻轻松松把数据导出来！
“`javascript
import XLSX from ‘xlsx’;
直接上浏览器就行！保证能搞定这个工具名叫’file-saver’挺好用的。
npm install xlsx file-saver
然后，编写一个导出函数：
别着急，跟我学一下怎么导入数据进Excel！首先，得确保有个名字叫`filename`的文件哈。其次，跟着我步骤走就好了：
学过如何把JSON文件弄成Excel表格？只需要一个厉害的神器—— XLSX.utils.json_to_sheet就能轻松搞定！
下面开始！首先得建个Excel表格。这其实很容易，就在名字叫XLSX的那儿，找找看有没有叫book_new()的魔法方法，跟着它的指示就可以搞定~
这个小助手真的很好用，可以让我直接在Excel文件里加个新的‘Sheet1’表格
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
把Excel文件存到缓存里就行了，跟保存为xlsx文件没啥区别，记得在选项里选”数组”！
首先，得先把Excel数据变成Blob对象，弄个容器来装我们的 ExcelBuffer。别忘了这里要用到的是 application/octet-stream 的格式喔~
文件找到了么？点下“另存为”按钮，给新文件起个名字叫”${filename}”,别忘了把后缀改成”.xlsx”~
}
3.调用导出函数
想要把数据弄成Excel格式吗？用这个名为’exportToExcel’的强大函数，简单到只需要提供表格数据和文件名。轻松搞定！
export function exportToExcel(data) {
const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const excelBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
saveAs(excelBlob, 'data.xlsx');
}
exportData(){
//假设tableData是表格中的数据数组
赶紧把这个表格里的东西弄到Excel里，文件名就叫‘出口数据’
做完那些步骤，咱们就能把表格里的信息变成Excel文件！
三、导入数据到表格
不要以为把数据往Excel表格里弄，就是用CSV文件那么简单的事。有时还得倒着来，像是让Excel中的信息进入编程语言一样哩。快来听听我教你的妙招！
export default {
methods: {
handleExport() {
const data = [
{ name: 'John', age: 20 },
{ name: 'Jane', age: 25 },
{ name: 'Tom', age: 30 },
];
exportToExcel(data);
},
},
};
首先，在Vue项目中安装xlsx依赖库：
npm install xlsx
2.编写导入代码
在需要导入数据的组件中，首先导入xlsx库：
然后，编写一个导入函数：
这货可以帮你把Excel文件塞进去，只需报出要导入哪文档就成了！
npm install xlsx
用Promise直接来呗，挺方便的。只需要给resolve（没错儿）和reject（错咯）加个名字，小菜一碟！
“FileReader(),其实就像我们的小书童啦!”
reader.onload =(e)=>{
刚我搞定了这家伙的校准，拿E校验了下，然后把搞定后的数据塞进data里咯。
直接用XLSX打开数据，再弄个数组保存就ok！
首先得找到你要处理的表格在哪里，然后喊“worksheet”大哥过来给你搞定就行。
我刚试过用那个名叫’XLSX’的工具，转眼间表格就变成了JSON格式。而且我特意没删掉第一行，用来当标题呢哈哈哈~
import XLSX from 'xlsx';
resolve(jsonData);
};
直接用reader把文件读成数组buffer！
});
3.调用导入函数
就在那儿找个名字叫’importFromExcel’的函数，设好它就成了！
export function importFromExcel(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = (event) => {
const data = new Uint8Array(event.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
resolve(jsonData);
};
reader.readAsArrayBuffer(file);
});
}
handleFileChange(e){
先找文件，就在弹出的target框里头的第一个就对了。
Excel文档五步搞掂！先用导入功能from Excel import，见到日期直接回，简到爆了对不？
//处理从Excel文件中读取到的data数组
}).catch(error =>{
警告，导入出错：失误；
完成这几步以后，你就可以在Excel里面简单读入和修改表格里的数据了喔~
import { importFromExcel } from '@/utils/excel';
export default {
methods: {
async handleImport(event) {
const file = event.target.files[0];
const data = await importFromExcel(file);
// 处理导入的数据
console.log(data);
},
},
};
四、总结与展望
学好这个招儿，你就能轻轻松松搞定Vue项目的数据导出和导入！不管是把表格数据扔到Excel表还是从里面拿出数据，都没问题！
以后做项目时，记得按需微调代码，加点参数设定，改换下文件处理方法啥的，速度会提升不少哟。今儿我就教你如何简单快速地搞定Vue项目中的数据导出与导入！
评论0