vue-canvas-poster生成海报 jsZip打包称压缩包

vue-canvas-poster 文档 

app.js

// 生成海报
import VueCanvasPoster from 'vue-canvas-poster'
Vue.use(VueCanvasPoster)

 文件内引入

import JSZip from 'jszip'
import saveAs from 'jszip/vendor/FileSaver.js'

生成海报后会返回base64的图片。需要转成blob然后加入压缩包

// 下载模板
        download() {
            let zip = new JSZip()
            const img_blob = this.base64ToBlob(this.posterImg)
            zip.file('img.jpg', img_blob)
            this.downloadzip(zip, '商品二维码.zip')
        },
//下载压缩包
        downloadzip(zip, name) {
            zip.generateAsync({
                type: 'blob',
            }).then(function(content) {
                saveAs(content, name)
            })
        },
// base64转blob
        base64ToBlob(base64Data) {
            //console.log(base64Data);//data:image/png;base64,
            var byteString
            if (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1])
            //base64 解码
            else {
                byteString = unescape(base64Data.split(',')[1])
            }
            var mimeString = base64Data
                .split(',')[0]
                .split(':')[1]
                .split(';')[0] //mime类型 -- image/png
            // var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
            // var ia = new Uint8Array(arrayBuffer);//创建视图
            var ia = new Uint8Array(byteString.length) //创建视图
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i)
            }
            var blob = new Blob([ia], {
                type: mimeString,
            })
            return blob
        },