【vue下载base64格式的图片】

1、创建downLoad.js文件

class Download {
    //引用调用的方法,传入文件名称和bas64格式的文件
    downloadFile(fileName, content) {
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content); //new Blob([content]);
        
        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));//兼容火狐
    }
 
    base64ToBlob(code) {
        var arr = code.split(',')
        // 图片格式
        var mime =  arr[0].match(/:(.*?);/)[1]
        // 获取,之后的base64的编码
        var bstr = window.atob(arr[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while (n--) {
            u8
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue下载Base64图片可以通过以下步骤实现: 1. 首先,将Base64图片数据转换为Blob对象。可以使用`atob`函数将Base64字符串解码为二进制数据,然后创建一个Uint8Array数组,并将解码后的数据存入其中。最后,使用`new Blob()`函数将数组转换为Blob对象。 ```javascript 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`属性为所需的文件名。 ```javascript 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数据和文件名。 ```javascript // 在Vue组件中的方法中调用 downloadBase64Image() { const base64Data = '...'; // 替换为实际的Base64图片数据 const fileName = 'image.png'; // 替换为实际的文件名 const blob = base64ToBlob(base64Data); downloadImage(blob, fileName); } ``` 这样,当调用`downloadBase64Image`方法时,会触发下载操作,将Base64图片保存为文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值