前端利用FileSaver.js下载base64内容

• 在通常的上传下载中，我们一般都是直接保存文件或图片(jpg,png,pdf,doc,mp3,zip等)，今天我们换一种方式进行上传下载，即将上传的文件或图片保存为base64内容，前端再利用FileSaver.js进行下载。

关于FileSaver.js

• FileSaver.js在https://github.com/eligrey/FileSaver.js/文件库里有详细的操作说明，在此不再做赘述，不同环境按不同方式进行加入使用即可。

上传

• 我使用的上传后台是java(版本为java8)。先获得上传文件的InputStream，再装InputStream转化成byte[]，再用Base64.getEncoder().encodeToString(content)转化成字符串存储起来。当然存储的内容还可包括文件名，后缀等。

下载

• 前端通过条件从后台取得相应下载内容的字符串，再将字符串转换成FileSaver.js中saveAs方法可接收的Blob内容，调用FileSaver.saveAs(blob, "test.pdf")方法则会弹出下载窗口进行下载。

如上内容有表述不明或不详尽或不同解决方案的敬请互动。有想探讨其它内容的也敬请留言，前端(node, js, koa等），后台（java,架构等）。

注：

前端js字符串转Blob方法

function b64toBlob (b64String, contentType, sliceSize)

{

contentType = contentType || '';

sliceSize = sliceSize || 512;

var byteCharacters = atob(b64String);

var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {

var slice = byteCharacters.slice(offset, offset + sliceSize);

var byteNumbers = new Array(slice.length);

for (var i = 0; i < slice.length; i++) {

byteNumbers[i] = slice.charCodeAt(i);

}

var byteArray = new Uint8Array(byteNumbers);

byteArrays.push(byteArray)

}

return new Blob(byteArrays, {type: contentType});

}

相关引用代码：

var contentType = 'application/pdf';

var blob = b64toBlob(content, contentType);//content为后端返回的base64字符串

saveAs(blob, "barcode.pdf");

#寻找真知派##技术技能超级玩家#