vue——批量下载图片

需求：下载已生成的二维码 支持单独下载 和 批量下载 并且自动打包

效果：点击下载 => 实现单独下载  选择多选框 => 点击批量下载 => 实现批量现在

 用到的依赖：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>

View Code

 如果是使用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