js,react 下载图片/文件、打包下载zip文件/图片、base64图片解码不是有效的 Base-64 字符串

下载图片

利用a标签，添加download属性赋予下载功能

<img src={src} style={{width:100,height:100}}/>

<a href={src} download={'下载'}>点击下载图片</a>

如何批量下载多个图片？主动循环触发多个a标签的点击事件即可

打包成zip下载

用到的第三方库

• jszip、 jszip官方api和demo
• file-saver

下载库

• yarn add jszip / npm install jszip
• yarn add file-saver / npm install file-saver

使用 (此处是react版本的，纯js或vue版本的大同小异)

//引入
import JSZip from "jszip";
import { saveAs } from 'file-saver';

//使用
let zip = new JSZip();

//text文本
zip.file("Hello.txt", "Hello World\n"); 

//base64格式的图片
zip.file('exp.png', imgBase64Data,{base64:true}); 

//生成zip文件
zip.generateAsync({type:"blob"})
            .then(function(content) {
                // jszip又使用了file-saver进行导出操作
                saveAs(content, "example.zip");
            });

base64图片解码不是有效的 Base-64 字符串

1. 生成的字符串格式形式如下
   “data:image/png;base64,iVBORw0KGgo…”
2. 在解码的时候我们是不需要下面的部分
   data:image/png;base64,
3. 你进行次截串，取后面部分就行。

标签：文件,zip,saver,base64,jszip,file,下载,图片
来源： https://blog.csdn.net/qq_42339350/article/details/115213017