需求：下載已生成的二維碼 支持單獨下載 和 批量下載 並且自動打包
效果：點擊下載 => 實現單獨下載 選擇多選框 => 點擊批量下載 => 實現批量現在
用到的依賴：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