63

我有一个来自服务器的 base64 编码图像，我想通过 JavaScript 强制下载。有可能吗？

4

10 回答 10

85

  1. 如果您想使用 JavaScript（没有任何后端）下载它，请使用：

    window.location.href = 'data:application/octet-stream;base64,' + img;

    img您的 base64 编码图像在哪里。

  2. 如果要允许用户指定文件名，请使用标签的download属性：a

    <a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>
    • 注意：非常旧的浏览器不支持下载属性
于 2012-12-23T12:49:26.230 回答
65

使用 Javascript 执行此操作的简单方法...

    var a = document.createElement("a"); //Create <a>
    a.href = "data:image/png;base64," + ImageBase64; //Image Base64 Goes here
    a.download = "Image.png"; //File name Here
    a.click(); //Downloaded file

于 2019-11-12T16:55:00.557 回答
29

就是这么简单，只需使用下面的函数：

// Parameters:
// contentType: The content type of your file. 
//              its like application/pdf or application/msword or image/jpeg or
//              image/png and so on
// base64Data: Its your actual base64 data
// fileName: Its the file name of the file which will be downloaded. 

function downloadBase64File(contentType, base64Data, fileName) {
     const linkSource = `data:${contentType};base64,${base64Data}`;
     const downloadLink = document.createElement("a");
     downloadLink.href = linkSource;
     downloadLink.download = fileName;
     downloadLink.click();
}
于 2020-03-17T09:34:02.070 回答
9

我从 Chrome 如何截取整页屏幕截图的源代码中找到了这个解决方案。

const base64string = "";
const pageImage = new Image();
pageImage.src = 'data:image/png;base64,' + base64string;
pageImage.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = pageImage.naturalWidth;
    canvas.height= pageImage.naturalHeight;

    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(pageImage, 0, 0);
    console.log(canvas, pageImage)
    saveScreenshot(canvas);
}
function saveScreenshot(canvas) {
    let fileName = "image"
    const link = document.createElement('a');
    link.download = fileName + '.png';
    console.log(canvas)
    canvas.toBlob(function(blob) {
        console.log(blob)
        link.href = URL.createObjectURL(blob);
        link.click();
    });
};
于 2019-08-07T01:46:52.480 回答
6

你可以试试这个：

    <!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Download Text File DataURL Demo</title>
        <style>
            body{ font: menu; }
        </style>
        <script src='//js.zapjs.com/js/download.js'></script>
    </head>
    <body>
        <h1>Download Text File DataURL Demo</h1>
        <main></main>
        <script>
            download("data:application/octet-stream;base64,YOUR BASE64URL", "dlDataUrlText.jpeg", "application/octet-stream;base64");
        </script>
    </body>

</html>

下载标签使用包含的脚本下载图像。

作为参考，你可以试试这个网址：http ://danml.com/download.html

于 2018-11-16T12:29:06.927 回答
6

在我的 Angular 应用程序中，我从服务器获取 base 64 文件。

在 HTML 中：-

<button type="button" (click)="downloadFile(fileName,base64data,fileType)"></button>

在 Ts 中：-

  downloadFile(fileName:string,data: any,fileFormat:string): void {
    const linkSource = 'data:'+fileFormat+';base64'+data;
    const downloadLink = document.createElement("a");
    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
}
于 2020-11-25T07:26:46.387 回答
5

我不知道是否迟到回答这个问题，但我认为更好的解决方案可能是这个。

  1. 从 base64string 创建一个文件

    const convertBase64ToFile = (base64String, fileName) => {
     let arr = base64String.split(',');
     let mime = arr[0].match(/:(.*?);/)[1];
     let bstr = atob(arr[1]);
     let n = bstr.length;
     let uint8Array = new Uint8Array(n);
     while (n--) {
        uint8Array[n] = bstr.charCodeAt(n);
     }
     let file = new File([uint8Array], fileName, { type: mime });
     return file;
}

  2. 从 npm安装文件保护程序

    npm install file-saver

  3. 导入文件保护程序

    const { saveAs } = require('file-saver');
/// OR 
import { saveAs } from 'file-saver';

  4. 使用文件保护程序下载文件

    const downloadBase64Data = (base64String, fileName) => {
     let file = convertBase64ToFile(base64String, fileName);
     saveAs(file, fileName);
}

如果此答案对您有用，请点赞并将其标记为正确，以帮助其他人轻松找到它

于 2021-04-02T13:47:11.530 回答
2

如果您已经在 base64 中拥有它，请在 base64 前面添加图像标签。将其附加到元素

png64 = "data:image/" + png64; 
$('#downloadPNG').attr('href', png64);

将下载时所需的文件名添加到download标签。

<a download="chart.png" id="downloadPNG">Export img</a>
于 2019-02-08T15:34:57.290 回答
1

在我的 React 应用程序中，我从 API 获取了 base 64 图像，我将它存储在一个全局属性中，并在<a>标签的帮助下下载了它。

<a href={`data:application/octet-stream;base64,${this.props.base64image}`} download={"imageName"}>Click to Download the image</a>
于 2019-09-06T09:54:04.273 回答
0

起初：这个问题非常依赖于浏览器！我尝试了很多，所以我想这样回答这个问题：

您应该将 base64-Data 放在 IMG-Element 的 src-Tag 中： 如何在 HTML 中显示 Base64 图像？ 然后您可以在这些浏览器中右键单击图像并单击“保存图像...”（或类似内容）：

  • 铬 79
  • 边缘 44
  • 火狐 71
  • 即 11
  • 野生动物园 13

同样在带有 Chrome 和 Firefox 的 Android 上。在 IE 11 和 Safari 13 中工作的最大文件是 23 MB PNG-File。但 Firefox 和 Chrome 也适用于 86 MB JPEG。

于 2019-12-18T13:39:29.773 回答