base64图片保存到本地(vue)

开发过程中相信不少同猿们都碰到过图片下载的需求。

先说下思路：

        a)、创建a标签；

        b)、把base64转为blob对象；

        c)、通过URL.createObjectURL方法复制给a标签的href属性；

我封装在了一个js文件里，这样如果项目中不止一次用到，就可以直接引入使用。

js

class Download {
    //对外暴露下载接口。
    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) {
        let contentType = code.split(':')[1];
        let raw = window.atob(code);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], { type: contentType });
    }
}
export {Download};

.vue文件里

<script>
    import { Download } from "../../common/js/download";//文件下载
    export default {
        data() {
          return {
                download : new Download(),
          }
        }
        methods:{
            下载
            downLoad(item){
                let downloadName = item.fileName;//文件名
                let imgData = item.content;//base64
                this.download.downloadFile(downloadName,imgData);
            },
        }
    }
</script>