vue 下载base64图片

在Vue中下载Base64图片可以通过以下步骤实现：

1. 首先，将Base64图片数据转换为Blob对象。可以使用`atob`函数将Base64字符串解码为二进制数据，然后创建一个Uint8Array数组，并将解码后的数据存入其中。最后，使用`new Blob()`函数将数组转换为Blob对象。

function base64ToBlob(base64Data) {
  const byteCharacters = atob(base64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: 'image/png' }); // 根据实际图片类型进行修改
}

2. 创建一个下载链接并设置其属性。使用`URL.createObjectURL()`函数创建一个临时的URL，然后将其赋值给下载链接的`href`属性。同时，设置链接的`download`属性为所需的文件名。

function downloadImage(blob, fileName) {
  const url = URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.click();

  URL.revokeObjectURL(url);
}

3. 调用上述函数进行下载。在Vue组件中，可以在需要下载图片的地方调用上述函数，传入Base64数据和文件名。

// 在Vue组件中的方法中调用
downloadBase64Image() {
  const base64Data = '...'; // 替换为实际的Base64图片数据
  const fileName = 'image.png'; // 替换为实际的文件名

  const blob = base64ToBlob(base64Data);
  downloadImage(blob, fileName);
}

这样，当调用`downloadBase64Image`方法时，会触发下载操作，将Base64图片保存为文件。