vuebase64转图片并下载
时间: 2024-04-20 11:20:43 浏览: 114
Vue中可以使用base64将图片转换为可下载的图片。下面是一个简单的示例代码:
```html
<template>
<div>
<button @click="downloadImage">下载图片</button>
</div>
</template>
<script>
export default {
methods: {
downloadImage() {
// 将base64转换为Blob对象
const byteCharacters = atob(this.base64Data);
const byteArrays = [];
for (let i = 0; i < byteCharacters.length; i++) {
byteArrays.push(byteCharacters.charCodeAt(i));
}
const blob = new Blob([new Uint8Array(byteArrays)], { type: 'image/png' });
// 创建下载链接并点击下载
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'image.png';
link.click();
}
}
}
</script>
```
在上面的代码中,我们通过点击按钮触发`downloadImage`方法来下载图片。首先,我们将base64数据转换为Blob对象,然后创建一个下载链接,并设置链接的href属性为Blob对象的URL,最后设置链接的download属性为要下载的文件名,通过调用`click`方法来触发下载。
请注意,上述代码中的`this.base64Data`是一个示例变量,你需要将其替换为你实际使用的base64数据。