js,react 下載圖像/檔案、打包下載zip檔案/圖像、base64圖像解碼不是有效的 Base-64 字串

下載圖像

利用a標籤，新增download屬性賦予下載功能

1
2
3
<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版本的大同小異)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//引入
import JSZip from "jszip";
import { saveAs } from 'file-saver';

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

//text文字
zip.file("Hello.txt", "Hello World
");

//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. 你進行次截串，取後面部分就行。