ஜாவாஸ்கிரிப்ட் மூலம் புதிய தாவல்களில் பிளாப் PDF ஸ்லக்ஸைக் கையாளுதல்
வலைப்பக்கத்தில் இருந்து PDFகளை உருவாக்குவது இணைய வளர்ச்சியில் பொதுவான தேவையாகும். நீங்கள் ஒரு டைனமிக் PDF ஐ உருவாக்கி, அதை புதிய தாவலில் திறந்து, கோப்பிற்கான தனிப்பயன் கோப்பு பெயர் அல்லது ஸ்லக்கை வழங்க வேண்டும். இருப்பினும், கோப்பின் ஸ்லக்கை மாற்றும் போது ஜாவாஸ்கிரிப்ட் ப்ளாப்களுடன் பணிபுரிவது சவாலாக உள்ளது.
தரவிறக்கம் செய்யக்கூடிய உள்ளடக்கத்தைக் கையாளுவதற்கு குமிழ்கள் இன்றியமையாததாக இருக்கும் போது, ஒரு வரம்பு நேரடியாக கோப்புப் பெயர் சொத்தை அமைக்க அல்லது மாற்ற இயலாமை. கோப்புகளை உருவாக்கும் போது டெவலப்பர்கள் பெரும்பாலும் பெயர்கள் அல்லது கோப்பு பெயர்களை ப்ளாப்களுக்கு ஒதுக்க முயற்சிப்பார்கள், ஆனால் உலாவி கட்டுப்பாடுகள் காரணமாக இதுபோன்ற முயற்சிகள் பொதுவாக தோல்வியடையும்.
போன்ற பண்புகளை அமைக்க முயற்சித்திருந்தால் அல்லது வெற்றி இல்லாமல் உங்கள் குறியீட்டில், நீங்கள் தனியாக இல்லை. குமிழ் நடத்தையைத் தனிப்பயனாக்க முயற்சிக்கும்போது இது ஒரு பொதுவான பிரச்சினையாகும். தனிப்பயன் ஸ்லக் மூலம் உருவாக்கப்பட்ட PDF ஐ திறக்க வேண்டிய அவசியம் இதை மேலும் வெறுப்படையச் செய்யலாம்.
இந்தக் கட்டுரையில், ஜாவாஸ்கிரிப்டில் ப்ளாப்களைப் பயன்படுத்தி PDFகளை உருவாக்குவதற்கான சாத்தியமான தீர்வுகள் மற்றும் தீர்வுகளை ஆராய்வோம், மேலும் கோப்பு சரியான தனிப்பயன் ஸ்லக் மூலம் புதிய தாவலில் திறக்கப்படுவதை உறுதிசெய்வோம். இந்த செயல்முறையின் மூலம் உங்களுக்கு வழிகாட்ட நடைமுறை குறியீடு எடுத்துக்காட்டுகளையும் நாங்கள் பார்ப்போம்.
| கட்டளை | பயன்பாட்டின் உதாரணம் |
|---|---|
| Blob() | ப்ளாப் கன்ஸ்ட்ரக்டர் புதியதை உருவாக்குகிறது (ப்ளாப்) மூல தரவுகளிலிருந்து. வலைப்பக்கத் தரவிலிருந்து PDF உள்ளடக்கத்தை உருவாக்க இது முக்கியமானது. எடுத்துக்காட்டு: புதிய ப்ளாப்([தரவு], {வகை: 'பயன்பாடு/pdf'}); |
| URL.createObjectURL() | ப்ளாப் பொருளுக்கு ஒரு URL ஐ உருவாக்குகிறது, ப்ளாப்பை தரவிறக்கம் செய்யக்கூடிய ஆதாரமாக உலாவி செயல்படுத்துகிறது. இந்த URL ஆனது PDF ஐ அணுக அல்லது காண்பிக்க பயன்படுகிறது. எடுத்துக்காட்டு: var blobURL = window.URL.createObjectURL(blob); |
| window.open() | தனிப்பயன் ஸ்லக்குடன் உருவாக்கப்பட்ட குமிழ் உள்ளடக்கத்தை (PDF) காண்பிக்க புதிய உலாவி தாவல் அல்லது சாளரத்தைத் திறக்கும். புதிய தாவல் செயல்பாட்டைக் கையாள இந்த முறை அவசியம். எடுத்துக்காட்டு: window.open(blobURL, '_blank'); |
| download | ஒரு HTML5 பண்புக்கூறு, பயனர்கள் ஒரு குறிப்பிட்ட கோப்பு பெயரைக் கொண்ட கோப்பை நேரடியாகப் பதிவிறக்க அனுமதிக்கிறது. ப்ளாப்புக்கான தனிப்பயன் கோப்புப் பெயரை நீங்கள் பரிந்துரைக்க விரும்பும்போது இது முக்கியமானது. எடுத்துக்காட்டு: link.download = 'custom-slug.pdf'; |
| pipe() | Node.js இல் பயன்படுத்தப்பட்டது கிளையண்டிற்கு கோப்பு உள்ளடக்கம், PDFகள் போன்ற பெரிய கோப்புகள் திறமையாக வழங்கப்படுவதை உறுதி செய்கிறது. இது ஸ்ட்ரீமில் இருந்து நேரடியாக தரவு பரிமாற்றத்தை அனுமதிக்கிறது. எடுத்துக்காட்டு: pdfStream.pipe(res); |
| setHeader() | பதில் பொருளில் தனிப்பயன் தலைப்புகளை வரையறுக்கிறது. PDF ஆனது சர்வரிலிருந்து பதிவிறக்கம் செய்யும்போது சரியான MIME வகை மற்றும் தனிப்பயன் கோப்புப் பெயரைப் பெறுவதை உறுதிசெய்வதற்கு இந்த முறை முக்கியமானது. எடுத்துக்காட்டு: res.setHeader('Content-Disposition', 'attachment; filename="custom-slug.pdf"'); |
| createReadStream() | Node.js இல், இந்த முறை சர்வரின் கோப்பு முறைமையிலிருந்து கோப்பை (எ.கா. PDF) ஸ்ட்ரீம் செய்கிறது. இது பெரிய கோப்புகளை ஒரே நேரத்தில் நினைவகத்தில் ஏற்றாமல் திறமையாக கையாளுகிறது. எடுத்துக்காட்டு: fs.createReadStream(pdfFilePath); |
| click() | தூண்டுகிறது a ஒரு மறைக்கப்பட்ட இணைப்பு உறுப்பு நிரல்ரீதியாக. பயனர் தொடர்பு இல்லாமல் கோப்பு பதிவிறக்கத்தைத் தொடங்க இது இங்கே பயன்படுத்தப்படுகிறது. எடுத்துக்காட்டு: link.click(); |
ஜாவாஸ்கிரிப்ட் மற்றும் jQuery ஐப் பயன்படுத்தி தனிப்பயன் ஸ்லக் மூலம் PDF ஐ உருவாக்குகிறது
தனிப்பயன் கோப்புப்பெயர் அல்லது ஸ்லக் கொண்ட புதிய தாவலில் வலைப்பக்கத்திலிருந்து உருவாக்கப்பட்ட PDF கோப்பைத் திறப்பதற்கான சவாலை எதிர்கொள்ளும் வகையில் ஸ்கிரிப்ட்கள் வழங்கப்படுகின்றன. ஜாவாஸ்கிரிப்டில் ப்ளாப்களுடன் பணிபுரியும் போது டெவலப்பர்கள் எதிர்கொள்ளும் முக்கிய சிக்கல்களில் ஒன்று, ஒரு கோப்பின் பெயரை நேரடியாக ஒதுக்க இயலாமை, இது தனிப்பயன் ஸ்லக்கை அமைப்பதற்கு அவசியம். எங்கள் தீர்வு, முக்கிய நுட்பத்தை உருவாக்குவதை உள்ளடக்கியது நாம் மாறும் வகையில் உருவாக்கும் PDF உள்ளடக்கத்திலிருந்து. பயன்படுத்தி செயல்பாடு, இந்த Blob ஐ உலாவி திறக்க அல்லது பதிவிறக்கக்கூடிய ஆதாரமாக மாற்றுவோம்.
Blob URL உருவாக்கப்பட்டவுடன், நாங்கள் பயன்படுத்துகிறோம் ஒரு புதிய தாவலில் PDF ஐக் காண்பிக்க, ஒரு பயனர் ஆவணத்தை முன்னோட்டமிட அல்லது அச்சிட வேண்டிய சூழ்நிலைகளில் இது அடிக்கடி தேவைப்படுகிறது. கோப்பை பெயரிடுவதை ப்ளாப் ஆதரிக்காததால், மறைக்கப்பட்ட இணைப்பு உறுப்பை உருவாக்கி, விரும்பிய கோப்பின் பெயரைப் பயன்படுத்தி இந்த வரம்பைத் தவிர்க்கிறோம். பண்பு. இந்த மறைக்கப்பட்ட இணைப்பு சரியான கோப்புப் பெயருடன் பதிவிறக்கத்தைத் தூண்டுவதற்கு நிரல் ரீதியாக "கிளிக்" செய்யப்படுகிறது. இந்த முறைகளின் கலவையானது ஜாவாஸ்கிரிப்டில் ப்ளாப் பெயரிடும் வரம்புக்கான பொதுவான தீர்வாகும்.
சர்வர் பக்க தீர்வுகளுக்கு, தனிப்பயன் கோப்பு பெயருடன் நேரடியாக PDF கோப்புகளை வழங்க Node.js மற்றும் Express ஐப் பயன்படுத்துகிறோம். பயன்படுத்துவதன் மூலம் , கோப்பு திறம்பட கிளையண்டிற்கு ஸ்ட்ரீம் செய்யப்படுகிறது, பெரிய கோப்புகளை ஒரே நேரத்தில் நினைவகத்தில் ஏற்றாமல் சர்வர் கையாள அனுமதிக்கிறது. தி கட்டளை இங்கே முக்கியமானது, ஏனெனில் இது HTTP மறுமொழி தலைப்புகள் தனிப்பயன் கோப்பு பெயர் மற்றும் MIME வகையை (பயன்பாடு/pdf) குறிப்பிடுவதை உறுதி செய்கிறது. PDF உருவாக்கப்படும் அல்லது சர்வரில் சேமிக்கப்படும் மிகவும் சிக்கலான பயன்பாடுகளுக்கு இந்த முறை சிறந்தது.
இந்த ஸ்கிரிப்டுகள் மட்டு மற்றும் மீண்டும் பயன்படுத்தக்கூடியதாக வடிவமைக்கப்பட்டுள்ளன. நீங்கள் கிளையண்ட் பக்க சூழலில் வேலை செய்கிறீர்களா என்பதைப் பயன்படுத்தி அல்லது பின்தளத்தில் தீர்வு , இந்த நுட்பங்கள் உங்கள் PDFகள் வழங்கப்படுவதை அல்லது சரியான கோப்புப்பெயருடன் திறக்கப்படுவதை உறுதி செய்கிறது. இரண்டு அணுகுமுறைகளும் செயல்திறனுக்காக உகந்ததாக உள்ளன மற்றும் PDFகள் மாறும் வகையில் உருவாக்கப்படும் அல்லது சர்வர் பக்கத்தில் சேமிக்கப்படும் காட்சிகளைக் கையாள முடியும். முன்-இறுதி மற்றும் பின்-இறுதி தீர்வுகளை வழங்குவதன் மூலம், இது நெகிழ்வுத்தன்மையை உறுதிசெய்கிறது, உங்கள் திட்டத்தின் தேவைகளைப் பொறுத்து மிகவும் பொருத்தமான முறையைச் செயல்படுத்த அனுமதிக்கிறது.
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு புதிய தாவலில் பிளாப்-PDF இன் ஸ்லக்கை மாற்றுவது எப்படி
ஜாவாஸ்கிரிப்ட் மற்றும் jQuery ஐப் பயன்படுத்தி முன்-இறுதி தீர்வு
// Function to generate and open PDF in a new tab with custom filenamefunction 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 objectvar blobURL = window.URL.createObjectURL(blob);// Create a temporary link to trigger the downloadvar link = document.createElement('a');link.href = blobURL;link.download = filename; // Custom slug or filename// Open in a new tabwindow.open(blobURL, '_blank');}// Example usage: data could be the generated PDF contentvar pdfData = '...'; // Your PDF binary data hereopenPDFWithCustomName(pdfData, 'custom-slug.pdf');
Node.js உடன் Blob PDF இன் பின்தள தலைமுறை
Node.js மற்றும் Express ஐப் பயன்படுத்தி பின்தள தீர்வு
// Require necessary modulesconst express = require('express');const fs = require('fs');const path = require('path');const app = express();// Serve generated PDF with custom slugapp.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 serverapp.listen(3000, () => {console.log('Server running on http://localhost:3000');});// To test, navigate to http://localhost:3000/generate-pdf
HTML5 பதிவிறக்க பண்புக்கூறைப் பயன்படுத்தி மாற்று அணுகுமுறை
HTML5 பதிவிறக்க பண்புக்கூறைப் பயன்படுத்தி முன்-இறுதி தீர்வு
// Function to open PDF in new tab with custom filename using download attributefunction 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 downloadwindow.open(url, '_blank'); // Opens PDF in a new tab}// Example callvar pdfData = '...'; // PDF binary contentopenPDFInNewTab(pdfData, 'new-slug.pdf');
ஜாவாஸ்கிரிப்டில் ப்ளாப் கோப்பு பெயர்களுக்கான வரம்புகள் மற்றும் தீர்வுகளைப் புரிந்துகொள்வது
வேலை செய்யும் போது முக்கிய சவால்களில் ஒன்று ஜாவாஸ்கிரிப்டில் உள்ள ஆப்ஜெக்ட்கள் என்பது கோப்பு பெயர்களை அமைப்பதில் உள்ள வரம்பு. ஒரு PDF அல்லது ஏதேனும் கோப்பு வகையை உருவாக்கும் போது, தனிப்பயன் கோப்புப் பெயரை ஒதுக்குவதற்கான நேரடி முறையை ப்ளாப்கள் இயல்பாகவே ஆதரிக்காது. புதிய தாவலில் இந்தக் கோப்புகளைத் திறக்க முயற்சிக்கும் போது அல்லது குறிப்பிட்ட ஸ்லக் மூலம் பதிவிறக்கத்தைத் தூண்டும் போது இது மிகவும் சிக்கலாகிவிடும். உலாவியின் இயல்புநிலை நடத்தை என்பது தன்னிச்சையான பெயரை உருவாக்குவதாகும், இது எப்போதும் பயனர் நட்பு அல்லது கோப்பின் சூழலுக்கு ஏற்றதாக இருக்காது.
இந்த வரம்பைப் போக்க, டெவலப்பர்கள் HTML5 ஐப் பயன்படுத்தலாம் பண்புக்கூறு, இது பதிவிறக்கம் செய்யப்படும் கோப்பிற்கான கோப்பு பெயரை வரையறுக்க அனுமதிக்கிறது. ஜாவாஸ்கிரிப்டில் மாறும் வகையில் ஒரு ஆங்கர் உறுப்பை உருவாக்கி, அமைப்பதன் மூலம் பதிவிறக்கம் விரும்பிய கோப்புப் பெயருக்கான பண்புக்கூறு, குமிழ் உள்ளடக்கம் பதிவிறக்கப்படும் போது, கோப்பு பெயரைக் கட்டுப்படுத்தலாம். இருப்பினும், ப்ளாப் URLகளை வழங்குவதற்கான உலாவியின் உள்ளமைக்கப்பட்ட செயல்பாட்டால் இது கட்டுப்படுத்தப்படும் என்பதால், புதிய தாவலில் ப்ளாப் திறக்கப்படும்போது இந்த முறை பெயரைப் பாதிக்காது.
மற்றொரு அணுகுமுறை, பின்தளத்தில் இருந்து கோப்பை வழங்குவது போன்ற கட்டமைப்பைப் பயன்படுத்தி அல்லது எக்ஸ்பிரஸ், கிளையண்டிற்கு அனுப்பப்பட்ட கோப்பின் பெயரைக் கட்டுப்படுத்த தனிப்பயன் தலைப்புகளை அமைக்கலாம். தி கோப்பு பதிவிறக்கம் செய்யப்படுகிறதா அல்லது புதிய தாவலில் திறக்கப்படுகிறதா என்பதைப் பொருட்படுத்தாமல் அதன் பெயரைக் குறிப்பிட தலைப்பு உங்களை அனுமதிக்கிறது. இந்த முறை சர்வர்-பக்கம் ரெண்டர் செய்யப்பட்ட உள்ளடக்கத்திற்கு மிகவும் நெகிழ்வானது, ஆனால் கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட் குமிழ்களுக்கு, பதிவிறக்க பண்பு மிகவும் பயனுள்ள தீர்வாகும்.
- ஜாவாஸ்கிரிப்டில் ப்ளாப் கோப்பின் ஸ்லக்கை மாற்ற முடியுமா?
- இல்லை, பொருள்கள் நேரடி கோப்பு பெயர் ஒதுக்கீட்டை ஆதரிக்காது. நீங்கள் பயன்படுத்த வேண்டும் பதிவிறக்கங்களுக்கான பண்புக்கூறு.
- தனிப்பயன் கோப்புப்பெயருடன் புதிய தாவலில் ப்ளாப்பை எவ்வாறு திறப்பது?
- புதிய தாவலில் திறக்கப்பட்ட குமிழ்கள் நேரடியாக தனிப்பயன் ஸ்லக்கைக் கொண்டிருக்க முடியாது. பதிவிறக்கங்களுக்கு, நீங்கள் பயன்படுத்தலாம் பண்பு.
- ஜாவாஸ்கிரிப்டில் Blob கோப்பு பதிவிறக்கங்களைக் கையாள சிறந்த வழி எது?
- உடன் மறைக்கப்பட்ட இணைப்பு உறுப்பைப் பயன்படுத்தவும் தனிப்பயன் கோப்பு பெயரை ஒதுக்க பண்பு.
- சர்வரில் கோப்பு பெயரை அமைக்க முடியுமா?
- ஆம், பயன்படுத்துவதன் மூலம் உடன் Node.js போன்ற பின்தளத்தில்.
- URL.createObjectURL() முறை Blob உடன் எவ்வாறு வேலை செய்கிறது?
- இது ஒரு ப்ளாப்பிற்கான URL ஐ உருவாக்குகிறது, அதை திறக்கலாம் அல்லது பதிவிறக்கலாம், ஆனால் கோப்பு பெயர் அமைப்புகளை சேர்க்காது.
கோப்பு பெயரிடுதலைக் கையாளுதல் ஜாவாஸ்கிரிப்டில் உள்ள பொருள்கள் சவாலானதாக இருக்கும், குறிப்பாக புதிய தாவலில் கோப்புகளைத் திறக்கும் போது. ப்ளாப்கள் நேரடி ஸ்லக் மாற்றங்களை அனுமதிக்கவில்லை என்றாலும், பதிவிறக்கங்களுக்கான கோப்புப்பெயர்களைக் கட்டுப்படுத்த உதவும் பதிவிறக்கப் பண்புக்கூறு போன்ற தீர்வுகள் உள்ளன.
மேலும் மேம்பட்ட கட்டுப்பாட்டுக்கு, அமைப்பது போன்ற சர்வர் பக்க அணுகுமுறைகள் கோப்புகள் டெலிவரி செய்யப்படும்போது அவை விரும்பிய பெயரைக் கொண்டிருப்பதை உறுதிசெய்ய தலைப்பு பயன்படுத்தப்படலாம். உங்கள் திட்டத் தேவைகளைப் பொறுத்து, கிளையன்ட் அல்லது சர்வர் பக்க தீர்வுகள் திறம்பட பயன்படுத்தப்படலாம்.
- இந்த ஆதாரம் ஜாவாஸ்கிரிப்டில் ப்ளாப் பொருட்களை எவ்வாறு கையாள்வது என்பதை விளக்குகிறது மற்றும் கோப்பு பதிவிறக்கங்கள் மற்றும் கோப்பு பெயர்களுடன் பணிபுரிவது பற்றிய நுண்ணறிவுகளை வழங்குகிறது. MDN Web Docs - Blob API
- இணையப் பயன்பாடுகளில் பதிவிறக்கும் போது கோப்புப் பெயர்களைக் கட்டுப்படுத்த HTML5 இல் பதிவிறக்கப் பண்புக்கூறின் பயன்பாட்டை இந்தக் கட்டுரை விவரிக்கிறது. W3Schools - HTML பதிவிறக்க பண்புக்கூறு
- Node.js இல் கோப்பு ஸ்ட்ரீமிங்கைக் கையாள்வது பற்றிய தகவல், குறிப்பாக எப்படி பயன்படுத்துவது போன்ற தனிப்பயன் தலைப்புகளை அமைக்கவும் . Node.js HTTP பரிவர்த்தனை வழிகாட்டி