jQuery ஐப் பயன்படுத்தி புதிய தாவலில் திறக்கப்பட்ட Blob PDF இன் ஸ்லக்கை மாற்றவும்

ஜாவாஸ்கிரிப்ட் மூலம் புதிய தாவல்களில் பிளாப் PDF ஸ்லக்ஸைக் கையாளுதல்

வலைப்பக்கத்தில் இருந்து PDFகளை உருவாக்குவது இணைய வளர்ச்சியில் பொதுவான தேவையாகும். நீங்கள் ஒரு டைனமிக் PDF ஐ உருவாக்கி, அதை புதிய தாவலில் திறந்து, கோப்பிற்கான தனிப்பயன் கோப்பு பெயர் அல்லது ஸ்லக்கை வழங்க வேண்டும். இருப்பினும், கோப்பின் ஸ்லக்கை மாற்றும் போது ஜாவாஸ்கிரிப்ட் ப்ளாப்களுடன் பணிபுரிவது சவாலாக உள்ளது.

தரவிறக்கம் செய்யக்கூடிய உள்ளடக்கத்தைக் கையாளுவதற்கு குமிழ்கள் இன்றியமையாததாக இருக்கும் போது, ​​ஒரு வரம்பு நேரடியாக கோப்புப் பெயர் சொத்தை அமைக்க அல்லது மாற்ற இயலாமை. கோப்புகளை உருவாக்கும் போது டெவலப்பர்கள் பெரும்பாலும் பெயர்கள் அல்லது கோப்பு பெயர்களை ப்ளாப்களுக்கு ஒதுக்க முயற்சிப்பார்கள், ஆனால் உலாவி கட்டுப்பாடுகள் காரணமாக இதுபோன்ற முயற்சிகள் பொதுவாக தோல்வியடையும்.

போன்ற பண்புகளை அமைக்க முயற்சித்திருந்தால் குமிழ்.பெயர் அல்லது குமிழ்.கோப்பு பெயர் வெற்றி இல்லாமல் உங்கள் குறியீட்டில், நீங்கள் தனியாக இல்லை. குமிழ் நடத்தையைத் தனிப்பயனாக்க முயற்சிக்கும்போது இது ஒரு பொதுவான பிரச்சினையாகும். தனிப்பயன் ஸ்லக் மூலம் உருவாக்கப்பட்ட PDF ஐ திறக்க வேண்டிய அவசியம் இதை மேலும் வெறுப்படையச் செய்யலாம்.

இந்தக் கட்டுரையில், ஜாவாஸ்கிரிப்டில் ப்ளாப்களைப் பயன்படுத்தி PDFகளை உருவாக்குவதற்கான சாத்தியமான தீர்வுகள் மற்றும் தீர்வுகளை ஆராய்வோம், மேலும் கோப்பு சரியான தனிப்பயன் ஸ்லக் மூலம் புதிய தாவலில் திறக்கப்படுவதை உறுதிசெய்வோம். இந்த செயல்முறையின் மூலம் உங்களுக்கு வழிகாட்ட நடைமுறை குறியீடு எடுத்துக்காட்டுகளையும் நாங்கள் பார்ப்போம்.

ஜாவாஸ்கிரிப்ட் மற்றும் jQuery ஐப் பயன்படுத்தி தனிப்பயன் ஸ்லக் மூலம் PDF ஐ உருவாக்குகிறது

தனிப்பயன் கோப்புப்பெயர் அல்லது ஸ்லக் கொண்ட புதிய தாவலில் வலைப்பக்கத்திலிருந்து உருவாக்கப்பட்ட PDF கோப்பைத் திறப்பதற்கான சவாலை எதிர்கொள்ளும் வகையில் ஸ்கிரிப்ட்கள் வழங்கப்படுகின்றன. ஜாவாஸ்கிரிப்டில் ப்ளாப்களுடன் பணிபுரியும் போது டெவலப்பர்கள் எதிர்கொள்ளும் முக்கிய சிக்கல்களில் ஒன்று, ஒரு கோப்பின் பெயரை நேரடியாக ஒதுக்க இயலாமை, இது தனிப்பயன் ஸ்லக்கை அமைப்பதற்கு அவசியம். எங்கள் தீர்வு, முக்கிய நுட்பத்தை உருவாக்குவதை உள்ளடக்கியது குமிழ் நாம் மாறும் வகையில் உருவாக்கும் PDF உள்ளடக்கத்திலிருந்து. பயன்படுத்தி URL.createObjectURL() செயல்பாடு, இந்த Blob ஐ உலாவி திறக்க அல்லது பதிவிறக்கக்கூடிய ஆதாரமாக மாற்றுவோம்.

Blob URL உருவாக்கப்பட்டவுடன், நாங்கள் பயன்படுத்துகிறோம் window.open() ஒரு புதிய தாவலில் PDF ஐக் காண்பிக்க, ஒரு பயனர் ஆவணத்தை முன்னோட்டமிட அல்லது அச்சிட வேண்டிய சூழ்நிலைகளில் இது அடிக்கடி தேவைப்படுகிறது. கோப்பை பெயரிடுவதை ப்ளாப் ஆதரிக்காததால், மறைக்கப்பட்ட இணைப்பு உறுப்பை உருவாக்கி, விரும்பிய கோப்பின் பெயரைப் பயன்படுத்தி இந்த வரம்பைத் தவிர்க்கிறோம். பதிவிறக்கம் பண்பு. இந்த மறைக்கப்பட்ட இணைப்பு சரியான கோப்புப் பெயருடன் பதிவிறக்கத்தைத் தூண்டுவதற்கு நிரல் ரீதியாக "கிளிக்" செய்யப்படுகிறது. இந்த முறைகளின் கலவையானது ஜாவாஸ்கிரிப்டில் ப்ளாப் பெயரிடும் வரம்புக்கான பொதுவான தீர்வாகும்.

சர்வர் பக்க தீர்வுகளுக்கு, தனிப்பயன் கோப்பு பெயருடன் நேரடியாக PDF கோப்புகளை வழங்க Node.js மற்றும் Express ஐப் பயன்படுத்துகிறோம். பயன்படுத்துவதன் மூலம் fs.createReadStream(), கோப்பு திறம்பட கிளையண்டிற்கு ஸ்ட்ரீம் செய்யப்படுகிறது, பெரிய கோப்புகளை ஒரே நேரத்தில் நினைவகத்தில் ஏற்றாமல் சர்வர் கையாள அனுமதிக்கிறது. தி res.setHeader() கட்டளை இங்கே முக்கியமானது, ஏனெனில் இது HTTP மறுமொழி தலைப்புகள் தனிப்பயன் கோப்பு பெயர் மற்றும் MIME வகையை (பயன்பாடு/pdf) குறிப்பிடுவதை உறுதி செய்கிறது. 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');

ஜாவாஸ்கிரிப்டில் ப்ளாப் கோப்பு பெயர்களுக்கான வரம்புகள் மற்றும் தீர்வுகளைப் புரிந்துகொள்வது

வேலை செய்யும் போது முக்கிய சவால்களில் ஒன்று குமிழ் ஜாவாஸ்கிரிப்டில் உள்ள ஆப்ஜெக்ட்கள் என்பது கோப்பு பெயர்களை அமைப்பதில் உள்ள வரம்பு. ஒரு PDF அல்லது ஏதேனும் கோப்பு வகையை உருவாக்கும் போது, ​​தனிப்பயன் கோப்புப் பெயரை ஒதுக்குவதற்கான நேரடி முறையை ப்ளாப்கள் இயல்பாகவே ஆதரிக்காது. புதிய தாவலில் இந்தக் கோப்புகளைத் திறக்க முயற்சிக்கும் போது அல்லது குறிப்பிட்ட ஸ்லக் மூலம் பதிவிறக்கத்தைத் தூண்டும் போது இது மிகவும் சிக்கலாகிவிடும். உலாவியின் இயல்புநிலை நடத்தை என்பது தன்னிச்சையான பெயரை உருவாக்குவதாகும், இது எப்போதும் பயனர் நட்பு அல்லது கோப்பின் சூழலுக்கு ஏற்றதாக இருக்காது.

இந்த வரம்பைப் போக்க, டெவலப்பர்கள் HTML5 ஐப் பயன்படுத்தலாம் பதிவிறக்கம் பண்புக்கூறு, இது பதிவிறக்கம் செய்யப்படும் கோப்பிற்கான கோப்பு பெயரை வரையறுக்க அனுமதிக்கிறது. ஜாவாஸ்கிரிப்டில் மாறும் வகையில் ஒரு ஆங்கர் உறுப்பை உருவாக்கி, அமைப்பதன் மூலம் பதிவிறக்கம் விரும்பிய கோப்புப் பெயருக்கான பண்புக்கூறு, குமிழ் உள்ளடக்கம் பதிவிறக்கப்படும் போது, ​​கோப்பு பெயரைக் கட்டுப்படுத்தலாம். இருப்பினும், ப்ளாப் URLகளை வழங்குவதற்கான உலாவியின் உள்ளமைக்கப்பட்ட செயல்பாட்டால் இது கட்டுப்படுத்தப்படும் என்பதால், புதிய தாவலில் ப்ளாப் திறக்கப்படும்போது இந்த முறை பெயரைப் பாதிக்காது.

மற்றொரு அணுகுமுறை, பின்தளத்தில் இருந்து கோப்பை வழங்குவது போன்ற கட்டமைப்பைப் பயன்படுத்தி Node.js அல்லது எக்ஸ்பிரஸ், கிளையண்டிற்கு அனுப்பப்பட்ட கோப்பின் பெயரைக் கட்டுப்படுத்த தனிப்பயன் தலைப்புகளை அமைக்கலாம். தி Content-Disposition கோப்பு பதிவிறக்கம் செய்யப்படுகிறதா அல்லது புதிய தாவலில் திறக்கப்படுகிறதா என்பதைப் பொருட்படுத்தாமல் அதன் பெயரைக் குறிப்பிட தலைப்பு உங்களை அனுமதிக்கிறது. இந்த முறை சர்வர்-பக்கம் ரெண்டர் செய்யப்பட்ட உள்ளடக்கத்திற்கு மிகவும் நெகிழ்வானது, ஆனால் கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட் குமிழ்களுக்கு, பதிவிறக்க பண்பு மிகவும் பயனுள்ள தீர்வாகும்.