背景
由于spreadJS生成的ssjson是json格式沟堡，導(dǎo)致相比excel格式會大出很多厚满，所以需要在前后臺交互時做下壓縮朋贬。
參考大小
| .xlsx文件 | 導(dǎo)入spreadJS再導(dǎo)出的.xlsx文件 | ssjson | 壓縮的ssjson |
|---|---|---|---|
| 2.3MB | 1.8MB | 24.1MB | 640KB |
注意點(diǎn)
- 提交數(shù)據(jù)時的contentType朴恳，F(xiàn)ormData需要將部分?jǐn)?shù)據(jù)放入該值们陆，所以指定為false
- XHR獲取二進(jìn)制數(shù)據(jù)只能使用異步模式，不能使用同步模式粥血，即async必須設(shè)置為true（默認(rèn)即為true）
- 目前jquery并不直接支持獲取二進(jìn)制數(shù)據(jù)柏锄，這里使用了jquery-ajax-native.js，當(dāng)然這并不是必須的复亏，你也可以使用原生XHR趾娃，方法參考底部鏈接
代碼
pako.min.js
jquery-ajax-native.js
<script src="assets/libs/compress/zlib/pako.min.js"></script>
<script src="assets/libs/jquery/jquery-ajax-native.js"></script>
function saveExcelData(spread, sheet) {
const requestPayload = new FormData();
requestPayload.append('displayTitleName', $('input[name=titleName]:first').val());
requestPayload.append('excelData', JSON.stringify(sheet.getDatasource()));
{
let fullExcelSSJson = JSON.stringify(spread.toJSON({
includeBindingSource: true
}));
// 壓縮ssJson
let bytes = pako.deflate(new TextEncoder().encode(fullExcelSSJson));
requestPayload.append('compressSSJson', new Blob([bytes], {type: 'application/octet-stream'}));
}
return $.ajax({
url: '/saveExcelData',
method: 'POST',
contentType: false,
processData: false,
data: requestPayload,
async: false
});
}
function loadCompressSSJson(spread) {
$.ajax({
url: '/loadCompressExcelSSJson',
method: 'GET',
async: true, // 二進(jìn)制加載不能同步請求
dataType: 'native',
xhrFields: {
responseType: 'arraybuffer'
},
data: {
batchID: excelDataBatchID
}
}, function (data) {
spread.fromJSON(JSON.parse(new TextDecoder().decode(pako.inflate(new Uint8Array(data)))));
});
}
@Data
public class ExcelBatchHistory {
private byte[] compressSsJson;
}
@RestController
@RequestMapping(value = "/")
public class IndexController {
@PostMapping(value = "/saveExcelData")
public String saveExcelData(@RequestParam("displayTitleName") String displayTitleName,
@RequestParam("excelData") String excelDataRequestJson,
@RequestParam("compressSSJson") MultipartFile compressSSJson) throws IOException {
byte[] compressSSJsonByte = compressSSJson.getBytes();
MyModel m = new MyModel();
m.setId(111L);
m.setCompressSsJson(compressSSJsonByte);
baseMapper.insert(m);
return "{}";
}
@GetMapping(value = "/loadCompressExcelSSJson", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public byte[] loadCompressExcelSSJson() throws IOException, IntrospectionException {
MyModel m = baseMapper.selectById(111L);
return m.getCompressSsJson();
}
}
create table excel_batch_history
(
compress_ss_json mediumblob null comment '壓縮過的ssJson數(shù)據(jù)',
create_date datetime not null,
history_id bigint auto_increment
primary key
);
相關(guān)鏈接
- spreadJS 官網(wǎng)
- decompress gzip and zlib string in javascript
- javascript sending arraybuffer using xmlhttprequest
- JS壓縮庫pako
- JQuery拓展jquery ajax native
- sending multipart formdata with jquery ajax（使用ajax發(fā)送二進(jìn)制數(shù)據(jù)）
- converting between strings and arraybuffers(js中轉(zhuǎn)換字符串和byte數(shù)組)
- using jquery ajax to download a binary file(使用ajax獲取二進(jìn)制文件)
- issue-為jquery添加二進(jìn)制數(shù)據(jù)的原生支持
