前言:
此刻你们对“js对图片base64编码”大概比较注重,你们都想要剖析一些“js对图片base64编码”的相关文章。那么小编同时在网络上收集了一些关于“js对图片base64编码””的相关知识,希望朋友们能喜欢,大家快快来学习一下吧!在通常的上传下载中,我们一般都是直接保存文件或图片(jpg,png,pdf,doc,mp3,zip等),今天我们换一种方式进行上传下载,即将上传的文件或图片保存为base64内容,前端再利用FileSaver.js进行下载。
关于FileSaver.js
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");
#寻找真知派##技术技能超级玩家#
标签: #js对图片base64编码