龙空技术网

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

儒雅大自然 607

前言:

此刻你们对“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编码