JavaScript का उपयोग करके फाइलों को संकुचित पैकेज (.zip) में कैसे पैक करें

आधुनिक वेब विकास में, फाइलों को संकुचित करना एक सामान्य आवश्यकता है। उपयोगकर्ताओं को डाउनलोड के लिए कई फाइलों को एक संकुचित पैकेज में संयोजित करने की आवश्यकता हो सकती है, या वेब एप्लिकेशन के माध्यम से फाइलें उत्पन्न करके उन्हें .zip फाइल के रूप में निर्यात कर सकते हैं। यह ब्लॉग पोस्ट JavaScript का उपयोग करके ब्राउज़र में फाइल पैकेजिंग और संकुचन ऑपरेशन को कैसे लागू किया जाए, इसके बारे में एक विस्तृत गाइड प्रदान करेगा। हम इसे लोकप्रिय JavaScript लाइब्रेरी JSZip का उपयोग करके और फाइल डाउनलोड के लिए FileSaver.js का लाभ उठाकर पूरा करेंगे।

तैयारी

सबसे पहले, हमें दो आमतौर पर उपयोग की जाने वाली लाइब्रेरी स्थापित करने की आवश्यकता है:

1. JSZip: यह एक हल्की JavaScript लाइब्रेरी है जिसका उपयोग .zip फाइलों को बनाने और संभालने के लिए किया जाता है।
2. FileSaver.js: यह लाइब्रेरी ब्राउज़र फाइल डाउनलोड को ट्रिगर करने के लिए एक क्रॉस-ब्राउज़र तरीका प्रदान करती है।

आप अपने प्रोजेक्ट में इन लाइब्रेरी को इस प्रकार स्थापित कर सकते हैं:

npm install jszip file-saver

या CDN के माध्यम से शामिल करें (HTML में उपयोग के लिए):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js"></script>

उपयोगिता फंक्शन का कार्यान्वयन

अगला, हम कई फाइलों को एक .zip फाइल में पैकेज करने और डाउनलोड को ट्रिगर करने के लिए एक एनकैप्सुलेटेड उपयोगिता फंक्शन लिखेंगे। मान लीजिए कि हम एक श्रृंखला की छवियों को पैकेज करना चाहते हैं, जो या तो मूल फाइलें हो सकती हैं या प्रसंस्करित फाइलें हो सकती हैं।

जेनेरिक downloadFilesAsZip फंक्शन

import JSZip from "jszip";
import { saveAs } from "file-saver";

/**
 * कई फाइलों को Zip फाइल के रूप में पैकेज करके डाउनलोड करें
 * @param {Array} files - फाइल ऑब्जेक्ट्स का एरे, प्रत्येक में एक URL और फाइलनाम शामिल है
 * @param {string} zipName - उत्पन्न Zip फाइल का नाम, डिफॉल्ट 'download.zip' है
 */
export const downloadFilesAsZip = async (files, zipName = "download.zip") => {
  // एक नया JSZip इंस्टेंस बनाएं
  const zip = new JSZip();

  // प्रत्येक फाइल को प्रोसेस करने के लिए प्रॉमिस का एरे बनाने के लिए map का उपयोग करें
  const fetchPromises = files.map(async (file) => {
    try {
      // फाइल रिसोर्स का अनुरोध करें, यह मानते हुए कि फाइल URL के माध्यम से प्रदान की गई है
      const response = await fetch(file.url); // फाइल रिसोर्स प्राप्त करें
      const blob = await response.blob(); // रिस्पांस को Blob ऑब्जेक्ट में कनवर्ट करें

      // प्रदान किए गए फाइलनाम का उपयोग करके, फाइल को zip पैकेज में जोड़ें
      zip.file(file.name, blob);
    } catch (error) {
      console.error(`फाइल जोड़ने में विफल: ${file.name}`, error);
    }
  });

  // सभी फाइलों के डाउनलोड होने और Zip में जोड़े जाने की प्रतीक्षा करें
  await Promise.all(fetchPromises);

  // zip पैकेज सामग्री उत्पन्न करें (blob प्रकार)
  const content = await zip.generateAsync({ type: "blob" });

  // zip पैकेज डाउनलोड करने के लिए FileSaver.js का उपयोग करें
  saveAs(content, zipName);
};

कोड व्याख्या

• JSZip इंस्टेंस बनाना: const zip = new JSZip(); — एक नया Zip फाइल इंस्टेंस बनाता है, सभी फाइलें इस इंस्टेंस में जोड़ी जाएंगी।
• फाइल डाउनलोड और पैकेजिंग: URL से फाइल की सामग्री प्राप्त करने के लिए fetch() फंक्शन का उपयोग करता है, फिर इसे blob फॉर्मेट में कनवर्ट करता है। यह इसलिए है क्योंकि JSZip blob फॉर्मेट में फाइलों को प्रोसेस करने का समर्थन करता है।
• .zip फाइल जनरेट करना: zip.generateAsync({ type: "blob" }) के माध्यम से, zip ऑब्जेक्ट में जोड़ी गई सभी फाइलें एक .zip फाइल में संकुचित की जाती हैं, एक blob ऑब्जेक्ट लौटाती हैं।
• फाइल सहेजना: FileSaver.js के साथ saveAs(content, zipName) का उपयोग करके फाइल डाउनलोड को ट्रिगर करता है, जहां content जनरेटेड zip पैकेज है और zipName डाउनलोड फाइलनाम है।

इस उपयोगिता फंक्शन का उपयोग कैसे करें

मान लीजिए कि हमारे पास छवि URL का एक सेट है और हम उन्हें डाउनलोड के लिए एक .zip फाइल में पैकेज करना चाहते हैं। यहां downloadFilesAsZip फंक्शन को कॉल करने का एक उदाहरण दिया गया है:

// उदाहरण फाइल डेटा: फाइल URL और फाइलनाम शामिल है
const files = [
  { url: "https://example.com/image1.jpg", name: "image1.jpg" },
  { url: "https://example.com/image2.jpg", name: "image2.jpg" },
  { url: "https://example.com/image3.jpg", name: "image3.jpg" },
];

// फाइलों को डाउनलोड करने और zip फाइल के रूप में पैकेज करने के लिए फंक्शन कॉल करें
downloadFilesAsZip(files, "images.zip");

इस उदाहरण में, हम छवि URL और फाइलनाम वाले ऑब्जेक्ट्स का एक एरे प्रदान करते हैं। downloadFilesAsZip फंक्शन को कॉल करने के बाद, ब्राउज़र स्वचालित रूप से एक डाउनलोड ऑपरेशन ट्रिगर करेगा और इन छवियों को images.zip नामक एक संकुचित फाइल में पैकेज करेगा।

सामान्य समस्याएं और समाधान

1. क्रॉस-ओरिजिन समस्याएं यदि फाइलें विभिन्न डोमेन से आती हैं, तो सुनिश्चित करें कि सर्वर ने सही क्रॉस-ओरिजिन रिसोर्स शेयरिंग (CORS) हेडर्स सेट किए हैं। अन्यथा, ब्राउज़र fetch() अनुरोधों को ब्लॉक करेगा, जिससे फाइल डाउनलोड रुक जाएगी।
2. बड़ी फाइल डाउनलोड यदि डाउनलोड की जा रही फाइलें बड़ी हैं, तो आपको डाउनलोड प्रक्रिया को अनुकूलित करने की आवश्यकता हो सकती है, जैसे चंक्ड डाउनलोड या प्रगति बार प्रदर्शित करना।
3. ब्राउज़र समर्थन यह विधि fetch() और FileSaver.js पर निर्भर करती है, इसलिए इसे इन API का समर्थन करने वाले आधुनिक ब्राउज़रों की आवश्यकता होती है। यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, तो पॉलीफिल्स का उपयोग करने पर विचार करें।

वैकल्पिक समाधान

JSZip और FileSaver.js का उपयोग करने के अलावा, ब्राउज़र में फाइल संकुचन और पैकेजिंग को लागू करने के लिए कई अन्य सामान्य समाधान हैं:

1. Pako.js: Pako JavaScript के लिए एक zlib संकुचन लाइब्रेरी है, जो gzip और deflate फॉर्मेट का समर्थन करती है। यह छोटी फाइलों को संकुचित करने के लिए उपयुक्त है और उपयोग में अपेक्षाकृत सरल है।
2. Archiver.js: Archiver.js एक फीचर-रिच लाइब्रेरी है जो .tar, .zip, आदि जैसे फॉर्मेट में संकुचन का समर्थन करती है। यह ब्राउज़र में फाइल संकुचन कर सकती है और अधिक नियंत्रण विकल्प प्रदान करती है।
3. zip.js: zip.js एक JavaScript लाइब्रेरी है जो स्ट्रीमिंग डीकंप्रेशन और कंप्रेशन का समर्थन करती है, बड़ी फाइलों को संभालने में सक्षम है और .zip फाइलों में संकुचित करने की कार्यक्षमता प्रदान करती है।
4. BrowserFS + zip-lib: BrowserFS एक लाइब्रेरी है जो ब्राउज़र में फाइल सिस्टम सिमुलेशन प्रदान करती है। zip-lib के साथ संयोजित, यह .zip फाइलों को बना और डाउनलोड कर सकती है, जो उन एप्लिकेशन के लिए उपयुक्त है जिन्हें फाइल सिस्टम का सिमुलेशन करने की आवश्यकता होती है।