jQuery ഉപയോഗിച്ച് ഒരു പുതിയ ടാബിൽ തുറന്ന ഒരു ബ്ലോബ് PDF-ൻ്റെ സ്ലഗ് മാറ്റുക

JavaScript ഉപയോഗിച്ച് പുതിയ ടാബുകളിൽ ബ്ലോബ് PDF സ്ലഗുകൾ കൈകാര്യം ചെയ്യുന്നു

ഒരു വെബ്‌പേജിൽ നിന്ന് PDF സൃഷ്‌ടിക്കുന്നത് വെബ് വികസനത്തിൽ ഒരു സാധാരണ ആവശ്യകതയാണ്. നിങ്ങൾ ഒരു ഡൈനാമിക് PDF സൃഷ്‌ടിക്കുകയും പുതിയ ടാബിൽ തുറക്കുകയും ഫയലിനായി ഒരു ഇഷ്‌ടാനുസൃത ഫയൽനാമമോ സ്ലഗ്ഗോ നൽകുകയും ചെയ്യേണ്ടി വന്നേക്കാം. എന്നിരുന്നാലും, ഫയലിൻ്റെ സ്ലഗ് മാറ്റുമ്പോൾ JavaScript ബ്ളോബുകളിൽ പ്രവർത്തിക്കുന്നത് ഒരു വെല്ലുവിളിയാണ്.

ഡൗൺലോഡ് ചെയ്യാവുന്ന ഉള്ളടക്കം കൈകാര്യം ചെയ്യുന്നതിന് ബ്ലോബുകൾ അത്യന്താപേക്ഷിതമാണെങ്കിലും, ഫയൽ നെയിം പ്രോപ്പർട്ടി നേരിട്ട് സജ്ജീകരിക്കാനോ മാറ്റാനോ ഉള്ള കഴിവില്ലായ്മയാണ് ഒരു പരിമിതി. ഫയലുകൾ സൃഷ്ടിക്കുമ്പോൾ ഡെവലപ്പർമാർ പലപ്പോഴും പേരുകളോ ഫയലുകളുടെ പേരുകളോ ബ്ലോബുകൾക്ക് നൽകാൻ ശ്രമിക്കുന്നു, എന്നാൽ ബ്രൗസർ നിയന്ത്രണങ്ങൾ കാരണം അത്തരം ശ്രമങ്ങൾ സാധാരണയായി പരാജയപ്പെടുന്നു.

പോലുള്ള പ്രോപ്പർട്ടികൾ സജ്ജീകരിക്കാൻ നിങ്ങൾ ശ്രമിച്ചിട്ടുണ്ടെങ്കിൽ ബ്ലബ്.പേര് അല്ലെങ്കിൽ ബ്ലബ്.ഫയലിൻ്റെ പേര് വിജയിക്കാതെ നിങ്ങളുടെ കോഡിൽ, നിങ്ങൾ ഒറ്റയ്ക്കല്ല. ബ്ലോബ് സ്വഭാവം ഇഷ്ടാനുസൃതമാക്കാൻ ശ്രമിക്കുമ്പോൾ ഇത് ഒരു സാധാരണ പ്രശ്നമാണ്. ഒരു ഇഷ്‌ടാനുസൃത സ്ലഗ് ഉപയോഗിച്ച് ജനറേറ്റുചെയ്‌ത PDF തുറക്കേണ്ടതിൻ്റെ ആവശ്യകത ഇത് കൂടുതൽ നിരാശാജനകമാക്കും.

ഈ ലേഖനത്തിൽ, JavaScript-ൽ ബ്ലോബുകൾ ഉപയോഗിച്ച് PDF-കൾ സൃഷ്ടിക്കുന്നതിനുള്ള സാധ്യതകളും പരിഹാരങ്ങളും ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും, കൂടാതെ ശരിയായ ഇഷ്‌ടാനുസൃത സ്ലഗ് ഉള്ള ഒരു പുതിയ ടാബിൽ ഫയൽ തുറക്കുന്നുവെന്ന് ഉറപ്പാക്കും. ഈ പ്രക്രിയയിലൂടെ നിങ്ങളെ നയിക്കാൻ ഞങ്ങൾ പ്രായോഗിക കോഡ് ഉദാഹരണങ്ങളും നോക്കും.

JavaScript, jQuery എന്നിവ ഉപയോഗിച്ച് കസ്റ്റം സ്ലഗ് ഉപയോഗിച്ച് PDF സൃഷ്ടിക്കുന്നു

ഒരു ഇഷ്‌ടാനുസൃത ഫയൽ നാമമോ സ്ലഗ്ഗോ ഉള്ള ഒരു പുതിയ ടാബിൽ ഒരു വെബ്‌പേജിൽ നിന്ന് സൃഷ്‌ടിച്ച ഒരു PDF ഫയൽ തുറക്കുന്നതിനുള്ള വെല്ലുവിളിയെ അഭിമുഖീകരിക്കുന്നതിൽ സ്‌ക്രിപ്റ്റുകൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. JavaScript-ൽ ബ്ളോബുകളിൽ പ്രവർത്തിക്കുമ്പോൾ ഡവലപ്പർമാർ നേരിടുന്ന പ്രധാന പ്രശ്നങ്ങളിലൊന്ന് ഒരു ഫയൽ നാമം നേരിട്ട് നൽകാനുള്ള കഴിവില്ലായ്മയാണ്, ഇത് ഒരു ഇഷ്‌ടാനുസൃത സ്ലഗ് സജ്ജീകരിക്കുന്നതിന് അത്യാവശ്യമാണ്. ഞങ്ങളുടെ പരിഹാരത്തിൽ, പ്രധാന സാങ്കേതികതയിൽ ഒരു സൃഷ്ടിക്കുന്നത് ഉൾപ്പെടുന്നു ബ്ലോബ് ഞങ്ങൾ ചലനാത്മകമായി സൃഷ്ടിക്കുന്ന PDF ഉള്ളടക്കത്തിൽ നിന്ന്. ഉപയോഗിക്കുന്നത് URL.createObjectURL() ഫംഗ്‌ഷൻ, ബ്രൗസറിന് തുറക്കാനോ ഡൗൺലോഡ് ചെയ്യാനോ കഴിയുന്ന ഒരു ഉറവിടമാക്കി ഞങ്ങൾ ഈ ബ്ലോബ് മാറ്റുന്നു.

Blob URL സൃഷ്ടിച്ചുകഴിഞ്ഞാൽ, ഞങ്ങൾ ഉപയോഗിക്കുന്നു window.open() ഒരു പുതിയ ടാബിൽ PDF പ്രദർശിപ്പിക്കുന്നതിന്, ഒരു ഉപയോക്താവിന് പ്രമാണം പ്രിവ്യൂ ചെയ്യാനോ പ്രിൻ്റ് ചെയ്യാനോ ആവശ്യമുള്ള സാഹചര്യങ്ങളിൽ ഇത് പലപ്പോഴും ആവശ്യമാണ്. ഫയലിന് പേരിടുന്നതിനെ ബ്ലോബ് തന്നെ പിന്തുണയ്‌ക്കാത്തതിനാൽ, ഒരു മറഞ്ഞിരിക്കുന്ന ലിങ്ക് എലമെൻ്റ് സൃഷ്‌ടിച്ച്, ആവശ്യമുള്ള ഫയൽ നാമം ഉപയോഗിച്ച് ഞങ്ങൾ ഈ പരിമിതി മറികടക്കുന്നു ഡൗൺലോഡ് ചെയ്യുക ആട്രിബ്യൂട്ട്. ശരിയായ ഫയൽനാമത്തിൽ ഡൗൺലോഡ് ട്രിഗർ ചെയ്യുന്നതിന് ഈ മറഞ്ഞിരിക്കുന്ന ലിങ്ക് പ്രോഗ്രാമാറ്റിക് ആയി "ക്ലിക്ക്" ചെയ്യപ്പെടും. ഈ രീതികളുടെ സംയോജനമാണ് ജാവാസ്ക്രിപ്റ്റിലെ ബ്ലബ് നാമകരണ പരിമിതിയ്ക്കുള്ള ഒരു സാധാരണ പരിഹാരമാർഗ്ഗം.

സെർവർ-സൈഡ് സൊല്യൂഷനുകൾക്കായി, ഒരു ഇഷ്‌ടാനുസൃത ഫയൽനാമമുള്ള PDF ഫയലുകൾ നേരിട്ട് നൽകുന്നതിന് ഞങ്ങൾ Node.js, Express എന്നിവ ഉപയോഗിക്കുന്നു. ഉപയോഗിച്ചുകൊണ്ട് fs.createReadStream(), ഫയൽ ക്ലയൻ്റിലേക്ക് കാര്യക്ഷമമായി സ്ട്രീം ചെയ്യുന്നു, വലിയ ഫയലുകൾ ഒരേസമയം മെമ്മറിയിലേക്ക് ലോഡുചെയ്യാതെ കൈകാര്യം ചെയ്യാൻ സെർവറിനെ അനുവദിക്കുന്നു. ദി res.setHeader() കമാൻഡ് ഇവിടെ നിർണായകമാണ്, കാരണം HTTP പ്രതികരണ തലക്കെട്ടുകൾ ഇഷ്‌ടാനുസൃത ഫയലിൻ്റെ പേരും MIME തരവും (അപ്ലിക്കേഷൻ/പിഡിഎഫ്) വ്യക്തമാക്കുന്നുവെന്ന് ഇത് ഉറപ്പാക്കുന്നു. PDF ജനറേറ്റുചെയ്യുന്നതോ സെർവറിൽ സംഭരിക്കുന്നതോ ആയ കൂടുതൽ സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾക്ക് ഈ രീതി അനുയോജ്യമാണ്.

ഈ സ്ക്രിപ്റ്റുകൾ മോഡുലാർ ആയും പുനരുപയോഗിക്കാവുന്ന തരത്തിലുമാണ് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. നിങ്ങൾ ഒരു ക്ലയൻ്റ് സൈഡ് പരിതസ്ഥിതിയിൽ ജോലി ചെയ്യുന്നുണ്ടോ എന്ന് ജാവാസ്ക്രിപ്റ്റ് അല്ലെങ്കിൽ ഒരു ബാക്കെൻഡ് പരിഹാരം Node.js, ഈ ടെക്‌നിക്കുകൾ നിങ്ങളുടെ PDF-കൾ ശരിയായ ഫയൽനാമത്തിൽ ഡെലിവർ ചെയ്യപ്പെടുകയോ തുറക്കുകയോ ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കുന്നു. രണ്ട് സമീപനങ്ങളും പ്രകടനത്തിനായി ഒപ്റ്റിമൈസ് ചെയ്‌തിരിക്കുന്നു കൂടാതെ 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');

JavaScript-ൽ ബ്ലോബ് ഫയൽനാമങ്ങൾക്കുള്ള പരിധികളും പരിഹാരങ്ങളും മനസ്സിലാക്കുന്നു

പ്രവർത്തിക്കുമ്പോൾ പ്രധാന വെല്ലുവിളികളിൽ ഒന്ന് ബ്ലോബ് ജാവാസ്ക്രിപ്റ്റിലെ ഒബ്ജക്റ്റുകൾ എന്നത് ഫയൽനാമങ്ങൾ സജ്ജീകരിക്കുന്നതിനുള്ള പരിമിതിയാണ്. ഒരു PDF അല്ലെങ്കിൽ ഏതെങ്കിലും ഫയൽ തരങ്ങൾ സൃഷ്ടിക്കുമ്പോൾ, ഒരു ഇഷ്‌ടാനുസൃത ഫയൽ നാമം നൽകുന്നതിനുള്ള നേരിട്ടുള്ള രീതിയെ ബ്ളോബുകൾ അന്തർലീനമായി പിന്തുണയ്ക്കുന്നില്ല. ഒരു പുതിയ ടാബിൽ ഈ ഫയലുകൾ തുറക്കാൻ ശ്രമിക്കുമ്പോഴോ ഒരു പ്രത്യേക സ്ലഗ് ഉപയോഗിച്ച് ഒരു ഡൗൺലോഡ് ട്രിഗർ ചെയ്യുമ്പോഴോ ഇത് പ്രത്യേകിച്ചും പ്രശ്‌നകരമാണ്. ബ്രൗസറിൻ്റെ ഡിഫോൾട്ട് സ്വഭാവം ഒരു അനിയന്ത്രിതമായ പേര് സൃഷ്ടിക്കുക എന്നതാണ്, അത് എല്ലായ്പ്പോഴും ഉപയോക്തൃ സൗഹൃദമോ ഫയലിൻ്റെ സന്ദർഭത്തിന് അനുയോജ്യമോ അല്ല.

ഈ പരിമിതി മറികടക്കാൻ, ഡെവലപ്പർമാർക്ക് HTML5 ഉപയോഗിക്കാം ഡൗൺലോഡ് ചെയ്യുക ആട്രിബ്യൂട്ട്, ഇത് ഡൗൺലോഡ് ചെയ്യുന്ന ഫയലിൻ്റെ പേര് നിർവചിക്കാൻ അനുവദിക്കുന്നു. JavaScript-ൽ ചലനാത്മകമായി ഒരു ആങ്കർ ഘടകം സൃഷ്ടിച്ച് സജ്ജീകരിക്കുന്നതിലൂടെ ഡൗൺലോഡ് ചെയ്യുക ആവശ്യമുള്ള ഫയലിൻ്റെ പേര് ആട്രിബ്യൂട്ട് ചെയ്യുക, ബ്ലോബ് ഉള്ളടക്കം ഡൗൺലോഡ് ചെയ്യുമ്പോൾ നമുക്ക് ഫയലിൻ്റെ പേര് നിയന്ത്രിക്കാനാകും. എന്നിരുന്നാലും, ഒരു പുതിയ ടാബിൽ ബ്ലബ് തുറക്കുമ്പോൾ ഈ രീതി പേരിനെ ബാധിക്കില്ല, കാരണം ഇത് ബ്ലോബ് URL-കൾ റെൻഡർ ചെയ്യുന്നതിനുള്ള ബ്രൗസറിൻ്റെ ബിൽറ്റ്-ഇൻ പ്രവർത്തനത്താൽ നിയന്ത്രിക്കപ്പെടുന്നു.

ഒരു ചട്ടക്കൂട് ഉപയോഗിച്ച് ബാക്കെൻഡിൽ നിന്ന് ഫയൽ സേവിക്കുക എന്നതാണ് മറ്റൊരു സമീപനം Node.js അല്ലെങ്കിൽ എക്‌സ്‌പ്രസ്, ക്ലയൻ്റിലേക്ക് അയച്ച ഫയലിൻ്റെ ഫയലിൻ്റെ പേര് നിയന്ത്രിക്കുന്നതിന് ഇഷ്‌ടാനുസൃത തലക്കെട്ടുകൾ സജ്ജമാക്കാൻ കഴിയും. ദി Content-Disposition ഒരു പുതിയ ടാബിൽ ഡൌൺലോഡ് ചെയ്യുകയോ തുറക്കുകയോ ചെയ്യുന്നത് പരിഗണിക്കാതെ തന്നെ ഫയലിൻ്റെ പേര് വ്യക്തമാക്കാൻ തലക്കെട്ട് നിങ്ങളെ അനുവദിക്കുന്നു. സെർവർ-സൈഡ് റെൻഡർ ചെയ്‌ത ഉള്ളടക്കത്തിന് ഈ രീതി കൂടുതൽ വഴക്കമുള്ളതാണ്, എന്നാൽ ക്ലയൻ്റ് സൈഡ് ജാവാസ്ക്രിപ്റ്റ് ബ്ലോബുകൾക്ക്, ഡൗൺലോഡ് ആട്രിബ്യൂട്ട് ഏറ്റവും ഫലപ്രദമായ പരിഹാരമാണ്.