共计 6956 个字符，预计需要花费 18 分钟才能阅读完成。
恩，这是小小本周的第六篇。
高能时刻行将到来！
前端局部
这里论述前端局部导入，导出，生成 Excel 表格
这里应用的是一个 js-xlsx 插件，所以这里进行尝试。
装置依赖
yarn add xlsx我的项目中引入
import * as XLSX from 'xlsx'导出根本实现
定义导出的根本办法
export default function download(json,fileName){
const type = 'xlsx'// 定义导出文件的格局
var tmpDown;// 导出的内容
var tmpdata = json[0];
json.unshift({});
var keyMap = []; // 获取 keys
for (var k in tmpdata) {keyMap.push(k);
json[0][k] = k;
}
var tmpdata = [];// 用来保留转换好的 json
json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {v: v[k],
position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {v: v.v});
var outputPos = Object.keys(tmpdata); // 设置区域, 比方表格从 A1 到 D10
var tmpWB = {SheetNames: ['mySheet'], // 保留的表题目
Sheets: {'mySheet': Object.assign({},
tmpdata, // 内容
{'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] // 设置填充区域
})
}
};
tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
{bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}// 这里的数据是用来定义导出的格局类型
))], {type: ""}); // 创立二进制对象写入转换好的字节流
saveAs(tmpDown,fileName);
}
function saveAs(obj, fileName){// 导出性能实现
var tmpa = document.createElement("a");
tmpa.download = fileName || "下载";
tmpa.href = URL.createObjectURL(obj); // 绑定 a 标签
tmpa.click(); // 模仿点击实现下载
setTimeout(function () { // 延时开释
URL.revokeObjectURL(obj); // 用 URL.revokeObjectURL()来开释这个 object URL}, 100);
}
function s2ab(s){ // 字符串转字符流
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
function getCharCol(n){
let temCol = '',
s = '',
m = 0
while (n > 0) {
m = n % 26 + 1
s = String.fromCharCode(m + 64) + s
n = (n - m) / 26
}
return s
}
我的项目中应用该办法
// 导出 excel
downloadExl = () => {const { results} = this.props // 须要导出的 json 数据
let datas = _.clone(results)// 这里为了不影响我的项目的数据的应用 采纳了 lodash 中的深克隆办法
let json = datas.map(item=> { // 将 json 数据的键名更换成导出时须要的键名
return {
'人员 ID' :item.id,
'姓名' : item.name,
'证件类型': this.findIdType(item.idType),// 将类型代号转为汉字
'证件号码': item.credentialsId,
'固定电话': item.tel,
'移动电话': item.mobile
}
})
download(json,'人员信息.xlsx')// 导出的文件名
}
绑定事件
<Button onClick={this.downloadExl}> 导出 Excel</Button>
这样就实现了 Excel 的导出
导入 Excel 性能实现
定义相干的办法
// 导入 excel
onImportExcel = file => {
// 获取上传的文件对象
const {files} = file.target;
// 通过 FileReader 对象读取文件
const fileReader = new FileReader();
fileReader.onload = event => {
try {const { result} = event.target;
// 以二进制流形式读取失去整份 excel 表格对象
const workbook = XLSX.read(result, { type: 'binary'});
// 存储获取到的数据
let data = [];
// 遍历每张工作表进行读取（这里默认只读取第一张表）for (const sheet in workbook.Sheets) {
// esline-disable-next-line
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 办法将 excel 转成 json 数据
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一张表，就勾销正文这行
}
}
// 最终获取到并且格式化后的 json 数据
const uploadData = data.map(item=> {
return {id : Number(item['人员 ID']),
name : item['姓名'],
idType: this.findIdType(item['证件类型'],'string'),
credentialsId: item['证件号码'],
tel: item['固定电话'],
mobile: item['移动电话']
}
})
console.log(uploadData)// 这里失去了后端须要的 json 数据，调用接口传给后端就行了
message.success('上传胜利！') // 这里用了 antd 中的 message 组件
} catch (e) {
// 这里能够抛出文件类型谬误不正确的相干提醒
message.error('文件类型不正确！');
}
};
// 以二进制形式关上文件
fileReader.readAsBinaryString(files[0]);
}
绑定事件
<Button className={Styles.upload_wrap}>
导入 Excel
<input className={Styles.file_uploader} type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} />
// 这里对原有的 input 款式进行了批改，accept 属性定义了上传文件反对的类型，onChange 操作中的 importExcel 办法定义了上传文件时执行的操作。</Button>
取得事件
这样就实现了前端局部的导入和导出
后端局部
这里论述后端局部的导入和导出，这里用 Java 做实例。
这里应用百万级并发的 POI 作为导入和导出
增加 maven
<!-- excel 导出工具 -->
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>3.17</version>
</dependency>导出 Excel
package com.briup.apps.poll.web.controller;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.IOException;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.List;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFCellStyle;
import org.apache.poi.hssf.usermodel.HSSFFont;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.poifs.filesystem.POIFSFileSystem;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import com.briup.apps.poll.bean.Answer;
import com.briup.apps.poll.service.IAnswerService;
import com.briup.apps.poll.util.MsgResponse;
@Controller
@RequestMapping("/excel")
public class ExcelController extends BaseController{
@Autowired
private IAnswerService answerService;
/***
* 下载 Excel
* @throws IOException
*/
@GetMapping("download")
public void download() throws IOException{HSSFWorkbook workbook = new HSSFWorkbook();
// 创立一个 Excel 表单, 参数为 sheet 的名字
HSSFSheet sheet = workbook.createSheet("课调答卷表");
// 创立表头
setTitle(workbook, sheet);
List<Answer> answers = answerService.findAll();
// 新增数据行，并且设置单元格数据
int rowNum = 1;
for (Answer answer:answers) {HSSFRow row = sheet.createRow(rowNum);
row.createCell(0).setCellValue(answer.getId());
row.createCell(1).setCellValue(answer.getSelections());
row.createCell(2).setCellValue(answer.getCheckes());
row.createCell(3).setCellValue(answer.getContent());
rowNum++;
}
String fileName = "survey-answer.xlsx";
// 清空 response
response.reset();
// 设置 response 的 Header
response.addHeader("Content-Disposition", "attachment;filename="+ fileName);
OutputStream os = new BufferedOutputStream(response.getOutputStream());
response.setContentType("application/vnd.ms-excel;charset=gb2312");
// 将 excel 写入到输入流中
workbook.write(os);
os.flush();
os.close();}
/***
* 设置表头
* @param workbook
* @param sheet
*/
private void setTitle(HSSFWorkbook workbook, HSSFSheet sheet){HSSFRow row = sheet.createRow(0);
// 设置列宽，setColumnWidth 的第二个参数要乘以 256，这个参数的单位是 1 /256 个字符宽度
sheet.setColumnWidth(0, 10*256);
sheet.setColumnWidth(1, 20*256);
sheet.setColumnWidth(2, 20*256);
sheet.setColumnWidth(3, 100*256);
// 设置为居中加粗
HSSFCellStyle style = workbook.createCellStyle();
HSSFFont font = workbook.createFont();
font.setBold(true);
style.setFont(font);
HSSFCell cell;
cell = row.createCell(0);
cell.setCellValue("序号");
cell.setCellStyle(style);
cell = row.createCell(1);
cell.setCellValue("单选");
cell.setCellStyle(style);
cell = row.createCell(2);
cell.setCellValue("多选");
cell.setCellStyle(style);
cell = row.createCell(3);
cell.setCellValue("简答");
cell.setCellStyle(style);
}
}
后果
导入 Excel
@PostMapping("upload")
public MsgResponse upload(MultipartFile file) {if (file==null) {return error("file 不能为空");
}
List<Answer> answers = new ArrayList<>();
try {HSSFWorkbook workbook = new HSSFWorkbook(new POIFSFileSystem(file.getInputStream()));
// 有多少个 sheet
int sheets = workbook.getNumberOfSheets();
for (int i = 0; i < sheets; i++) {HSSFSheet sheet = workbook.getSheetAt(i);
// 获取多少行
int rows = sheet.getPhysicalNumberOfRows();
Answer answer = null;
// 遍历每一行，留神：第 0 行为题目
for (int j = 1; j < rows; j++) {answer = new Answer();
// 取得第 j 行
HSSFRow row = sheet.getRow(j);
answer.setSelections(row.getCell(1).getStringCellValue());// 单选
answer.setCheckes(row.getCell(2).getStringCellValue());// 多选
answer.setContent(row.getCell(3).getStringCellValue());// 简答
answers.add(answer);
}
}
} catch (IOException e) {logger.error(e.getMessage(),e);
return error(e.getMessage());
}
return success(answers);
}
这样在后盾能够获取到 Excel 的行与列。
正文完
