zip Zip 操作

一个基于 jszip 的Zip文件操作。

依赖

yarn add file-saver

由于 jszip 脚本大小以及对 Zip 的操作并不是刚需的原因，因此采用一种延迟加载脚本的形式，可以通过全局配置配置来改变默认 CDN 路径（或使用本地路径），默认情况下使用 //cdn.bootcss.com/jszip/3.3.0/jszip.min.js。

import { ZipModule } from '@delon/abc/zip';

代码演示

解压

读取Zip文件信息（含内容），支持 File、URL 形式

import { Component } from '@angular/core';
import { ZipService } from '@delon/abc/zip';
@Component({
  selector: 'components-zip-read',
  template: `
  <button nz-button (click)="url()">Via Url</button>
  <input type="file" (change)="change($event)" multiple="false" class="ml-sm" />
  <ol>
    <li *ngFor="let i of data">{{i | json}}</li>
  </ol>
  `
})
export class ComponentsZipReadComponent {
  constructor(private zip: ZipService) {}
  data: any;
  private format(data: any) {
    const files = data.files;
    this.data = Object.keys(files).map(key => {
      return {
        name: key,
        dir: files[key].dir,
        date: files[key].date
      };
    });
  }
  url() {
    this.zip.read(`./assets/demo.zip`).then(res => this.format(res));
  }
  change(e: Event) {
    const file = (e.target as HTMLInputElement).files![0];
    this.zip.read(file).then(res => this.format(res));
  }
}

压缩

通过 pushUrl 可以快速将URL资源写入 Zip 实例。

import { NzMessageService } from 'ng-zorro-antd/message';
import { Component } from '@angular/core';
import { ZipService } from '@delon/abc/zip';
import * as JSZip from 'jszip';
@Component({
  selector: 'components-zip-save',
  template: `
  <div *ngIf="instance">
    <button nz-button (click)="add()" [nzType]="'primary'">new</button>
    <button nz-button (click)="download()" class="ml-sm">download</button>
    <nz-table [nzData]="data" [nzFrontPagination]="false" [nzShowPagination]="false" class="mt-sm">
      <thead>
        <tr>
          <th><span>path</span></th>
          <th><span>url</span></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let i of data; let index = index">
          <td><input nz-input [(ngModel)]="i.path" name="path{{index}}"></td>
          <td><input nz-input [(ngModel)]="i.url" name="url{{index}}"></td>
        </tr>
      </tbody>
    </nz-table>
  </div>
  `
})
export class ComponentsZipSaveComponent {
  instance: JSZip | null = null;
  data: { path: string, url: string }[] = [
    { path: 'demo.docx', url: 'https://ng-alain.com/assets/demo.docx' },
    { path: 'img/zorro.svg', url: 'https://ng.ant.design/assets/img/zorro.svg' },
    { path: '小程序标志.zip', url: 'https://wximg.gtimg.com/shake_tv/mina/standard_logo.zip' }
  ];
  constructor(private zip: ZipService, private msg: NzMessageService) {
    this.zip.create().then(ret => this.instance = ret);
  }
  add() {
    this.data.push({ path: '', url: '' });
  }
  download() {
    const promises: Promise<any>[] = [];
    this.data.forEach(item => {
      promises.push(this.zip.pushUrl(this.instance, item.path, item.url));
    });
    Promise.all(promises).then(() => {
      this.zip.save(this.instance).then(() => {
        this.msg.success('download success');
        this.data = [];
      });
    }, (error: any) => {
      console.warn(error);
      this.msg.error(JSON.stringify(error));
    });
  }
}

API

ZipService