jQuery ব্যবহার করে একটি নতুন ট্যাবে খোলা একটি ব্লব পিডিএফ-এর স্লাগ পরিবর্তন করুন

জাভাস্ক্রিপ্টের সাথে নতুন ট্যাবে ব্লব পিডিএফ স্লাগ পরিচালনা করা

একটি ওয়েবপেজ থেকে পিডিএফ তৈরি করা ওয়েব ডেভেলপমেন্টের একটি সাধারণ প্রয়োজন। আপনাকে একটি ডায়নামিক পিডিএফ তৈরি করতে হবে, এটি একটি নতুন ট্যাবে খুলতে হবে এবং ফাইলটির জন্য একটি কাস্টম ফাইলের নাম বা স্লাগ প্রদান করতে হবে। যাইহোক, ফাইলের স্লাগ পরিবর্তন করার ক্ষেত্রে JavaScript blobs এর সাথে কাজ করা একটি চ্যালেঞ্জ উপস্থাপন করে।

ডাউনলোডযোগ্য বিষয়বস্তু পরিচালনার জন্য ব্লবগুলি অপরিহার্য, একটি সীমাবদ্ধতা হল ফাইলের নাম সম্পত্তি সরাসরি সেট বা পরিবর্তন করার অক্ষমতা। ডেভেলপাররা প্রায়ই ফাইল তৈরি করার সময় ব্লবগুলিতে নাম বা ফাইলের নাম বরাদ্দ করার চেষ্টা করে, কিন্তু ব্রাউজার সীমাবদ্ধতার কারণে এই ধরনের প্রচেষ্টা সাধারণত ব্যর্থ হয়।

আপনি যদি মত বৈশিষ্ট্য সেট করার চেষ্টা করেছেন blob.name বা blob.filename সাফল্য ছাড়াই আপনার কোডে, আপনি একা নন। ব্লব আচরণ কাস্টমাইজ করার চেষ্টা করার সময় এটি একটি সাধারণ সমস্যা। একটি কাস্টম স্লাগ দিয়ে জেনারেট করা PDF খোলার প্রয়োজনীয়তা এটিকে আরও হতাশাজনক করে তুলতে পারে।

এই নিবন্ধে, আমরা জাভাস্ক্রিপ্টে ব্লব ব্যবহার করে পিডিএফ তৈরি করার এবং সঠিক কাস্টম স্লাগ সহ একটি নতুন ট্যাবে ফাইলটি খোলে তা নিশ্চিত করার জন্য সম্ভাব্য সমাধান এবং সমাধানগুলি অন্বেষণ করব। এই প্রক্রিয়ার মাধ্যমে আপনাকে গাইড করার জন্য আমরা ব্যবহারিক কোড উদাহরণগুলিও দেখব।

JavaScript এবং jQuery ব্যবহার করে কাস্টম স্লাগ দিয়ে PDF তৈরি করা হচ্ছে

স্ক্রিপ্টগুলি একটি কাস্টম ফাইলের নাম বা স্লাগ সহ একটি নতুন ট্যাবে একটি ওয়েবপৃষ্ঠা থেকে তৈরি করা একটি পিডিএফ ফাইল খোলার চ্যালেঞ্জ মোকাবেলায় ফোকাস প্রদান করে। জাভাস্ক্রিপ্টে ব্লবগুলির সাথে কাজ করার সময় বিকাশকারীরা যে প্রধান সমস্যাগুলির মুখোমুখি হন তা হল সরাসরি একটি ফাইলের নাম বরাদ্দ করতে অক্ষমতা, যা একটি কাস্টম স্লাগ সেট করার জন্য অপরিহার্য। আমাদের সমাধানে, মূল কৌশলটি একটি তৈরি করে ব্লব PDF বিষয়বস্তু থেকে, যা আমরা গতিশীলভাবে তৈরি করি। ব্যবহার করে URL.createObjectURL() ফাংশন, আমরা এই ব্লবটিকে একটি সম্পদে রূপান্তর করি যা ব্রাউজার খুলতে বা ডাউনলোড করতে পারে।

একবার ব্লব ইউআরএল তৈরি হয়ে গেলে, আমরা ব্যবহার করি window.open() একটি নতুন ট্যাবে পিডিএফ প্রদর্শন করতে, যা প্রায়শই এমন পরিস্থিতিতে প্রয়োজন যেখানে একজন ব্যবহারকারীকে নথিটির পূর্বরূপ বা প্রিন্ট করতে হয়। যেহেতু ব্লব নিজেই ফাইলটির নামকরণ সমর্থন করে না, তাই আমরা একটি লুকানো লিঙ্ক উপাদান তৈরি করে এবং ব্যবহার করে পছন্দসই ফাইলের নাম বরাদ্দ করে এই সীমাবদ্ধতা বাইপাস করি ডাউনলোড বৈশিষ্ট্য এই লুকানো লিঙ্কটি সঠিক ফাইলের নাম দিয়ে ডাউনলোড ট্রিগার করতে প্রোগ্রাম্যাটিকভাবে "ক্লিক" করা হয়। পদ্ধতির এই সংমিশ্রণটি জাভাস্ক্রিপ্টে ব্লব নামকরণের সীমাবদ্ধতার জন্য একটি সাধারণ সমাধান।

সার্ভার-সাইড সমাধানের জন্য, আমরা সরাসরি একটি কাস্টম ফাইলনাম সহ পিডিএফ ফাইল পরিবেশন করতে Node.js এবং Express ব্যবহার করি। কাজে লাগিয়ে fs.createReadStream(), ফাইলটি দক্ষতার সাথে ক্লায়েন্টের কাছে স্ট্রিম করা হয়, সার্ভারকে একবারে মেমরিতে লোড না করেই বড় ফাইলগুলি পরিচালনা করার অনুমতি দেয়। দ res.setHeader() কমান্ড এখানে অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি নিশ্চিত করে যে HTTP প্রতিক্রিয়া শিরোনামগুলি কাস্টম ফাইলের নাম এবং MIME প্রকার (অ্যাপ্লিকেশন/পিডিএফ) নির্দিষ্ট করে। এই পদ্ধতিটি আরও জটিল অ্যাপ্লিকেশনের জন্য আদর্শ যেখানে পিডিএফ তৈরি বা সার্ভারে সংরক্ষণ করা হয়।

এই স্ক্রিপ্টগুলিকে মডুলার এবং পুনরায় ব্যবহারযোগ্য করার জন্য ডিজাইন করা হয়েছে। আপনি ব্যবহার করে একটি ক্লায়েন্ট-সাইড পরিবেশে কাজ করছেন কিনা জাভাস্ক্রিপ্ট অথবা সঙ্গে একটি ব্যাকএন্ড সমাধান Node.js, এই কৌশলগুলি নিশ্চিত করে যে আপনার PDF গুলি সঠিক ফাইলের নাম দিয়ে বিতরণ করা হয়েছে বা খোলা হয়েছে৷ উভয় পন্থা কর্মক্ষমতার জন্য অপ্টিমাইজ করা হয়েছে এবং যেখানে পিডিএফগুলি গতিশীলভাবে তৈরি হয় বা সার্ভার-পার্শ্বে সংরক্ষিত হয় সেখানে পরিস্থিতি পরিচালনা করতে পারে। ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড উভয় সমাধান প্রদান করে, এটি নমনীয়তা নিশ্চিত করে, আপনাকে আপনার প্রকল্পের প্রয়োজনের উপর নির্ভর করে সবচেয়ে উপযুক্ত পদ্ধতি বাস্তবায়ন করতে দেয়।

// Function to generate and open PDF in a new tab with custom filename
function openPDFWithCustomName(data, filename) {
  // Create a Blob object from the data (PDF content)
  var blob = new Blob([data], { type: 'application/pdf' });
  // Create a URL for the Blob object
  var blobURL = window.URL.createObjectURL(blob);
  // Create a temporary link to trigger the download
  var link = document.createElement('a');
  link.href = blobURL;
  link.download = filename; // Custom slug or filename
  // Open in a new tab
  window.open(blobURL, '_blank');
}

// Example usage: data could be the generated PDF content
var pdfData = '...'; // Your PDF binary data here
openPDFWithCustomName(pdfData, 'custom-slug.pdf');

// Require necessary modules
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// Serve generated PDF with custom slug
app.get('/generate-pdf', (req, res) => {
  const pdfFilePath = path.join(__dirname, 'test.pdf');
  res.setHeader('Content-Disposition', 'attachment; filename="custom-slug.pdf"');
  res.setHeader('Content-Type', 'application/pdf');
  const pdfStream = fs.createReadStream(pdfFilePath);
  pdfStream.pipe(res);
});

// Start the server
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

// To test, navigate to http://localhost:3000/generate-pdf

// Function to open PDF in new tab with custom filename using download attribute
function openPDFInNewTab(data, filename) {
  var blob = new Blob([data], { type: 'application/pdf' });
  var url = window.URL.createObjectURL(blob);
  var link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click(); // Triggers the download
  window.open(url, '_blank'); // Opens PDF in a new tab
}

// Example call
var pdfData = '...'; // PDF binary content
openPDFInNewTab(pdfData, 'new-slug.pdf');

জাভাস্ক্রিপ্টে ব্লব ফাইলের নামগুলির সীমা এবং সমাধান বোঝা

সঙ্গে কাজ করার সময় প্রধান চ্যালেঞ্জ এক ব্লব জাভাস্ক্রিপ্টে অবজেক্ট হল ফাইলের নাম সেট করার সীমাবদ্ধতা। একটি পিডিএফ বা যেকোনো ফাইলের ধরন তৈরি করার সময়, ব্লবগুলি অন্তর্নিহিতভাবে একটি কাস্টম ফাইলের নাম বরাদ্দ করার জন্য একটি সরাসরি পদ্ধতি সমর্থন করে না। একটি নতুন ট্যাবে এই ফাইলগুলি খুলতে বা একটি নির্দিষ্ট স্লাগ দিয়ে একটি ডাউনলোড ট্রিগার করার চেষ্টা করার সময় এটি বিশেষত সমস্যাযুক্ত হয়ে ওঠে৷ ব্রাউজারের ডিফল্ট আচরণ হল একটি স্বেচ্ছাচারী নাম তৈরি করা, যা সবসময় ব্যবহারকারী-বান্ধব বা ফাইলের প্রসঙ্গে উপযুক্ত নয়।

এই সীমাবদ্ধতা অতিক্রম করতে, বিকাশকারীরা HTML5 ব্যবহার করতে পারেন ডাউনলোড বৈশিষ্ট্য, যা ডাউনলোড করা ফাইলের জন্য একটি ফাইলের নাম নির্ধারণ করার অনুমতি দেয়। জাভাস্ক্রিপ্টে গতিশীলভাবে একটি অ্যাঙ্কর উপাদান তৈরি করে এবং সেট করে ডাউনলোড পছন্দসই ফাইলের নামের বৈশিষ্ট্য, ব্লব সামগ্রী ডাউনলোড করা হলে আমরা ফাইলের নাম নিয়ন্ত্রণ করতে পারি। যাইহোক, এই পদ্ধতিটি যখন একটি নতুন ট্যাবে ব্লব খোলা হয় তখন নামটিকে প্রভাবিত করে না, কারণ এটি ব্লব URL রেন্ডার করার জন্য ব্রাউজারের অন্তর্নির্মিত কার্যকারিতা দ্বারা নিয়ন্ত্রিত হয়।

আরেকটি পদ্ধতি হল একটি ফ্রেমওয়ার্ক ব্যবহার করে ব্যাকএন্ড থেকে ফাইল পরিবেশন করা Node.js অথবা এক্সপ্রেস, যেখানে কাস্টম হেডার ক্লায়েন্টকে পাঠানো ফাইলের ফাইলের নাম নিয়ন্ত্রণ করতে সেট করা যেতে পারে। দ Content-Disposition হেডার আপনাকে ফাইলটির নাম নির্দিষ্ট করতে দেয় তা নির্বিশেষে এটি ডাউনলোড করা বা একটি নতুন ট্যাবে খোলা হচ্ছে। এই পদ্ধতিটি সার্ভার-সাইড রেন্ডার করা সামগ্রীর জন্য আরও নমনীয়, তবে ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট ব্লবগুলির জন্য, ডাউনলোড বৈশিষ্ট্য হল সবচেয়ে কার্যকর সমাধান।