Question

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

Answer 1

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

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

其中img是您的base64编码图像。

如果您想允许用户指定文件名，请使用download标记的a属性：

<a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>

注意：下载属性不受广泛支持。

Answer 2

它是如此简单，只需使用以下功能：

// 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();
}

Answer 3

    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

Answer 4

我从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();
    });
};

Answer 5

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

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

将要下载的文件名添加到download标记中。

<a download="chart.png" id="downloadPNG">Export img</a>

Answer 6

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

从 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;
}

使用
从 npm 安装 File Saver
```
npm install file-saver
```

导入 File Saver

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

使用 File Saver 下载文件

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

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

Answer 7

您可以尝试以下方法：

    <!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>

download标签使用随附的脚本下载图像。

作为参考，您可以尝试以下URL：http://danml.com/download.html

Answer 8

在我的React App中，我从API获取基本的64张图像，将其存储在全局属性中，并借助<a>标签进行下载。

<a href={`data:application/octet-stream;base64,${this.props.base64image}`} download={"imageName"}>Click to Download the image</a>

Answer 9

使用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

Answer 10

首先：这个问题与浏览器极端相关！我尝试了很多，所以我就这样回答了这个问题：

您应该将base64-Data放在IMG元素的src-Tag中： How to display Base64 images in HTML? 然后，您可以右键单击“图像”，然后在以下浏览器中单击“保存图像...”（或类似名称）：

Chrome 79
Edge 44
Firefox 71
IE 11
Safari 13

在具有Chrome和Firefox的Android上也是如此。在IE 11和Safari 13中，最大的文件工作是23 MB PNG文件。但是Firefox和Chrome也可以工作于86 MB JPEG。

Answer 11

在Angular App中，我从服务器获取了基础64个文件。

在HTML中：-

$result = collect($items)->sortBy('id')->partition(function ($i) {
  return $i['featured'];
})->pipe(function ($groups) {
   return $groups->last()->chunk(2)->reduce(function ($carry, $item) use ($groups) {
      $item->each(function ($i) use ($carry) {
         $carry->push($i);
      });
      
      if ($groups->first()->isNotEmpty()) {
         $carry->push($groups->first()->shift());
      }

      return $carry;
   }, collect());
});

在Ts：-

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

如何下载base64编码的图像？

11 个答案: