js如何实现base64转文件下载保存到本地

[自渡96]

服务器返回的文件就是base64格式的，要怎么实现转文件后下载保存到本地

[cn00439805]

function dataURLtoBlob(dataurl) {
    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 Blob([u8arr], { type: mime });
}

function downloadFile(url,name='What's the fuvk'){
    var a = document.createElement("a")
    a.setAttribute("href",url)
    a.setAttribute("download",name)
    a.setAttribute("target","_blank")
    let clickEvent = document.createEvent("MouseEvents");
    clickEvent.initEvent("click", true, true);  
    a.dispatchEvent(clickEvent);
}

function downloadFileByBase64(base64,name){
    var myBlob = dataURLtoBlob(base64)
    var myUrl = URL.createObjectURL(myBlob)
    downloadFile(myUrl,name)
}

downloadFileByBase64('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAACXBIWXMAAAsSAAALEgHS3X78AAAEk0lEQVRYhbVXS09bRxQ+N3bNRdjEai3UYiGMYdFFUKzykKoKSpWN1QU1YtVVCavu4vML4vQPDFGURRYosIGtQxeVF8hG2cGiICMUVUh1awlSQaldVLBsB1fncsaM773Dq80nWXPndeabOd85MzYajQbcBogYBIAYAGwKIUq3MsK442i5BhBxDgD+AoAslVy/NW58Eog4AwAvHR0AD4UQC47Wa+A2J5HgcgsA+rgkzDhGvkcSQeWbtLDpGHFDeHXDWXi06wiLL81dVH4JAPcBoAAAd7k9p8yd4XnUn75KuK6aYAI5XkhiSwgR437y/XdK3yshREI3DwAmLiOic8ecYmiNy/uImKQPIQTt9AW3vyAC/D3jNo/taaEjEZGHIoSYoJ1yPaGMeWsr1f5XPA9t9lyh1YTcGSKS8B5wvQAXPo+xMGNcT3M/6eUBIk5cN2J0JBYU8WWV9k8RkRbqVdq+4R8d+R63+W3zLnWHqzB5t+T/FKv/TwD4SOn+jQ1v8okkmLSEHF8mG0KI65FARGnMEVas+t8BIAAAiyxMB+lwOCympqagv79fJZtExJwS7mS7JbdYJFxCrsxhtQkXd8UjGYqOrZwjUq1Wf/H5fB/YO1ZWVirZbNZUmlo24imXyyQgoTCnXdOEzzOZzJtMJkPsvweAjwHg23g8/ta+CGPO4/F85mglAfX2eldXV1X7sUwmsxWPx98AhyiRAE4q5JKHPFeKMitj336MNsRkdWNjA5aXl5u9pmnC+Pj4cx4j75rm+DscZsD+iiik6pxw1vhbakOHZpZcWlqC9fV1KBQKFdl2cHAQ54UdOcPL8S2j4Gel77kQIsmL51j9CQ5fiQm7QRV+v/8PGc5dXV39tVrNCtu9vb2/T05Omna8QogCJ5a0Ev9PJQGGzBspRCR1R2zjr0Qi0aLnTk5kKXkS0teOY+KwDXI+KNKiHR0drxuNRq9hGIGrFq7X6z5H4wUeczpYcM2Y7Pu0LQERDoeHh+8ZhtFs2NnZqRaLRdfFstnsJ6FQqNLW1nZgGMaZaZrekZGRsDIkpSVBCUYhUFbeDD8NDQ19AQBRqmxvb8P8/LwrAQKJk8O9R7bt7+9XJicnZc6w3KkjIQW3yIReA8A98mVPT8+PnLhgYGAABgcH4fT0tGXy7u6uVYbDYWhvb2/pGxsbO2FicoNaEhJSE++4XmI3WSQo/mdnZx2TEM9v8Onp6WpfX5/9pD5Uvq3Xmu49IZ9qFPu/KjmAoiRXq9WWHTNccHZ2pnUVJy0rAl1PQgiRYnE+UpqfCCFyiEhR9DW5YXR01DpuwzDq0WjU1ZZtUZkYc3wLl7QkmAjdfimXf1nE/m4+n4d8Pr/IFx/lG4eNzs7OoiLKpPoYVqElwURKLhNlzn/CJ0ax/rhardZ9Pp9ljwR5dHQEgUDA7zDqgktJaCCfcEkmYPn18PCw1N3dHYJzYZ4eHx//Y5pmSDFRcDenF+ZlmFNyx0uZQyqVyjM5x+PxtAeDQZXA2v9Kgq9z+QJf4/KraDT6A905jgnngtQ9hCxo35j/AfKZSLDuhqtsvQ8SNwMA/AsjMqbmUsz4jAAAAABJRU5ErkJggg==')

[cn00439805]

2楼漏了个符号，现补上

function dataURLtoBlob(dataurl) {
    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 Blob([u8arr], { type: mime });
}

function downloadFile(url,name='What\'s the fuvk'){
    var a = document.createElement("a")
    a.setAttribute("href",url)
    a.setAttribute("download",name)
    a.setAttribute("target","_blank")
    let clickEvent = document.createEvent("MouseEvents");
    clickEvent.initEvent("click", true, true);  
    a.dispatchEvent(clickEvent);
}

function downloadFileByBase64(base64,name){
    var myBlob = dataURLtoBlob(base64)
    var myUrl = URL.createObjectURL(myBlob)
    downloadFile(myUrl,name)
}

downloadFileByBase64('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAACXBIWXMAAAsSAAALEgHS3X78AAAEk0lEQVRYhbVXS09bRxQ+N3bNRdjEai3UYiGMYdFFUKzykKoKSpWN1QU1YtVVCavu4vML4vQPDFGURRYosIGtQxeVF8hG2cGiICMUVUh1awlSQaldVLBsB1fncsaM773Dq80nWXPndeabOd85MzYajQbcBogYBIAYAGwKIUq3MsK442i5BhBxDgD+AoAslVy/NW58Eog4AwAvHR0AD4UQC47Wa+A2J5HgcgsA+rgkzDhGvkcSQeWbtLDpGHFDeHXDWXi06wiLL81dVH4JAPcBoAAAd7k9p8yd4XnUn75KuK6aYAI5XkhiSwgR437y/XdK3yshREI3DwAmLiOic8ecYmiNy/uImKQPIQTt9AW3vyAC/D3jNo/taaEjEZGHIoSYoJ1yPaGMeWsr1f5XPA9t9lyh1YTcGSKS8B5wvQAXPo+xMGNcT3M/6eUBIk5cN2J0JBYU8WWV9k8RkRbqVdq+4R8d+R63+W3zLnWHqzB5t+T/FKv/TwD4SOn+jQ1v8okkmLSEHF8mG0KI65FARGnMEVas+t8BIAAAiyxMB+lwOCympqagv79fJZtExJwS7mS7JbdYJFxCrsxhtQkXd8UjGYqOrZwjUq1Wf/H5fB/YO1ZWVirZbNZUmlo24imXyyQgoTCnXdOEzzOZzJtMJkPsvweAjwHg23g8/ta+CGPO4/F85mglAfX2eldXV1X7sUwmsxWPx98AhyiRAE4q5JKHPFeKMitj336MNsRkdWNjA5aXl5u9pmnC+Pj4cx4j75rm+DscZsD+iiik6pxw1vhbakOHZpZcWlqC9fV1KBQKFdl2cHAQ54UdOcPL8S2j4Gel77kQIsmL51j9CQ5fiQm7QRV+v/8PGc5dXV39tVrNCtu9vb2/T05Omna8QogCJ5a0Ev9PJQGGzBspRCR1R2zjr0Qi0aLnTk5kKXkS0teOY+KwDXI+KNKiHR0drxuNRq9hGIGrFq7X6z5H4wUeczpYcM2Y7Pu0LQERDoeHh+8ZhtFs2NnZqRaLRdfFstnsJ6FQqNLW1nZgGMaZaZrekZGRsDIkpSVBCUYhUFbeDD8NDQ19AQBRqmxvb8P8/LwrAQKJk8O9R7bt7+9XJicnZc6w3KkjIQW3yIReA8A98mVPT8+PnLhgYGAABgcH4fT0tGXy7u6uVYbDYWhvb2/pGxsbO2FicoNaEhJSE++4XmI3WSQo/mdnZx2TEM9v8Onp6WpfX5/9pD5Uvq3Xmu49IZ9qFPu/KjmAoiRXq9WWHTNccHZ2pnUVJy0rAl1PQgiRYnE+UpqfCCFyiEhR9DW5YXR01DpuwzDq0WjU1ZZtUZkYc3wLl7QkmAjdfimXf1nE/m4+n4d8Pr/IFx/lG4eNzs7OoiLKpPoYVqElwURKLhNlzn/CJ0ax/rhardZ9Pp9ljwR5dHQEgUDA7zDqgktJaCCfcEkmYPn18PCw1N3dHYJzYZ4eHx//Y5pmSDFRcDenF+ZlmFNyx0uZQyqVyjM5x+PxtAeDQZXA2v9Kgq9z+QJf4/KraDT6A905jgnngtQ9hCxo35j/AfKZSLDuhqtsvQ8SNwMA/AsjMqbmUsz4jAAAAABJRU5ErkJggg==')

[jio可]

api直接返回文件流，点击请求api直接就下载到本地了

[自渡96]

引用 7 楼 cn00439805 的回复:

没有前缀的话，你确定后端传给你的是什么类型的文件 比如是png的话，上面代码里的mime就硬编码:image/png 如果是gif的话，上面代码里的mime就硬编码:image/gif

好的明白了，感谢

[自渡96]

[quote=引用 3 楼 cn00439805 的回复:] 如果返回base64数据没有前缀data:image/png;base64,的话，改怎么改啊，你这代码可以用，我看不懂不会改

[jio可]

后端可以直接返回文件流实现下载，为何要前端转文件实现下载，这不是做了很多多余的操作吗

[自渡96]

引用 5 楼 三岁打酱油 的回复:

后端可以直接返回文件流实现下载，为何要前端转文件实现下载，这不是做了很多多余的操作吗

别人的接口长这样，我能怎么办，我也很绝望

[cn00439805]

没有前缀的话，你确定后端传给你的是什么类型的文件 比如是png的话，上面代码里的mime就硬编码:image/png 如果是gif的话，上面代码里的mime就硬编码:image/gif

[yeafel]

牛逼，我拿去当工具export 使用，直接就成功了。谢谢3楼

[fonglibin]

非常感谢！之前一直在想如何调接口实现下载文件，按你提供的代码一下就成功了