TypeScript में ZIP आर्काइव: JSZip लाइब्रेरी और उपयोगिताएँ

TypeScript में ZIP आर्काइव: JSZip लाइब्रेरी और व्यावहारिक उदाहरण

आधुनिक वेब डेवलपमेंट में, कई फ़ाइलों को एक आर्काइव में पैक करना अक्सर ज़रूरी होता है, ताकि उन्हें आसानी से डाउनलोड या ट्रांसफ़र किया जा सके। TypeScript (और JavaScript) इकोसिस्टम में ZIP आर्काइव के साथ काम करने के लिए सबसे लोकप्रिय समाधान JSZip लाइब्रेरी है। यह ब्राउज़र और Node.js दोनों में ZIP फ़ाइलों को बनाने, पढ़ने और संशोधित करने की अनुमति देती है।

इस लेख में, हम JSZip की स्थापना, कॉन्फ़िगरेशन और TypeScript प्रोजेक्ट्स में इसके मुख्य उपयोग के तरीकों पर विस्तार से चर्चा करेंगे। आप स्ट्रिंग्स, बाइनरी डेटा और पूरे फ़ोल्डरों से आर्काइव बनाना, साथ ही मौजूदा ZIP फ़ाइलों की सामग्री निकालना सीखेंगे।

JSZip की स्थापना और कनेक्शन

शुरू करने के लिए, npm या yarn के माध्यम से लाइब्रेरी और उसके टाइप्स इंस्टॉल करें:

npm install jszip
npm install --save-dev @types/jszip

इंस्टॉलेशन के बाद, अपने TypeScript फ़ाइल में JSZip को इम्पोर्ट करें:

import JSZip from 'jszip';

यदि आप मॉड्यूलर सिस्टम (ES modules) का उपयोग कर रहे हैं, तो इम्पोर्ट ऊपर दिखाए अनुसार काम करेगा। CommonJS (require) के लिए सिंटैक्स भिन्न हो सकता है, लेकिन TypeScript प्रोजेक्ट्स में ES-इम्पोर्ट का उपयोग करने की अनुशंसा की जाती है।

नया ZIP आर्काइव बनाना

सबसे सरल परिदृश्य एक आर्काइव बनाना और उसमें कुछ टेक्स्ट फ़ाइलें जोड़ना है। एक उदाहरण देखें:

const zip = new JSZip();

// टेक्स्ट फ़ाइलें जोड़ें
zip.file("hello.txt", "Hello, World!");
zip.file("readme.md", "# दस्तावेज़ीकरण\n\nयह Markdown फ़ाइल का उदाहरण है।");

// एक फ़ोल्डर और उसके अंदर फ़ाइल जोड़ें
const folder = zip.folder("images");
folder.file("logo.png", "base64encodedstring...", {base64: true});

// ZIP फ़ाइल को Blob के रूप में जनरेट करें
zip.generateAsync({type: "blob"}).then((content) => {
    // डाउनलोड के लिए लिंक बनाएँ
    const link = document.createElement("a");
    link.href = URL.createObjectURL(content);
    link.download = "my-archive.zip";
    link.click();
});

इस उदाहरण में हमने:

• JSZip का एक इंस्टेंस बनाया
• .file() मेथड का उपयोग करके दो टेक्स्ट फ़ाइलें जोड़ीं
• images नामक एक नेस्टेड फ़ोल्डर बनाया और उसमें base64 डेटा वाली फ़ाइल रखी
• Blob फ़ॉर्मेट में आर्काइव जनरेट किया और डाउनलोड शुरू किया

मौजूदा ZIP आर्काइव को पढ़ना और निकालना

JSZip न केवल आर्काइव बनाने, बल्कि उन्हें पढ़ने की भी अनुमति देता है। इसके लिए loadAsync() मेथड का उपयोग किया जाता है:

async function readZipFile(zipBlob: Blob): Promise<void> {
    try {
        const zip = await JSZip.loadAsync(zipBlob);
        
        // सभी फ़ाइलों की सूची प्राप्त करें
        const fileNames = Object.keys(zip.files);
        console.log("आर्काइव में फ़ाइलें:", fileNames);

        // किसी विशिष्ट फ़ाइल की सामग्री निकालें
        const helloFile = zip.file("hello.txt");
        if (helloFile) {
            const content = await helloFile.async("string");
            console.log("hello.txt की सामग्री:", content);
        }

        // सभी फ़ाइलों पर इटरेट करें
        zip.forEach((relativePath, zipEntry) => {
            console.log(`फ़ाइल मिली: ${relativePath}, आकार: ${zipEntry._data.uncompressedSize} बाइट्स`);
        });

    } catch (error) {
        console.error("ZIP पढ़ने में त्रुटि:", error);
    }
}

टाइपिंग पर ध्यान दें: JSZip.loadAsync() एक प्रॉमिस लौटाता है जो JSZip ऑब्जेक्ट में रिज़ॉल्व होता है। .file() मेथड JSZipObject | null लौटाता है, इसलिए .async() कॉल करने से पहले फ़ाइल के अस्तित्व की जाँच करें।

बाइनरी डेटा और इमेज के साथ काम करना

अक्सर आर्काइव में इमेज या अन्य बाइनरी फ़ाइलों को पैक करने की आवश्यकता होती है। JSZip ArrayBuffer, Blob, Uint8Array और base64 के साथ काम करने का समर्थन करता है:

// ArrayBuffer से फ़ाइल जोड़ना
const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer);
view.set([