vue中将后端返回的二维码字符串生成二维码并下载

开发中遇到下载二维码，二维码是后端同学传过来的，需要解析后下载到本地。还是老规矩，看代码。

<el-button class="item-info-type-operation" type="text" @click="downloadShow(item)">下载二维码</el-button>

// 下载二维码
 downloadShow(item) {
     const that = this;
     download(item.activityCode).then((data) => {
         console.log(data);
         if (!data) {
             this.$message.warning("文件下载失败")
             return
         }
         if (typeof window.navigator.msSaveBlob !== 'undefined') {
             window.navigator.msSaveBlob(new Blob([data], { type: 'image/jpg' }), QRCode + '.jpg')
         } else {
             let url = window.URL.createObjectURL(new Blob([data], { type: 'image/jpg' }))
             console.log(url);
             let link = document.createElement('a')
             console.log(link);
             link.style.display = 'none'
             link.href = url
             link.setAttribute('download', 'QRCode.jpg')
             document.body.appendChild(link)
             link.click()
             document.body.removeChild(link); //下载完成移除元素
             window.URL.revokeObjectURL(url); //释放掉blob对象

         }
     })
 },

这样的话图片是可以下载，但是下载后的图片是没有二维码的。重点是需要在api接口中加一个responseType:‘blob’

export function getqrCode(activityCode){
    return request({
        url:`/answeronline/tv/download/${activityCode}`,
        method:'get',
        responseType:'blob'
    })
}

这样就能下载二维码，并且图片中也能显示二维码