（js-xlsx）前端处理Excle与后台交互

（js-xlsx）前端处理Excle与后台交互

下载excle模板

let table=[];
	table.push({
	    A:"廠別",
	    B:"機種",
	    C:"站點",
	    D:"責任人工號"
	});
	
	//创建book
	const wb = XLSX.utils.book_new();
	//json转sheet
	const ws = XLSX.utils.json_to_sheet(table, {header:["A", "B", "C", "D"], skipHeader:true});
	//设置列宽
	ws['!cols']= [
	    {width: 15},
	    {width: 15},
	    {width: 15},
	    {width: 15}
	];
	//sheet写入book
	XLSX.utils.book_append_sheet(wb, ws, "file");
	//输出
	XLSX.writeFile(wb,"責任人.xlsx");

读取Excle模板

	const reader = new FileReader();
    reader.readAsBinaryString(obj.files[0]);
    reader.onload = function (e) {
        const data = e.target.result;
        const excelFile = XLSX.read(data, {
            type: 'binary'
        });
		//sheet转json
        const str = XLSX.utils.sheet_to_json(excelFile.Sheets[excelFile.SheetNames[0]]);
        picmessageList = [];
        for (var i = 0; i < str.length; i++) {
            picmessageList.push({
                fab:str[i].廠別,
                motype:str[i].機種,
				step:str[i].站點,
				pic:str[i].責任人工號
            })

        }
		//这步可以发送给后台
        console.log(JSON.stringify(picmessageList));

    }

后台接收数据

引入fastjson

		<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.75</version>
        </dependency>

把接收到的json字符串转换成list集合

	@PostMapping("insert")
	@Transactional
    public JsonResult insert(@RequestBody String wipdata){
        System.out.println(wipdata);
        List<IWipBaseSection> datas = JSONArray.parseArray(wipdata, IWipBaseSection.class);
        iWipBaseSectionService.delete("1");
        datas.forEach(e->{
            iWipBaseSectionService.insert(e);
        });

        return new JsonResult(200,"保存成功");
    }