JavaScript
zip
Angular2
Angular7


Angularで画像ファイルとテキストファイルをzip圧縮しました。


使ったライブラリ

https://stuk.github.io/jszip/


インストール

npm install jszip


Angularに読み込ませる


angular.json

...

"scripts": [
"node_modules/jszip/dist/jszip.min.js"
],
...


使用する準備


foo.component.ts

declare var JSZip: any; // 宣言する

@Component({
selector: 'app-foo',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.scss']
})
export class FooComponent {

zipFile() {
const zip = new JSZip(); // new

}

}



圧縮して、それをダウンロードしてみる


foo.component.ts

  zipFile() {

const zip = new JSZip();

// 自サイトの画像をURLから読み込む
this.toDataUrl('/assets/img/foo.png', base64image => {
// fooカテゴリの中に画像を保存
// formatは、data_urlからMIME情報を削除したBase64
const base64image2 = base64image.replace(/^data:image\/(png|jpeg);base64,/, '');
const filenameMatch = base64image.match(/^data:image\/(png|jpeg);base64,/);
zip.folder('foo').file(`bar.${filenameMatch[1]}`, base64image2, {base64: true});

// Textをfooカテゴリに保存
zip.folder('foo').file('baz.txt', 'test text\n');

// Zipを作成
zip.generateAsync({type: 'base64'}).then(base64 => {

// Zipを確かめるためにダウンロードしてみる
const a = document.createElement('a');
a.href = `data:application/zip;base64,${base64}`;
a.download = 'foo.zip';

a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
});
}