JavaScript में क्लाइंट-साइड PDF मर्जर बनाना

वेब के लिए दस्तावेज़ टूल बनाते समय, डेवलपर्स अक्सर बैकएंड सर्वर (जैसे Python या Node.js) का उपयोग करना आसान मानते हैं। लेकिन यह तरीका महंगा होता है और इससे उपयोगकर्ताओं के डेटा की निजता पर भी ख़तरा मंडराता है।

इसी काम को अपने क्लाइंट (ब्राउज़र) पर करके, आप एक बहुत ही सुरक्षित, तेज़ और उच्च-क्षमता वाली वेबसाइट बना सकते हैं जिसे होस्ट करने में लगभग कुछ भी खर्च नहीं आता।

इस लेख में हम बताएंगे कि हमारे PDF मर्जर टूल का ढांचा कैसे बनाया गया है।

उपयोग की गई तकनीकें (Tech Stack)

हमारे उन्नत ढांचे में मुख्य रूप से निम्न तकनीक का उपयोग किया गया है:

• UI फ्रेमवर्क: React (Next.js)
• PDF का संरचनात्मक कार्य: pdf-lib (पढ़ने, मर्ज करने और नया डेटा जोड़ने के लिए)
• PDF का रेंडरिंग: pdfjs-dist (Mozilla का PDF.js, थंबनेल दिखाने के लिए)

1. PDF.js के साथ थंबनेल (Thumbnail) रेंडर करना

अगर आप एक बेहतर अनुभव (UX) देना चाहते हैं तो पेजों को दिखाना आवश्यक है। क्योंकि इसमें प्रोसेसर (CPU) का बहुत इस्तेमाल होता है, इसलिए Web Worker का उपयोग किया गया है:

import * as pdfjsLib from "pdfjs-dist";

// Worker स्क्रिप्ट की ओर पॉइंट करें
pdfjsLib.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;

async function renderPdfThumbnail(file: File): Promise<string | null> {
    const buf = await file.arrayBuffer();
    const pdf = await pdfjsLib.getDocument({ data: buf }).promise;
    const page = await pdf.getPage(1);

    const viewport = page.getViewport({ scale: 0.6 });
    const canvas = document.createElement("canvas");
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    const ctx = canvas.getContext("2d");
    if (!ctx) return null;
    
    await page.render({ canvasContext: ctx, viewport }).promise;
    
    // सुरक्षित JPEG डाटा यूआरएल में कन्वर्ट करें
    const dataUrl = canvas.toDataURL("image/jpeg", 0.75);
    pdf.destroy();
    
    return dataUrl;
}

2. pdf-lib के साथ PDF मर्ज करना

जब यूजर 'मर्ज' बटन पर क्लिक करता है, तो pdf-lib काम शुरू कर देता है क्योंकि यह अलग-अलग ऑब्जेक्ट से पेजों को कॉपी करने में बेहद सक्षम है।

import { PDFDocument, degrees } from "pdf-lib";

async function mergePdfs(files: { file: File, rotation: number }[]) {
    const mergedDoc = await PDFDocument.create();

    for (const pdfFile of files) {
        const buf = await pdfFile.file.arrayBuffer();
        const srcDoc = await PDFDocument.load(buf, { ignoreEncryption: true });

        if (pdfFile.rotation !== 0) {
            srcDoc.getPages().forEach((p) => {
                const currentAngle = p.getRotation().angle;
                p.setRotation(degrees((currentAngle + pdfFile.rotation) % 360));
            });
        }

        const copiedPages = await mergedDoc.copyPages(srcDoc, srcDoc.getPageIndices());
        copiedPages.forEach((p) => mergedDoc.addPage(p));
    }

    const mergedBytes = await mergedDoc.save();
    const blob = new Blob([mergedBytes], { type: "application/pdf" });
    const url = URL.createObjectURL(blob);
}

निष्कर्ष

वेब प्रौद्योगिकियों और Web Workers के प्रयोग से आप आसानी से सुरक्षित दस्तावेज़ीकरण बना सकते हैं जो किसी भी सर्वर के मुकाबले ज़्यादा सुरक्षित है। pdf-lib और pdfjs-dist इन प्रकार के सॉफ्टवेर बनाने के लिए अत्यंत प्रभावशाली टूल साबित हुए हैं।