需求：下载已生成的二维码 支持单独下载 和 批量下载 并且自动打包
效果：点击下载 => 实现单独下载 选择多选框 => 点击批量下载 => 实现批量现在
用到的依赖：jszip 、 file-saver（为了实现打包）
核心：canvas
依赖
npm install jszip
npm install file-saver
在使用到下载的页面 引入
import JSZip from "jszip"
import FileSaver from "file-saver"
核心方法
我们后台返回的图片是XML格式的：
<?xml version="1.0" encoding="UTF-8"?>↵<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200px" height="200px" viewBox="0 0 200 200"><defs><rect id="r0" width="4" height="4" fill="#000000"/></defs><rect x="0" y="0" width="200" height="200" fill="#fefefe"/><use x="34" y="34" xlink:href="#r0"/><use x="38" y="34" xlink:href="#r0"/><use x="42" y="34" xlink:href="#r0"/><use x="46" y="34" xlink:href="#r0"/><use x="50" y="34" xlink:href="#r0"/><use x="54" y="34" xlink:href="#r0"/><use x="58" y="34" xlink:href="#r0"/><use x="74" y="34" xlink:href="#r0"/><use x="82" y="34" xlink:href="#r0"/><use x="98" y="34" xlink:href="#r0"/><use x="106" y="34" xlink:href="#r0"/><use x="110" y="34" xlink:href="#r0"/><use x="114" y="34" xlink:href="#r0"/><use x="118" y="34" xlink:href="#r0"/><use x="122" y="34" xlink:href="#r0"/><use x="126" y="34" xlink:href="#r0"/><use x="138" y="34" xlink:href="#r0"/><use x="142" y="34" xlink:href="#r0"/><use x="146" y="34" xlink:href="#r0"/><use x="150" y="34" xlink:href="#r0"/><use x="154" y="34" xlink:href="#r0"/><use x="158" y="34" xlink:href="#r0"/><use x="162" y="34" xlink:href="#r0"/><use x="34" y="38" xlink:href="#r0"/><use x="58" y="38" xlink:href="#r0"/><use x="66" y="38" xlink:href="#r0"/><use x="74" y="38" xlink:href="#r0"/><use x="86" y="38" xlink:href="#r0"/><use x="94" y="38" xlink:href="#r0"/><use x="102" y="38" xlink:href="#r0"/><use x="118" y="38" xlink:href="#r0"/><use x="130" y="38" xlink:href="#r0"/><use x="138" y="38" xlink:href="#r0"/><use x="162" y="38" xlink:href="#r0"/><use x="34" y="42" xlink:href="#r0"/><use x="42" y="42" xlink:href="#r0"/><use x="46" y="42" xlink:href="#r0"/><use x="50" y="42" xlink:href="#r0"/><use x="58" y="42" xlink:href="#r0"/><use x="82" y="42" xlink:href="#r0"/><use x="90" y="42" xlink:href="#r0"/><use x="94" y="42" xlink:href="#r0"/><use x="106" y="42" xlink:href="#r0"/><use x="118" y="42" xlink:href="#r0"/><use x="122" y="42" xlink:href="#r0"/><use x="126" y="42" xlink:href="#r0"/><use x="130" y="42" xlink:href="#r0"/><use x="138" y="42" xlink:href="#r0"/><use x="146" y="42" xlink:href="#r0"/><use x="150" y="42" xlink:href="#r0"/><use x="154" y="42" xlink:href="#r0"/><use x="162" y="42" xlink:href="#r0"/><use x="34" y="46" xlink:href="#r0"/><use x="42" y="46" xlink:href="#r0"/><use x="46" y="46" xlink:href="#r0"/><use x="50" y="46" xlink:href="#r0"/><use x="58" y="46" xlink:href="#r0"/><use x="66" y="46" xlink:href="#r0"/><use x="70" y="46" xlink:href="#r0"/><use x="74" y="46" xlink:href="#r0"/><use x="82" y="46" xlink:href="#r0"/><use x="86" y="46" xlink:href="#r0"/><use x="94" y="46" xlink:href="#r0"/><use x="98" y="46" xlink:href="#r0"/><use x="102" y="46" xlink:href="#r0"/><use x="106" y="46" xlink:href="#r0"/><use x="110" y="46" xlink:href="#r0"/><use x="114" y="46" xlink:href="#r0"/><use x="122" y="46" xlink:href="#r0"/><use x="138" y="46" xlink:href="#r0"/><use x="146" y="46" xlink:href="#r0"/><use x="150" y="46" xlink:href="#r0"/><use x="154" y="46" xlink:href="#r0"/><use x="162" y="46" xlink:href="#r0"/><use x="34" y="50" xlink:href="#r0"/><use x="42" y="50" xlink:href="#r0"/><use x="46" y="50" xlink:href="#r0"/><use x="50" y="50" xlink:href="#r0"/><use x="58" y="50" xlink:href="#r0"/><use x="70" y="50" xlink:href="#r0"/><use x="90" y="50" xlink:href="#r0"/><use x="110" y="50" xlink:href="#r0"/><use x="118" y="50" xlink:href="#r0"/><use x="126" y="50" xlink:href="#r0"/><use x="138" y="50" xlink:href="#r0"/><use x="146" y="50" xlink:href="#r0"/><use x="150" y="50" xlink:href="#r0"/><use x="154" y="50" xlink:href="#r0"/><use x="162" y="50" xlink:href="#r0"/><use x="34" y="54" xlink:href="#r0"/><use x="58" y="54" xlink:href="#r0"/><use x="66" y="54" xlink:href="#r0"/><use x="70" y="54" xlink:href="#r0"/><use x="78" y="54" xlink:href="#r0"/><use x="82" y="54" xlink:href="#r0"/><use x="86" y="54" xlink:href="#r0"/><use x="94" y="54" xlink:href="#r0"/><use x="106" y="54" xlink:href="#r0"/><use x="114" y="54" xlink:href="#r0"/><use x="130" y="54" xlink:href="#r0"/><use x="138" y="54" xlink:href="#r0"/><use x="162" y="54" xlink:href="#r0"/><use x="34" y="58" xlink:href="#r0"/><use x="38" y="58" xlink:href="#r0"/><use x="42" y="58" xlink:href="#r0"/><use x="46" y="58" xlink:href="#r0"/><use x="50" y="58" xlink:href="#r0"/><use x="54" y="58" xlink:href="#r0"/><use x="58" y="58" xlink:href="#r0"/><use x="66" y="58" xlink:href="#r0"/><use x="74" y="58" xlink:href="#r0"/><use x="82" y="58" xlink:href="#r0"/><use x="90" y="58" xlink:href="#r0"/><use x="98" y="58" xlink:href="#r0"/><use x="106" y="58" xlink:href="#r0"/><use x="114" y="58" xlink:href="#r0"/><use x="122" y="58" xlink:href="#r0"/><use x="130" y="58" xlink:href="#r0"/><use x="138" y="58" xlink:href="#r0"/><use x="142" y="58" xlink:href="#r0"/><use x="146" y="58" xlink:href="#r0"/><use x="150" y="58" xlink:href="#r0"/><use x="154" y="58" xlink:href="#r0"/><use x="158" y="58" xlink:href="#r0"/><use x="162" y="58" xlink:href="#r0"/><use x="70" y="62" xlink:href="#r0"/><use x="74" y="62" xlink:href="#r0"/><use x="78" y="62" xlink:href="#r0"/><use x="90" y="62" xlink:href="#r0"/><use x="94" y="62" xlink:href="#r0"/><use x="110" y="62" xlink:href="#r0"/><use x="114" y="62" xlink:href="#r0"/><use x="118" y="62" xlink:href="#r0"/><use x="126" y="62" xlink:href="#r0"/><use x="34" y="66" xlink:href="#r0"/><use x="38" y="66" xlink:href="#r0"/><use x="42" y="66" xlink:href="#r0"/><use x="46" y="66" xlink:href="#r0"/><use x="50" y="66" xlink:href="#r0"/><use x="58" y="66" xlink:href="#r0"/><use x="62" y="66" xlink:href="#r0"/><use x="66" y="66" xlink:href="#r0"/><use x="70" y="66" xlink:href="#r0"/><use x="78" y="66" xlink:href="#r0"/><use x="82" y="66" xlink:href="#r0"/><use x="86" y="66" xlink:href="#r0"/><use x="98" y="66" xlink:href="#r0"/><use x="102" y="66" xlink:href="#r0"/><use x="106" y="66" xlink:href="#r0"/><use x="114" y="66" xlink:href="#r0"/><use x="122" y="66" xlink:href="#r0"/><use x="126" y="66" xlink:href="#r0"/><use x="130" y="66" xlink:href="#r0"/><use x="134" y="66" xlink:href="#r0"/><use x="142" y="66" xlink:href="#r0"/><use x="150" y="66" xlink:href="#r0"/><use x="158" y="66" xlink:href="#r0"/><use x="34" y="70" xlink:href="#r0"/><use x="38" y="70" xlink:href="#r0"/><use x="46" y="70" xlink:href="#r0"/><use x="62" y="70" xlink:href="#r0"/><use x="74" y="70" xlink:href="#r0"/><use x="82" y="70" xlink:href="#r0"/><use x="90" y="70" xlink:href="#r0"/><use x="110" y="70" xlink:href="#r0"/><use x="126" y="70" xlink:href="#r0"/><use x="130" y="70" xlink:href="#r0"/><use x="138" y="70" xlink:href="#r0"/><use x="158" y="70" xlink:href="#r0"/><use x="162" y="70" xlink:href="#r0"/><use x="34" y="74" xlink:href="#r0"/><use x="42" y="74" xlink:href="#r0"/><use x="54" y="74" xlink:href="#r0"/><use x="58" y="74" xlink:href="#r0"/><use x="62" y="74" xlink:href="#r0"/><use x="66" y="74" xlink:href="#r0"/><use x="74" y="74" xlink:href="#r0"/><use x="94" y="74" xlink:href="#r0"/><use x="98" y="74" xlink:href="#r0"/><use x="114" y="74" xlink:href="#r0"/><use x="118" y="74" xlink:href="#r0"/><use x="130" y="74" xlink:href="#r0"/><use x="138" y="74" xlink:href="#r0"/><use x="142" y="74" xlink:href="#r0"/><use x="146" y="74" xlink:href="#r0"/><use x="34" y="78" xlink:href="#r0"/><use x="42" y="78" xlink:href="#r0"/><use x="46" y="78" xlink:href="#r0"/><use x="50" y="78" xlink:href="#r0"/><use x="62" y="78" xlink:href="#r0"/><use x="66" y="78" xlink:href="#r0"/><use x="94" y="78" xlink:href="#r0"/><use x="106" y="78" xlink:href="#r0"/><use x="114" y="78" xlink:href="#r0"/><use x="118" y="78" xlink:href="#r0"/><use x="122" y="78" xlink:href="#r0"/><use x="126" y="78" xlink:href="#r0"/><use x="130" y="78" xlink:href="#r0"/><use x="134" y="78" xlink:href="#r0"/><use x="154" y="78" xlink:href="#r0"/><use x="34" y="82" xlink:href="#r0"/><use x="38" y="82" xlink:href="#r0"/><use x="46" y="82" xlink:href="#r0"/><use x="54" y="82" xlink:href="#r0"/><use x="58" y="82" xlink:href="#r0"/><use x="62" y="82" xlink:href="#r0"/><use x="66" y="82" xlink:href="#r0"/><use x="70" y="82" xlink:href="#r0"/><use x="74" y="82" xlink:href="#r0"/><use x="86" y="82" xlink:href="#r0"/><use x="94" y="82" xlink:href="#r0"/><use x="102" y="82" xlink:href="#r0"/><use x="110" y="82" xlink:href="#r0"/><use x="114" y="82" xlink:href="#r0"/><use x="122" y="82" xlink:href="#r0"/><use x="134" y="82" xlink:href="#r0"/><use x="146" y="82" xlink:href="#r0"/><use x="38" y="86" xlink:href="#r0"/><use x="46" y="86" xlink:href="#r0"/><use x="50" y="86" xlink:href="#r0"/><use x="66" y="86" xlink:href="#r0"/><use x="78" y="86" xlink:href="#r0"/><use x="82" y="86" xlink:href="#r0"/><use x="90" y="86" xlink:href="#r0"/><use x="98" y="86" xlink:href="#r0"/><use x="106" y="86" xlink:href="#r0"/><use x="110" y="86" xlink:href="#r0"/><use x="126" y="86" xlink:href="#r0"/><use x="138" y="86" xlink:href="#r0"/><use x="150" y="86" xlink:href="#r0"/><use x="158" y="86" xlink:href="#r0"/><use x="162" y="86" xlink:href="#r0"/><use x="34" y="90" xlink:href="#r0"/><use x="50" y="90" xlink:href="#r0"/><use x="54" y="90" xlink:href="#r0"/><use x="58" y="90" xlink:href="#r0"/><use x="66" y="90" xlink:href="#r0"/><use x="70" y="90" xlink:href="#r0"/><use x="82" y="90" xlink:href="#r0"/><use x="86" y="90" xlink:href="#r0"/><use x="94" y="90" xlink:href="#r0"/><use x="98" y="90" xlink:href="#r0"/><use x="102" y="90" xlink:href="#r0"/><use x="114" y="90" xlink:href="#r0"/><use x="122" y="90" xlink:href="#r0"/><use x="142" y="90" xlink:href="#r0"/><use x="146" y="90" xlink:href="#r0"/><use x="150" y="90" xlink:href="#r0"/><use x="158" y="90" xlink:href="#r0"/><use x="34" y="94" xlink:href="#r0"/><use x="50" y="94" xlink:href="#r0"/><use x="66" y="94" xlink:href="#r0"/><use x="82" y="94" xlink:href="#r0"/><use x="94" y="94" xlink:href="#r0"/><use x="98" y="94" xlink:href="#r0"/><use x="106" y="94" xlink:href="#r0"/><use x="118" y="94" xlink:href="#r0"/><use x="134" y="94" xlink:href="#r0"/><use x="138" y="94" xlink:href="#r0"/><use x="142" y="94" xlink:href="#r0"/><use x="154" y="94" xlink:href="#r0"/><use x="34" y="98" xlink:href="#r0"/><use x="54" y="98" xlink:href="#r0"/><use x="58" y="98" xlink:href="#r0"/><use x="86" y="98" xlink:href="#r0"/><use x="94" y="98" xlink:href="#r0"/><use x="102" y="98" xlink:href="#r0"/><use x="106" y="98" xlink:href="#r0"/><use x="110" y="98" xlink:href="#r0"/><use x="114" y="98" xlink:href="#r0"/><use x="122" y="98" xlink:href="#r0"/><use x="130" y="98" xlink:href="#r0"/><use x="134" y="98" xlink:href="#r0"/><use x="146" y="98" xlink:href="#r0"/><use x="158" y="98" xlink:href="#r0"/><use x="34" y="102" xlink:href="#r0"/><use x="38" y="102" xlink:href="#r0"/><use x="46" y="102" xlink:href="#r0"/><use x="50" y="102" xlink:href="#r0"/><use x="54" y="102" xlink:href="#r0"/><use x="62" y="102" xlink:href="#r0"/><use x="78" y="102" xlink:href="#r0"/><use x="82" y="102" xlink:href="#r0"/><use x="90" y="102" xlink:href="#r0"/><use x="98" y="102" xlink:href="#r0"/><use x="110" y="102" xlink:href="#r0"/><use x="114" y="102" xlink:href="#r0"/><use x="122" y="102" xlink:href="#r0"/><use x="126" y="102" xlink:href="#r0"/><use x="138" y="102" xlink:href="#r0"/><use x="150" y="102" xlink:href="#r0"/><use x="158" y="102" xlink:href="#r0"/><use x="162" y="102" xlink:href="#r0"/><use x="42" y="106" xlink:href="#r0"/><use x="46" y="106" xlink:href="#r0"/><use x="58" y="106" xlink:href="#r0"/><use x="82" y="106" xlink:href="#r0"/><use x="90" y="106" xlink:href="#r0"/><use x="94" y="106" xlink:href="#r0"/><use x="98" y="106" xlink:href="#r0"/><use x="114" y="106" xlink:href="#r0"/><use x="118" y="106" xlink:href="#r0"/><use x="130" y="106" xlink:href="#r0"/><use x="134" y="106" xlink:href="#r0"/><use x="150" y="106" xlink:href="#r0"/><use x="158" y="106" xlink:href="#r0"/><use x="46" y="110" xlink:href="#r0"/><use x="50" y="110" xlink:href="#r0"/><use x="74" y="110" xlink:href="#r0"/><use x="82" y="110" xlink:href="#r0"/><use x="94" y="110" xlink:href="#r0"/><use x="114" y="110" xlink:href="#r0"/><use x="118" y="110" xlink:href="#r0"/><use x="122" y="110" xlink:href="#r0"/><use x="126" y="110" xlink:href="#r0"/><use x="134" y="110" xlink:href="#r0"/><use x="150" y="110" xlink:href="#r0"/><use x="154" y="110" xlink:href="#r0"/><use x="38" y="114" xlink:href="#r0"/><use x="42" y="114" xlink:href="#r0"/><use x="46" y="114" xlink:href="#r0"/><use x="58" y="114" xlink:href="#r0"/><use x="74" y="114" xlink:href="#r0"/><use x="86" y="114" xlink:href="#r0"/><use x="94" y="114" xlink:href="#r0"/><use x="98" y="114" xlink:href="#r0"/><use x="102" y="114" xlink:href="#r0"/><use x="142" y="114" xlink:href="#r0"/><use x="146" y="114" xlink:href="#r0"/><use x="158" y="114" xlink:href="#r0"/><use x="34" y="118" xlink:href="#r0"/><use x="38" y="118" xlink:href="#r0"/><use x="46" y="118" xlink:href="#r0"/><use x="66" y="118" xlink:href="#r0"/><use x="70" y="118" xlink:href="#r0"/><use x="74" y="118" xlink:href="#r0"/><use x="78" y="118" xlink:href="#r0"/><use x="82" y="118" xlink:href="#r0"/><use x="90" y="118" xlink:href="#r0"/><use x="106" y="118" xlink:href="#r0"/><use x="110" y="118" xlink:href="#r0"/><use x="114" y="118" xlink:href="#r0"/><use x="126" y="118" xlink:href="#r0"/><use x="138" y="118" xlink:href="#r0"/><use x="150" y="118" xlink:href="#r0"/><use x="158" y="118" xlink:href="#r0"/><use x="162" y="118" xlink:href="#r0"/><use x="34" y="122" xlink:href="#r0"/><use x="46" y="122" xlink:href="#r0"/><use x="50" y="122" xlink:href="#r0"/><use x="58" y="122" xlink:href="#r0"/><use x="70" y="122" xlink:href="#r0"/><use x="82" y="122" xlink:href="#r0"/><use x="86" y="122" xlink:href="#r0"/><use x="94" y="122" xlink:href="#r0"/><use x="98" y="122" xlink:href="#r0"/><use x="114" y="122" xlink:href="#r0"/><use x="122" y="122" xlink:href="#r0"/><use x="130" y="122" xlink:href="#r0"/><use x="134" y="122" xlink:href="#r0"/><use x="138" y="122" xlink:href="#r0"/><use x="146" y="122" xlink:href="#r0"/><use x="150" y="122" xlink:href="#r0"/><use x="158" y="122" xlink:href="#r0"/><use x="34" y="126" xlink:href="#r0"/><use x="50" y="126" xlink:href="#r0"/><use x="66" y="126" xlink:href="#r0"/><use x="74" y="126" xlink:href="#r0"/><use x="82" y="126" xlink:href="#r0"/><use x="94" y="126" xlink:href="#r0"/><use x="110" y="126" xlink:href="#r0"/><use x="118" y="126" xlink:href="#r0"/><use x="126" y="126" xlink:href="#r0"/><use x="130" y="126" xlink:href="#r0"/><use x="138" y="126" xlink:href="#r0"/><use x="142" y="126" xlink:href="#r0"/><use x="150" y="126" xlink:href="#r0"/><use x="154" y="126" xlink:href="#r0"/><use x="34" y="130" xlink:href="#r0"/><use x="54" y="130" xlink:href="#r0"/><use x="58" y="130" xlink:href="#r0"/><use x="70" y="130" xlink:href="#r0"/><use x="74" y="130" xlink:href="#r0"/><use x="86" y="130" xlink:href="#r0"/><use x="90" y="130" xlink:href="#r0"/><use x="94" y="130" xlink:href="#r0"/><use x="98" y="130" xlink:href="#r0"/><use x="102" y="130" xlink:href="#r0"/><use x="106" y="130" xlink:href="#r0"/><use x="110" y="130" xlink:href="#r0"/><use x="122" y="130" xlink:href="#r0"/><use x="130" y="130" xlink:href="#r0"/><use x="134" y="130" xlink:href="#r0"/><use x="138" y="130" xlink:href="#r0"/><use x="142" y="130" xlink:href="#r0"/><use x="146" y="130" xlink:href="#r0"/><use x="150" y="130" xlink:href="#r0"/><use x="162" y="130" xlink:href="#r0"/><use x="66" y="134" xlink:href="#r0"/><use x="70" y="134" xlink:href="#r0"/><use x="78" y="134" xlink:href="#r0"/><use x="82" y="134" xlink:href="#r0"/><use x="110" y="134" xlink:href="#r0"/><use x="114" y="134" xlink:href="#r0"/><use x="118" y="134" xlink:href="#r0"/><use x="126" y="134" xlink:href="#r0"/><use x="130" y="134" xlink:href="#r0"/><use x="146" y="134" xlink:href="#r0"/><use x="154" y="134" xlink:href="#r0"/><use x="162" y="134" xlink:href="#r0"/><use x="34" y="138" xlink:href="#r0"/><use x="38" y="138" xlink:href="#r0"/><use x="42" y="138" xlink:href="#r0"/><use x="46" y="138" xlink:href="#r0"/><use x="50" y="138" xlink:href="#r0"/><use x="54" y="138" xlink:href="#r0"/><use x="58" y="138" xlink:href="#r0"/><use x="66" y="138" xlink:href="#r0"/><use x="70" y="138" xlink:href="#r0"/><use x="74" y="138" xlink:href="#r0"/><use x="94" y="138" xlink:href="#r0"/><use x="98" y="138" xlink:href="#r0"/><use x="102" y="138" xlink:href="#r0"/><use x="106" y="138" xlink:href="#r0"/><use x="114" y="138" xlink:href="#r0"/><use x="126" y="138" xlink:href="#r0"/><use x="130" y="138" xlink:href="#r0"/><use x="138" y="138" xlink:href="#r0"/><use x="146" y="138" xlink:href="#r0"/><use x="154" y="138" xlink:href="#r0"/><use x="158" y="138" xlink:href="#r0"/><use x="34" y="142" xlink:href="#r0"/><use x="58" y="142" xlink:href="#r0"/><use x="70" y="142" xlink:href="#r0"/><use x="74" y="142" xlink:href="#r0"/><use x="78" y="142" xlink:href="#r0"/><use x="82" y="142" xlink:href="#r0"/><use x="90" y="142" xlink:href="#r0"/><use x="110" y="142" xlink:href="#r0"/><use x="114" y="142" xlink:href="#r0"/><use x="118" y="142" xlink:href="#r0"/><use x="122" y="142" xlink:href="#r0"/><use x="126" y="142" xlink:href="#r0"/><use x="130" y="142" xlink:href="#r0"/><use x="146" y="142" xlink:href="#r0"/><use x="150" y="142" xlink:href="#r0"/><use x="154" y="142" xlink:href="#r0"/><use x="158" y="142" xlink:href="#r0"/><use x="34" y="146" xlink:href="#r0"/><use x="42" y="146" xlink:href="#r0"/><use x="46" y="146" xlink:href="#r0"/><use x="50" y="146" xlink:href="#r0"/><use x="58" y="146" xlink:href="#r0"/><use x="66" y="146" xlink:href="#r0"/><use x="70" y="146" xlink:href="#r0"/><use x="86" y="146" xlink:href="#r0"/><use x="90" y="146" xlink:href="#r0"/><use x="94" y="146" xlink:href="#r0"/><use x="102" y="146" xlink:href="#r0"/><use x="106" y="146" xlink:href="#r0"/><use x="110" y="146" xlink:href="#r0"/><use x="114" y="146" xlink:href="#r0"/><use x="122" y="146" xlink:href="#r0"/><use x="130" y="146" xlink:href="#r0"/><use x="134" y="146" xlink:href="#r0"/><use x="138" y="146" xlink:href="#r0"/><use x="142" y="146" xlink:href="#r0"/><use x="146" y="146" xlink:href="#r0"/><use x="162" y="146" xlink:href="#r0"/><use x="34" y="150" xlink:href="#r0"/><use x="42" y="150" xlink:href="#r0"/><use x="46" y="150" xlink:href="#r0"/><use x="50" y="150" xlink:href="#r0"/><use x="58" y="150" xlink:href="#r0"/><use x="66" y="150" xlink:href="#r0"/><use x="70" y="150" xlink:href="#r0"/><use x="78" y="150" xlink:href="#r0"/><use x="82" y="150" xlink:href="#r0"/><use x="98" y="150" xlink:href="#r0"/><use x="110" y="150" xlink:href="#r0"/><use x="126" y="150" xlink:href="#r0"/><use x="130" y="150" xlink:href="#r0"/><use x="134" y="150" xlink:href="#r0"/><use x="146" y="150" xlink:href="#r0"/><use x="150" y="150" xlink:href="#r0"/><use x="154" y="150" xlink:href="#r0"/><use x="34" y="154" xlink:href="#r0"/><use x="42" y="154" xlink:href="#r0"/><use x="46" y="154" xlink:href="#r0"/><use x="50" y="154" xlink:href="#r0"/><use x="58" y="154" xlink:href="#r0"/><use x="66" y="154" xlink:href="#r0"/><use x="70" y="154" xlink:href="#r0"/><use x="86" y="154" xlink:href="#r0"/><use x="94" y="154" xlink:href="#r0"/><use x="106" y="154" xlink:href="#r0"/><use x="114" y="154" xlink:href="#r0"/><use x="122" y="154" xlink:href="#r0"/><use x="126" y="154" xlink:href="#r0"/><use x="130" y="154" xlink:href="#r0"/><use x="134" y="154" xlink:href="#r0"/><use x="138" y="154" xlink:href="#r0"/><use x="150" y="154" xlink:href="#r0"/><use x="154" y="154" xlink:href="#r0"/><use x="158" y="154" xlink:href="#r0"/><use x="34" y="158" xlink:href="#r0"/><use x="58" y="158" xlink:href="#r0"/><use x="66" y="158" xlink:href="#r0"/><use x="70" y="158" xlink:href="#r0"/><use x="82" y="158" xlink:href="#r0"/><use x="90" y="158" xlink:href="#r0"/><use x="98" y="158" xlink:href="#r0"/><use x="106" y="158" xlink:href="#r0"/><use x="114" y="158" xlink:href="#r0"/><use x="118" y="158" xlink:href="#r0"/><use x="122" y="158" xlink:href="#r0"/><use x="142" y="158" xlink:href="#r0"/><use x="146" y="158" xlink:href="#r0"/><use x="150" y="158" xlink:href="#r0"/><use x="154" y="158" xlink:href="#r0"/><use x="34" y="162" xlink:href="#r0"/><use x="38" y="162" xlink:href="#r0"/><use x="42" y="162" xlink:href="#r0"/><use x="46" y="162" xlink:href="#r0"/><use x="50" y="162" xlink:href="#r0"/><use x="54" y="162" xlink:href="#r0"/><use x="58" y="162" xlink:href="#r0"/><use x="66" y="162" xlink:href="#r0"/><use x="70" y="162" xlink:href="#r0"/><use x="74" y="162" xlink:href="#r0"/><use x="86" y="162" xlink:href="#r0"/><use x="94" y="162" xlink:href="#r0"/><use x="98" y="162" xlink:href="#r0"/><use x="102" y="162" xlink:href="#r0"/><use x="106" y="162" xlink:href="#r0"/><use x="110" y="162" xlink:href="#r0"/><use x="122" y="162" xlink:href="#r0"/><use x="126" y="162" xlink:href="#r0"/><use x="130" y="162" xlink:href="#r0"/><use x="134" y="162" xlink:href="#r0"/><use x="138" y="162" xlink:href="#r0"/><use x="146" y="162" xlink:href="#r0"/><use x="158" y="162" xlink:href="#r0"/></svg>
如果是使用img标签展示，需要转为base64编码格式，如果没有特殊要求，使用v-html直接绑定在标签上输出就可以了
圆规正传～
如果是下载单张，就不需要压缩了，直接实现下载就好啦，所以先说简单的单张下载
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(res.data[0].qr_code))); //给图片对象写入base64编码的svg流
var canvas = document.createElement('canvas'); //准备空画布
canvas.width = 200 //设置canvas的尺寸
canvas.height = 200
var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
image.onload = () => { //image.onload图片加载完成后才开始绘制canvas 否则会出现下载的图片为空的清空
context.drawImage(image, 0, 0); //image是要绘制的图片路径（实际是一堆path坐标）
var a = document.createElement('a');
a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据
a.download = '二维码'; //设定下载名称
a.click(); //点击触发下载
}
以上是下载单张的代码，里面有我认为比较详细的注释 尤其是image.onload 一定不要忘记
批量下载并打包
代码：
downLoad(id) { //配合我的方法使用的参数 不需要直接去掉 var blogTitle = '二维码包' //图片压缩包名称 var zip = new JSZip() var imgs = zip.folder(blogTitle) var baseList = [] //需要压缩图片的路径 var imgNameList = [] //单张图片名称 var arr = [] ajax.post('/qrCode/download', { id: id }).then(res => { for (var i = 0; i < res.data.length; i++) { imgNameList.push(res.data[i].name) let code = '' code = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(res.data[i].qr_code))) arr.push(code) let image = new Image(); image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(res.data[i].qr_code))); //给图片对象写入base64编码的svg流 var canvas = document.createElement('canvas'); //准备空画布 canvas.width = 200 canvas.height = 200 var context = canvas.getContext('2d'); //取得画布的2d绘图上下文 image.onload = function() { //需要图片加载完成在执行canvas绘制 context.drawImage(image, 0, 0, 100, 100); let url = canvas.toDataURL(); // 得到图片的base64编码数据 canvas.toDataURL('image/png'); baseList.push(url.substring(22)); // 去掉base64编码前的 data:image/png;base64, if (baseList.length === arr.length && baseList.length > 0) { for (let k = 0; k < baseList.length; k++) { imgs.file(imgNameList[k] + '.png', baseList[k], { //设置单张图片名称 base64: true }) } zip.generateAsync({ type: 'blob' }).then(function(content) { // 调用 FileSaver.js FileSaver.saveAs(content, blogTitle + '.zip'); }); } image.src = arr[i]; } } }) }
与单张下载大同小异，不同的是多了压缩的部分
参考：https://blog.csdn.net/wzp6010625/article/details/100918051