在 JavaScript 中从 Base64 字符串创建 BLOB

** 分享链接:https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript/16245768#16245768**

不太好 兼容性有问题

window.saveFile = function (bytesBase64, mimeType, fileName) {
var fileUrl = "data:" + mimeType + ";base64," + bytesBase64;
fetch(fileUrl)
    .then(response => response.blob())
    .then(blob => {
        var link = window.document.createElement("a");
        link.href = window.URL.createObjectURL(blob, { type: mimeType });
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });
}
一个下载文件的例子
function onDownload() {
    const config = 'hello world!!';
    let fileUrl = createDownloadLink(base64(config), 'text/plain', 'kubectl.conf');
    if (fileUrl) {
        const a = document.createElement('a');
        a.setAttribute('href', fileUrl);
        a.setAttribute('download', 'kubectl.conf');
        document.body.appendChild(a);
        a.click();
        a.remove();
    }
}
function base64(s) {
    return window.btoa(unescape(encodeURIComponent(s)));
}
function createDownloadLink(base64data, exportType, fileName) {
    let blob;
    if (window.navigator.msSaveBlob) {
        blob = b64toBlob(base64data, exportType);
        window.navigator.msSaveBlob(blob, fileName);
        return false;
    }
    else if (window.URL.createObjectURL) {
        blob = b64toBlob(base64data, exportType);
        return window.URL.createObjectURL(blob);
    }
    return 'data:' + exportType + ';base64,' + base64data;
}
function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
    // function taken from http://stackoverflow.com/a/16245768/2591950
    // author Jeremy Banks http://stackoverflow.com/users/1114/jeremy-banks
    let byteCharacters = window.atob(b64Data);
    let byteArrays = [];
    let offset;
    for (offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        let slice = byteCharacters.slice(offset, offset + sliceSize);
        let byteNumbers = new Array(slice.length);
        let i;
        for (i = 0; i < slice.length; i = i + 1) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        let byteArray = new window.Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    let blob = new window.Blob(byteArrays, {
        type: contentType
    });
    return blob;
}
另一个例子
const str = `
apiVersion: v1
clusters:
- cluster:
    certificate-authority-data: aaaaaa
    server: bbbbbb
  name: kubernetes
contexts:
- context:
    cluster: kubernetes
    user: cccccc
  name: dddddd
current-context: eeeeee
kind: Config
preferences: {}
users:
- name: ffffff
  user:
    client-certificate-data: aaa
    client-key-data: aaaaa
`
    const btn = document.querySelector('.btn');
    btn.onclick = function() {
        download_txt('aaa.conf', str);
    }

    function download_txt(filename, text) {
        var pom = document.createElement('a');
        pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        pom.setAttribute('download', filename);
        if (document.createEvent) {
            var event = document.createEvent('MouseEvents');
            event.initEvent('click', true, true);
            pom.dispatchEvent(event);
        } else {
            pom.click();
        }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值