JSZIP使用教程

先给上jszip的 github地址https://stuk.github.io/jszip


先来一个html的测试文件:

<HTML>
<HEAD>
    <script type="text/javascript" src="jszip.js"></script>
</HEAD>
 
<BODY>
    <input type="button" onclick="create_zip()" value="Create Zip"/>
</BODY>
<SCRIPT>
 
function create_zip() {
    var zip = new JSZip();
    zip.file("hello1.txt", "Hello First World\n");
    zip.file("hello2.txt", "Hello Second World\n");
    zip.generateAsync({type:"base64"})
	.then(function(content) {
		console.log(content);
		location.href="data:application/zip;base64," + content;
	});
}
 
</SCRIPT>
</HTML>


官网上有一些基本教程,和API,另外自己也整理了一些更详细的代码

import JSZip = require('jszip');    
import { Readable } from "stream";    
const SEVERITY = {    
	DEBUG: 0,    
	INFO: 1,    
	WARN: 2,    
	ERROR: 3,    
	FATAL: 4    
};    
function createTestZip(): JSZip {    
	const zip = new JSZip();    
	const stream = new Readable();    
	stream.push("test stream");    
	zip.file("test.txt", "test string");    
	zip.file("test", null, { dir: true });    
	zip.file("test/test.txt", "test string");    
	zip.file("stream.txt", stream);    
	return zip;    
}    
function filterWithFileAsync(zip: JSZip, as: JSZip.OutputType,    
cb: (relativePath: string, file: JSZip.JSZipObject, value: any) => boolean)    
: Promise<JSZip.JSZipObject[]> {    
	const promises: Array<Promise<any>> = [];    
	const promiseIndices: {[key: string]: number} = {};    
	zip.forEach((relativePath: string, file: JSZip.JSZipObject) => {    
		const promise = file.async(as);    
		promiseIndices[file.name] = promises.length;    
		promises.push(promise);    
	});    
	return Promise.all(promises).then((values: any[]) => {    
		const filtered = zip.filter((relativePath: string, file: JSZip.JSZipObject) => {    
			const index = promiseIndices[file.name];    
			return cb(relativePath, file, values[index]);    
		});    
		return Promise.resolve(filtered);    
	});    
}    
function testJSZip() {    
	const zip = createTestZip();    
	zip.generateAsync({compression: "DEFLATE", type: "base64"}).then((serializedZip) => {    
		const newJszip = new JSZip();    
		return newJszip.loadAsync(serializedZip, {base64: true/*, checkCRC32: true*/});    
	}).then((newJszip: JSZip) => {    
		newJszip.file("test.txt").async('text').then((text: string) => {    
			if (text === "test string") {    
		log(SEVERITY.INFO, "all ok");    
	} else {    
		log(SEVERITY.ERROR, "no matching file found");    
	}    
		}).catch((e: any) => log(SEVERITY.ERROR, e));    
		newJszip.file("test/test.txt").async('text').then((text: string) => {    
			if (text === "test string") {    
		log(SEVERITY.INFO, "all ok");    
	} else {    
		log(SEVERITY.ERROR, "no matching file found");    
	}    
		}).catch((e: any) => log(SEVERITY.ERROR, e));    
	const folder = newJszip.folder("test");    
		folder.file("test.txt").async('text').then((text: string) => {    
			if (text === "test string") {    
		log(SEVERITY.INFO, "all ok");    
			} else {    
		log(SEVERITY.ERROR, "wrong file");    
	}    
		}).catch((e: any) => log(SEVERITY.ERROR, e));    
	const folders = newJszip.folder(new RegExp("^test"));    
		if (folders.length === 1) {    
		log(SEVERITY.INFO, "all ok");    
			if (folders[0].dir) {    
			log(SEVERITY.INFO, "all ok");    
			} else {    
			log(SEVERITY.ERROR, "wrong file");    
		}    
	} else {    
		log(SEVERITY.ERROR, "wrong number of folder");    
	}    
	const files = newJszip.file(new RegExp("^test"));    
		if (files.length === 2) {    
		log(SEVERITY.INFO, "all ok");    
			Promise.all([files[0].async('text'), files[1].async('text')]).then((texts: string[]) => {    
				if (texts[0] === "test string" && texts[1] === 'test string') {    
			log(SEVERITY.INFO, "all ok");    
				} else {    
			log(SEVERITY.ERROR, "wrong data in files");    
		}    
			});    
		} else {    
		log(SEVERITY.ERROR, "wrong number of files");    
	}    
		filterWithFileAsync(newJszip, 'text', (relativePath: string, file: JSZip.JSZipObject, text: string) => {    
			if (text === "test string") {    
			return true;    
		}    
		return false;    
		}).then((filterFiles: JSZip.JSZipObject[]) => {    
			if (filterFiles.length === 2) {    
		log(SEVERITY.INFO, "all ok");    
			} else {    
		log(SEVERITY.ERROR, "wrong number of files");    
	}    
		}).catch((e: any) => log(SEVERITY.ERROR, e));    
	newJszip.file("stream.txt").async('text').then((text: string) => {    
			if (text === "test stream") {    
		log(SEVERITY.INFO, "all ok");    
	} else {    
		log(SEVERITY.ERROR, "no matching file found");    
	}    
		}).catch((e: any) => log(SEVERITY.ERROR, e));    
	}).catch((e: any) => { console.error(e); });    
}    
function testJSZipRemove() {    
	const newJszip = createTestZip();    
	newJszip.remove("test/test.txt");    
	filterWithFileAsync(newJszip, 'text', (relativePath: string, file: JSZip.JSZipObject, text: string) => {    
		if (text === "test string") {    
			return true;    
		}    
		return false;    
	}).then((filterFiles: JSZip.JSZipObject[]) => {    
		if (filterFiles.length === 1) {    
		log(SEVERITY.INFO, "all ok");    
		} else {    
		log(SEVERITY.ERROR, "wrong number of files");    
	}    
	}).catch((e: any) => log(SEVERITY.ERROR, e));    
}    
function log(severity: number, message: any) {    
	let log = "";    
	switch (severity) {    
		case 0:    
			log += "[DEBUG] ";    
			break;    
		case 1:    
			log += "[INFO] ";    
			break;    
		case 2:    
			log += "[WARN] ";    
			break;    
		case 3:    
			log += "[ERROR] ";    
			break;    
		case 4:    
			log += "[FATAL] ";    
			break;    
		default:    
		log += "[INFO]";    
		break;    
	}    
	console.log(log += message);    
}    
testJSZip();    
testJSZipRemove();


下面是jszip.d.ts文件代码

// Type definitions for JSZip 3.1    
// Project: http://stuk.github.com/jszip/, https://github.com/stuk/jszip    
// Definitions by: mzeiher <https://github.com/mzeiher>, forabi <https://github.com/forabi>    
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped    
// TypeScript Version: 2.3    
/// <reference types="node" />    
interface JSZipSupport {    
arraybuffer: boolean;    
uint8array: boolean;    
blob: boolean;    
nodebuffer: boolean;    
}    
type Compression = 'STORE' | 'DEFLATE';    
interface Metadata  {    
percent: number;    
currentFile: string;    
}    
type OnUpdateCallback = (metadata: Metadata) => void;    
interface InputByType {    
base64: string;    
string: string;    
text: string;    
binarystring: string;    
array: number[];    
uint8array: Uint8Array;    
arraybuffer: ArrayBuffer;    
blob: Blob;    
stream: NodeJS.ReadableStream;    
}    
interface OutputByType {    
base64: string;    
text: string;    
binarystring: string;    
array: number[];    
uint8array: Uint8Array;    
arraybuffer: ArrayBuffer;    
blob: Blob;    
nodebuffer: Buffer;    
}    
type InputFileFormat = InputByType[keyof InputByType];    
declare namespace JSZip {    
type InputType = keyof InputByType;    
type OutputType = keyof OutputByType;    
interface JSZipObject {    
name: string;    
dir: boolean;    
date: Date;    
comment: string;    
/** The UNIX permissions of the file, if any. */    
unixPermissions: number | string | null;    
/** The UNIX permissions of the file, if any. */    
dosPermissions: number | null;    
options: JSZipObjectOptions;    
/**    
         * Prepare the content in the asked type.    
         * @param type the type of the result.    
         * @param onUpdate a function to call on each internal update.    
         * @return Promise the promise of the result.    
         */    
async<T extends OutputType>(type: T, onUpdate?: OnUpdateCallback): Promise<OutputByType[T]>;    
nodeStream(type?: 'nodestream', onUpdate?: OnUpdateCallback): NodeJS.ReadableStream;    
}    
interface JSZipFileOptions {    
/** Set to `true` if the data is `base64` encoded. For example image data from a `<canvas>` element. Plain text and HTML do not need this option. */    
base64?: boolean;    
/**    
         * Set to `true` if the data should be treated as raw content, `false` if this is a text. If `base64` is used,    
         * this defaults to `true`, if the data is not a `string`, this will be set to `true`.    
         */    
binary?: boolean;    
/**    
         * The last modification date, defaults to the current date.    
         */    
date?: Date;    
compression?: string;    
comment?: string;    
/** Set to `true` if (and only if) the input is a "binary string" and has already been prepared with a `0xFF` mask. */    
optimizedBinaryString?: boolean;    
/** Set to `true` if folders in the file path should be automatically created, otherwise there will only be virtual folders that represent the path to the file. */    
createFolders?: boolean;    
/** Set to `true` if this is a directory and content should be ignored. */    
dir?: boolean;    
/** 6 bits number. The DOS permissions of the file, if any. */    
dosPermissions?: number | null;    
/**    
         * 16 bits number. The UNIX permissions of the file, if any.    
         * Also accepts a `string` representing the octal value: `"644"`, `"755"`, etc.    
         */    
unixPermissions?: number | string | null;    
}    
interface JSZipObjectOptions {    
compression: Compression;    
}    
interface JSZipGeneratorOptions<T extends OutputType = OutputType> {    
compression?: Compression;    
compressionOptions?: null | {    
level: number;    
};    
type?: T;    
comment?: string;    
/**    
         * mime-type for the generated file.    
         * Useful when you need to generate a file with a different extension, ie: “.ods”.    
         * @default 'application/zip'    
         */    
mimeType?: string;    
encodeFileName?(filename: string): string;    
/** Stream the files and create file descriptors */    
streamFiles?: boolean;    
/** DOS (default) or UNIX */    
platform?: 'DOS' | 'UNIX';    
}    
interface JSZipLoadOptions {    
base64?: boolean;    
checkCRC32?: boolean;    
optimizedBinaryString?: boolean;    
createFolders?: boolean;    
}    
}    
interface JSZip {    
files: {[key: string]: JSZip.JSZipObject};    
/**    
     * Get a file from the archive    
     *    
     * @param Path relative path to file    
     * @return File matching path, null if no file found    
     */    
file(path: string): JSZip.JSZipObject;    
/**    
     * Get files matching a RegExp from archive    
     *    
     * @param path RegExp to match    
     * @return Return all matching files or an empty array    
     */    
file(path: RegExp): JSZip.JSZipObject[];    
/**    
     * Add a file to the archive    
     *    
     * @param path Relative path to file    
     * @param data Content of the file    
     * @param options Optional information about the file    
     * @return JSZip object    
     */    
file<T extends JSZip.InputType>(path: string, data: InputByType[T] | Promise<InputByType[T]>, options?: JSZip.JSZipFileOptions): this;    
file<T extends JSZip.InputType>(path: string, data: null, options?: JSZip.JSZipFileOptions & { dir: true }): this;    
/**    
     * Returns an new JSZip instance with the given folder as root    
     *    
     * @param name Name of the folder    
     * @return New JSZip object with the given folder as root or null    
     */    
folder(name: string): JSZip;    
/**    
     * Returns new JSZip instances with the matching folders as root    
     *    
     * @param name RegExp to match    
     * @return New array of JSZipFile objects which match the RegExp    
     */    
folder(name: RegExp): JSZip.JSZipObject[];    
/**    
     * Call a callback function for each entry at this folder level.    
     *    
     * @param callback function    
     */    
forEach(callback: (relativePath: string, file: JSZip.JSZipObject) => void): void;    
/**    
     * Get all files which match the given filter function    
     *    
     * @param predicate Filter function    
     * @return Array of matched elements    
     */    
filter(predicate: (relativePath: string, file: JSZip.JSZipObject) => boolean): JSZip.JSZipObject[];    
/**    
     * Removes the file or folder from the archive    
     *    
     * @param path Relative path of file or folder    
     * @return Returns the JSZip instance    
     */    
remove(path: string): JSZip;    
/**    
     * Generates a new archive asynchronously    
     *    
     * @param options Optional options for the generator    
     * @param onUpdate The optional function called on each internal update with the metadata.    
     * @return The serialized archive    
     */    
generateAsync<T extends JSZip.OutputType>(options?: JSZip.JSZipGeneratorOptions<T>, onUpdate?: OnUpdateCallback): Promise<OutputByType[T]>;    
/**    
     * Generates a new archive asynchronously    
     *    
     * @param options Optional options for the generator    
     * @param onUpdate The optional function called on each internal update with the metadata.    
     * @return A Node.js `ReadableStream`    
     */    
generateNodeStream(options?: JSZip.JSZipGeneratorOptions<'nodebuffer'>, onUpdate?: OnUpdateCallback): NodeJS.ReadableStream;    
/**    
     * Deserialize zip file asynchronously    
     *    
     * @param data Serialized zip file    
     * @param options Options for deserializing    
     * @return Returns promise    
     */    
loadAsync(data: InputFileFormat, options?: JSZip.JSZipLoadOptions): Promise<JSZip>;    
/**    
     * Create JSZip instance    
     */    
/**    
     * Create JSZip instance    
     * If no parameters given an empty zip archive will be created    
     *    
     * @param data Serialized zip archive    
     * @param options Description of the serialized zip archive    
     */    
new (data?: InputFileFormat, options?: JSZip.JSZipLoadOptions): this;    
(): JSZip;    
prototype: JSZip;    
support: JSZipSupport;    
external: {    
Promise: PromiseConstructorLike;    
};    
version: string;    
}    
declare var JSZip: JSZip;    
export = JSZip;


暂无评论

发布评论

分享:

支付宝

微信