有个需求是后端传二进制编码前端实现预览和下载,所以在网上拼凑了这个demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<input type="file" onchange="jsReadFiles(this.files)"/>
</body>
<script type="text/javascript">
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime
});
}
var file24324 = dataURLtoFile('data:text/plain;base64,eGluY2h1bg==', 'test.txt');
//js 读取文件
function jsReadFiles(files) {
if (files.length) {
var file = files[0];
readBlobAsDataURL(file, function(dataurl) {
console.log(dataurl);
});
var reader = new FileReader(); //new一个FileReader实例
if (/text+/.test(file.type)) { //判断文件类型,是不是text类型
reader.onload = function() {
$('body').append('<pre>' + this.result + '</pre>');
}
reader.readAsText(file);
} else if (/image+/.test(file.type)) { //判断文件是不是imgage类型
reader.onload = function() {
$('body').append('<img src="' + this.result + '"/>');
}
reader.readAsDataURL(file);
}
}
}
function readBlobAsDataURL(blob, callback) {
var a = new FileReader();
a.onload = function(e) {
callback(e.target.result);
};
a.readAsDataURL(blob);
}
function jsReadFiles1(files) {
var reader = new FileReader(); //new一个FileReader实例
reader.onload = function() {
$('body').append('<pre>' + this.result + '</pre>');
}
reader.readAsText(files);
}
console.log(file24324)
let data = jsReadFiles1(file24324)
downLoadFile(file24324)
function downLoadFile(data) {
let url = window.URL.createObjectURL(data); //表示一个指定的file对象或Blob对象
console.log(url, "看一下这是啥")
let a = document.createElement("a");
document.body.appendChild(a);
// let fileName = msg.headers["content-disposition"].split(";")[1].split("=")[1]; //filename名称截取
a.href = url;
a.download = 'test.text'; //命名下载名称
a.click(); //点击触发下载
window.URL.revokeObjectURL(url); //下载完成进行释放
}
</script>
</html>