Vue.js 一个流行的MVVM前端框架，数据驱动思想使得前端开发易于理解和维护。
PHPSpreadsheet 提起已经不再维护的PHPExcel，可能知道的人更多一些。PHPSpreadsheet就是PHPExcel的新项目。
刚接触Vue，结合PHPSpreadsheet做了excel和表格互转的小demo。
1、excel文件表格展示
前端代码
vue-excel
选择文件
{{ fileData ? '当前选择：'+(fileData[0].name) :'未选择文件' }}
【 {{ upStatus }} 】
提交
{{ name }}
{{ title }}
{{ val }}
后端代码
0) reJson(204,'文件上传出错');
// 这里只接收 xsl 和 xsls 文档，PhpSpreadsheet支持更多格式，自行处理
if (!($_FILES["file"]["type"] == 'application/vnd.ms-excel' || $_FILES["file"]["type"] == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) reJson(204,'文件类型不符');
$inputFileName = $_FILES["file"]["tmp_name"];
// PhpSpreadsheet能够自动识别文档类型
$spreadsheet = \PhpOffice\PhpSpreadsheet\IOFactory::load($inputFileName);
$sheetData = $spreadsheet->getActiveSheet()->toArray(null, true, true, true);
reJson(200,'ok',$sheetData);
2、填写表单生成excel文件
前端代码
vue-excel
新增
提交
后端代码
setActiveSheetIndex(0);
$spreadsheet->getActiveSheet()->setTitle('infos');
$titles = [
'name' =>'姓名',
'sex' =>'性别',
'height' =>'身高',
'weight' =>'体重',
'volume' =>'体积',
'proportion' =>'表面积'
];
$azs = range('A','Z');
$datas = $_POST;
// 写入表格数据
$i = 0;
foreach ($titles as $name => $title) {
$spreadsheet->getActiveSheet()->setCellValue(($azs[$i]).'1', $title);
foreach ($datas[$name] as $n => $val) {
$spreadsheet->getActiveSheet()->setCellValue(($azs[$i]).($n+2), $val);
}
++$i;
}
header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Disposition: attachment;filename="test.xlsx"');
$writer = IOFactory::createWriter($spreadsheet, 'Xlsx');
$writer->save('php://output');
JQ写习惯了，在写新增行的时候，惯性思维想写个模板追加过去。后来发现这样就违背了MVVM的思想，失去了扩展性和对数据的管理。在数据驱动下，我们只要对数据对象进行操作(如:排序)，视图就会响应数据。可以使前端开发更为专注高效。
PHPSpreadsheet 可以去下载或者使用composer安装
//composer.json
{
"require": {
"phpoffice/phpspreadsheet": "^1.2"
}
}