JavaScript மற்றும் SheetJS மூலம் எக்செல் கோப்புகளில் படங்களை உட்பொதித்தல்
Excel (.xlsx) கோப்புகளை உருவாக்கும் Chrome நீட்டிப்பை உருவாக்கும்போது, படங்களை நேரடியாக கலங்களில் உட்பொதிப்பது சவாலான பணியாக இருக்கும். ஜாவாஸ்கிரிப்ட் மற்றும் SheetJS போன்ற நூலகங்கள் விரிதாள்களை உருவாக்குவதையும் திருத்துவதையும் எளிதாக்கும் அதே வேளையில், உட்பொதிக்கப்பட்ட படங்களைக் கையாளுவதற்கு மிகவும் குறிப்பிட்ட கையாளுதல் தேவைப்படுகிறது.
பல சமயங்களில், டெவலப்பர்கள் படங்களை நேரடியாக உட்பொதிப்பதை விட கலங்களுக்கு பட இணைப்புகளை மட்டுமே சேர்க்க முடியும் என்ற வரம்புகளை எதிர்கொள்கின்றனர். குறிப்பாக Chrome நீட்டிப்புகள் போன்ற உலாவிச் சூழலில் படத் தரவு மாற்றம் மற்றும் எக்செல் கோப்பு வடிவமைப்பில் உள்ள சிக்கல்களால் இந்தச் சிக்கல் எழுகிறது.
இந்தக் கட்டுரையில், ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி எக்செல் கோப்பு கலங்களில் நேரடியாக படங்களை உட்பொதிப்பதற்கான தீர்வை ஆராய்வோம். படங்கள் HTML உறுப்புகளிலிருந்து பெறப்பட்டு, பொருத்தமான எக்செல் கலங்களில் செருகப்பட்டு, அவர்களின் விரிதாள்களுக்குள் காட்சித் தரவு தேவைப்படும் பயனர்களுக்கு மிகவும் தடையற்ற அனுபவத்தை வழங்கும்.
ExcelJS போன்ற நூலகங்களை எவ்வாறு ஒருங்கிணைப்பது மற்றும் பாதுகாக்கப்பட்ட Chrome நீட்டிப்பு சூழலில் படங்களை உட்பொதிப்பது போன்ற பொதுவான சவால்களை எவ்வாறு சமாளிப்பது என்பதை நாங்கள் விவாதிப்போம். கூடுதலாக, வெற்றிகரமாக செயல்படுத்தப்படுவதை உறுதிசெய்ய Node.js மற்றும் Chrome நீட்டிப்பு அணுகுமுறைகளுக்கு இடையே உள்ள வேறுபாடுகளை மதிப்பாய்வு செய்வோம்.
| கட்டளை | பயன்பாட்டின் உதாரணம் |
|---|---|
| ExcelJS.Workbook() | இது ExcelJS நூலகத்தைப் பயன்படுத்தி Node.js சூழலில் புதிய Excel பணிப்புத்தகப் பொருளை உருவாக்குகிறது. பணித்தாள்கள், வடிவமைத்தல் மற்றும் படங்கள் உட்பட புதிதாக எக்செல் கோப்புகளை உருவாக்க இது அவசியம். |
| addWorksheet() | இந்த முறை ஒரு புதிய ஒர்க் ஷீட்டை ஒர்க்புக்கில் சேர்க்கிறது. இந்த சிக்கலின் சூழலில், தரவு (உரை மற்றும் படங்கள் இரண்டும்) செருகக்கூடிய ஒரு தாளை உருவாக்க இது பயன்படுகிறது. |
| axios.get() | URL இலிருந்து படத் தரவைப் பெறப் பயன்படுகிறது. இது பைனரி படத் தரவை வரிசை இடையக வடிவத்தில் மீட்டெடுக்கிறது, இது எக்செல் கலங்களில் படங்களை உட்பொதிக்கத் தேவையானது. |
| workbook.addImage() | இந்த கட்டளை எக்செல் பணிப்புத்தகத்தில் ஒரு படத்தை சேர்க்கிறது. படத்தை பைனரி தரவுகளின் இடையகமாக வழங்கலாம், இது குறிப்பிட்ட கலங்களில் படங்களை உட்பொதிக்க இன்றியமையாதது. |
| worksheet.addImage() | இந்த முறையானது, ஒரு குறிப்பிட்ட செல் அல்லது பணித்தாளில் உள்ள கலங்களின் வரம்பில் சேர்க்கப்பட்ட படத்தை வைப்பதற்குப் பொறுப்பாகும், இது உரைத் தரவுகளுடன் காட்சி கூறுகளை உட்பொதிக்க அனுமதிக்கிறது. |
| fetch() | உலாவி சூழலில், தொலை சேவையகத்திலிருந்து படத்தைக் கோரவும், அதை ஒரு குமிழியாக மீட்டெடுக்கவும் இந்த கட்டளை பயன்படுத்தப்படுகிறது. ப்ளாப் பின்னர் எக்செல் இல் உட்பொதிக்க ஒரு அடிப்படை64-குறியீடு செய்யப்பட்ட சரமாக மாற்றப்படுகிறது. |
| FileReader.readAsDataURL() | இந்த கட்டளை பட URL இலிருந்து பெறப்பட்ட ப்ளாப் (பைனரி பெரிய பொருள்) தரவை ஒரு base64 சரமாக மாற்றுகிறது, இது SheetJS வழியாக எக்செல் கோப்பில் உட்பொதிக்க இணக்கமாக இருக்கும். |
| aoa_to_sheet() | SheetJS இலிருந்து இந்த முறை வரிசைகளின் வரிசையை (AoA) எக்செல் தாளாக மாற்றுகிறது. உரை மற்றும் படங்கள் இரண்டையும் உள்ளடக்கிய எளிய தரவு கட்டமைப்புகளை அமைப்பதற்கு இது மிகவும் பயனுள்ளதாக இருக்கும். |
| writeFile() | ExcelJS மற்றும் SheetJS இரண்டிலும் உள்ள இந்தச் செயல்பாடு, உட்பொதிக்கப்பட்ட படங்களுடன் உருவாக்கப்பட்ட Excel கோப்பை உள்ளூர் கோப்பு முறைமையில் சேமிக்கிறது. பணிப்புத்தகத்தை உருவாக்கி தேவையான அனைத்து கூறுகளையும் சேர்த்த பிறகு இது இறுதி கட்டமாகும். |
ஜாவாஸ்கிரிப்ட் மற்றும் எக்செல்ஜேஎஸ் மூலம் படங்களை எக்செல் செல்களில் உட்பொதிப்பது எப்படி
நான் வழங்கிய ஸ்கிரிப்ட் பயன்படுத்தி எக்செல் கலங்களில் நேரடியாக படங்களை உட்பொதிப்பதில் உள்ள சிக்கலை தீர்க்கிறது ஜாவாஸ்கிரிப்ட், ExcelJS மற்றும் Axios. முதலில், கட்டளையுடன் ExcelJS ஐப் பயன்படுத்தி புதிய பணிப்புத்தகத்தைத் துவக்குவதன் மூலம் ஸ்கிரிப்ட் தொடங்குகிறது ExcelJS.Workbook(), இது எக்செல் கோப்புகளை உருவாக்குவதற்கான அடித்தளமாகும். பின்னர் அழைப்பதன் மூலம் ஒர்க் ஷீட்டை உருவாக்குகிறது addWorksheet(). இந்த பணித்தாள் சேர்க்கப்படும் அனைத்து தரவு மற்றும் படங்களுக்கான கொள்கலனாக செயல்படுகிறது. மாதிரித் தரவில் பட URLகள் உள்ளன, அவை பின்னர் எடுக்கப்பட்டு குறிப்பிட்ட கலங்களில் உட்பொதிக்கப்படும்.
படத்தைப் பெறுவதைக் கையாள, ஸ்கிரிப்ட் Axios நூலகத்தைப் பயன்படுத்துகிறது axios.get() அவர்களின் URL களில் இருந்து படங்களைக் கோர. எக்செல் கோப்பில் படங்கள் போன்ற பைனரி உள்ளடக்கத்தை உட்பொதிப்பதற்கு ஏற்ற "arraybuffer" என்ற பதிலைப் பயன்படுத்தி Axios படத்தை பைனரி தரவுகளாகப் பெறுகிறது. தரவைப் பெற்ற பிறகு, படம் ஒரு இடையக வடிவமாக மாற்றப்படுகிறது, இது ஒரு கலத்தில் உட்பொதிப்பதற்கான சரியான படமாக ExcelJS ஐ அங்கீகரிக்க அனுமதிக்கிறது.
படம் எடுக்கப்பட்டு செயலாக்கப்பட்டதும், கட்டளை workbook.addImage() பணிப்புத்தகத்தில் படத்தைச் செருகப் பயன்படுகிறது. இந்த படி படத்தை வரையறுத்து, பணித்தாளில் ஒரு குறிப்பிட்ட இடத்தில் வைக்க தயார் செய்கிறது. இதைத் தொடர்ந்து, worksheet.addImage() படம் எங்கு வைக்கப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது, இந்த வழக்கில் தற்போதைய வரிசையின் "B" நெடுவரிசையில். படம் கலத்திற்குள் நன்றாகப் பொருந்துவதை உறுதிசெய்ய வரிசை உயரம் சரிசெய்யப்படுகிறது.
இறுதியாக, ஸ்கிரிப்ட் பணிப்புத்தகத்தைப் பயன்படுத்தி சேமிக்கிறது workbook.xlsx.writeFile(), இது கோப்பை உள்ளூர் அமைப்பிற்கு எழுதுகிறது. இது செயல்முறையை நிறைவு செய்கிறது, இதன் விளைவாக ஒரு எக்செல் கோப்பு இணைப்புகள் இல்லாமல் நேரடியாக கலங்களில் உட்பொதிக்கப்பட்ட படங்களுடன் இருக்கும். அறிக்கைகள் அல்லது தரவுத் தாள்களில் படங்களைச் சேர்க்க வேண்டிய சந்தர்ப்பங்களில் இந்த முறை மிகவும் பயனுள்ளதாக இருக்கும், இது தரவு மற்றும் காட்சி கூறுகள் இரண்டையும் கொண்ட எக்செல் கோப்புகளுடன் தொடர்பு கொள்ளும் பயனர்களுக்கு தடையற்ற அனுபவத்தை வழங்குகிறது.
ExcelJS மற்றும் Axios ஐப் பயன்படுத்தி எக்செல் கலங்களில் படங்களை உட்பொதித்தல்
இந்த தீர்வு Node.js, Excel பணிப்புத்தகத்தை உருவாக்க ExcelJS மற்றும் படத் தரவைப் பெற Axios ஆகியவற்றைப் பயன்படுத்துகிறது. எக்செல் கலங்களில் நேரடியாக படங்களை உட்பொதிப்பதை இது கையாளுகிறது.
const ExcelJS = require('exceljs');const axios = require('axios');async function addImageToExcel() {const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet('My Sheet');const data = [{ id: 1, imageUrl: 'https://example.com/image1.png' },{ id: 2, imageUrl: 'https://example.com/image2.png' }];worksheet.columns = [{ header: 'ID', key: 'id', width: 10 },{ header: 'Image', key: 'image', width: 30 }];for (const item of data) {const row = worksheet.addRow({ id: item.id });row.height = 90;const imageId = workbook.addImage({buffer: (await axios.get(item.imageUrl, { responseType: 'arraybuffer' })).data,extension: 'png'});worksheet.addImage(imageId, \`B${row.number}:B${row.number}\`);}await workbook.xlsx.writeFile('ExcelWithImages.xlsx');console.log('Excel file with images saved!');}addImageToExcel().catch(console.error);
Base64 தரவு மற்றும் SheetJS ஐப் பயன்படுத்தி Excel இல் படங்களை உட்பொதித்தல்
Chrome நீட்டிப்பு சூழலில் SheetJS ஐப் பயன்படுத்தி Excel கோப்பில் உட்பொதிப்பதற்கு முன், படங்களைப் பெற்று அவற்றை Base64 வடிவத்திற்கு மாற்றுவதில் இந்தத் தீர்வு கவனம் செலுத்துகிறது.
async function getImageBase64(url) {const response = await fetch(url);const blob = await response.blob();return new Promise((resolve, reject) => {const reader = new FileReader();reader.onloadend = () => resolve(reader.result.split(',')[1]);reader.onerror = reject;reader.readAsDataURL(blob);});}async function addImageToSheetJS() {const wb = XLSX.utils.book_new();const ws = XLSX.utils.aoa_to_sheet([[ 'ID', 'Image' ]]);const imageData = await getImageBase64('https://example.com/image.png');ws['!merges'] = [{ s: { c: 1, r: 1 }, e: { c: 1, r: 5 } }];ws['B2'] = { t: 's', v: imageData, l: { Target: 'base64 image' } };XLSX.utils.book_append_sheet(wb, ws, 'Sheet 1');XLSX.writeFile(wb, 'SheetWithImages.xlsx');}addImageToSheetJS();
Chrome நீட்டிப்புகளுக்கான Excel கோப்புகளில் படத்தை உட்பொதிப்பதை மேம்படுத்துதல்
வளரும் போது ஒரு குரோம் நீட்டிப்பு எக்செல் கோப்புகளில் படங்களை ஒருங்கிணைக்கிறது, உலாவி சூழலில் படத்தை உட்பொதிப்பதை எவ்வாறு கையாள்வது என்பது ஒரு பெரிய சவாலாகும். பாரம்பரிய Node.js சூழல்களைப் போலல்லாமல், Chrome நீட்டிப்புகள் கூடுதல் பாதுகாப்பு மற்றும் செயல்திறன் கட்டுப்பாடுகளுடன் வருகின்றன, அவை சில APIகளுக்கான நேரடி அணுகலைத் தடுக்கின்றன. அதாவது Axios போன்ற நூலகங்களைப் பயன்படுத்தி படங்களைப் பெறுவது போன்ற முறைகளுக்கு உலாவிக் கொள்கைகளுக்கு இணங்க மாற்று வழிகள் தேவைப்படலாம்.
உலாவி சூழல்களுக்கான தீர்வு பயன்படுத்துவதை உள்ளடக்கியது அடிப்படை64 மூல பைனரி தரவுக்கு பதிலாக குறியாக்கம் செய்யப்பட்ட படங்கள். Base64 குறியாக்கம் படங்களை எளிதாக மாற்றவும் மற்றும் ஒரு சரமாக சேமிக்கவும் அனுமதிக்கிறது, பின்னர் அதை SheetJS போன்ற நூலகங்களைப் பயன்படுத்தி நேரடியாக எக்செல் தாளில் உட்பொதிக்க முடியும். இந்த வழக்கில், அடிப்படை64 குறியாக்கம் Chrome ஆல் விதிக்கப்பட்ட பாதுகாப்பு வரம்புகளை கடக்க உதவுகிறது, குறிப்பாக நீட்டிப்புகளால் Node.js-குறிப்பிட்ட குறியீட்டை இயக்க முடியாது.
கருத்தில் கொள்ள வேண்டிய மற்றொரு முக்கியமான அம்சம் எக்செல் கோப்புகளில் பெரிய பட தரவுத் தொகுப்புகளைக் கையாள்வது. ஒரு எக்செல் தாளில் பல படங்களை உட்பொதிப்பது கோப்பு அளவைக் கடுமையாக அதிகரிக்கும், இது செயல்திறனைப் பாதிக்கலாம், குறிப்பாக உலாவி அடிப்படையிலான பயன்பாட்டில். இதை மேம்படுத்த, டெவலப்பர்கள் WebP அல்லது JPEG போன்ற சுருக்கப்பட்ட பட வடிவங்களைப் பயன்படுத்தி கோப்பு அளவைக் குறைக்க வேண்டும், அதே நேரத்தில் படத்தின் தரம் அப்படியே உள்ளது.
ஜாவாஸ்கிரிப்ட் மூலம் எக்செல் இல் படங்களை உட்பொதிப்பது பற்றிய பொதுவான கேள்விகள்
- Chrome நீட்டிப்பு சூழலில் படங்களை எவ்வாறு பெறுவது?
- Chrome நீட்டிப்பில், நீங்கள் பயன்படுத்தலாம் fetch() ஒரு URL இலிருந்து படங்களை மீட்டெடுக்கவும், அவற்றை அடிப்படை64 க்கு மாற்றவும் FileReader உட்பொதிக்க.
- பெரிய கோப்பு அளவுகளைத் தவிர்க்க படங்கள் எந்த வடிவத்தில் இருக்க வேண்டும்?
- பயன்படுத்த பரிந்துரைக்கப்படுகிறது WebP அல்லது JPEG வடிவங்கள், அவை சிறந்த சுருக்கத்தை வழங்குகின்றன மற்றும் இறுதி எக்செல் கோப்பு அளவைக் குறைக்கின்றன.
- ஒரே எக்செல் கோப்பில் பல படங்களை உட்பொதிக்க முடியுமா?
- ஆம், போன்ற நூலகங்களைப் பயன்படுத்துதல் ExcelJS அல்லது SheetJS, பட URLகளின் வரிசையின் மூலம் லூப் செய்வதன் மூலம் பல படங்களை வெவ்வேறு கலங்களில் உட்பொதிக்கலாம்.
- Node.js இல் படங்களை உட்பொதிப்பதற்கும் உலாவிக்கும் என்ன வித்தியாசம்?
- Node.js இல், நீங்கள் பயன்படுத்தலாம் axios.get() படத் தரவைப் பெற, உலாவியில் இருக்கும்போது, நீங்கள் பயன்படுத்த வேண்டும் fetch() மற்றும் CORS கொள்கைகளை சரியாக கையாளவும்.
- எக்செல் கலங்களில் படங்கள் சரியாக மறுஅளவிடப்படுவதை நான் எப்படி உறுதி செய்வது?
- பயன்படுத்தவும் row.height மற்றும் addImage() படங்கள் உட்பொதிக்கப்பட்ட கலங்களின் பரிமாணங்களைக் கட்டுப்படுத்தும் செயல்பாடுகள், சரியான காட்சியை உறுதி செய்யும்.
எக்செல் இல் படங்களை உட்பொதிப்பது பற்றிய இறுதி எண்ணங்கள்
எக்செல் கலங்களில் நேரடியாக படங்களை உட்பொதித்தல் ஜாவாஸ்கிரிப்ட் ExcelJS போன்ற சரியான கருவிகள் மற்றும் நூலகங்கள் தேவை, குறிப்பாக Chrome நீட்டிப்பு சூழலில் பணிபுரியும் போது. இது அதிக ஆற்றல்மிக்க மற்றும் பார்வை நிறைந்த எக்செல் கோப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது.
பைனரி வடிவத்தில் படத் தரவைப் பெறுதல் மற்றும் நேரடியாக கலங்களில் உட்பொதித்தல் போன்ற உகந்த நுட்பங்கள் மூலம், இந்த முறை உங்கள் உருவாக்கப்படும் எக்செல் கோப்புகள் செயல்பாடு மற்றும் பார்வைக்கு ஈர்க்கும், இணைய உருவாக்கம் மற்றும் அதற்கு அப்பால் பல்வேறு பயன்பாட்டு நிகழ்வுகளை சந்திக்கிறது.
குறிப்புகள் மற்றும் கூடுதல் ஆதாரங்கள்
- எக்செல் கோப்புகளை உருவாக்க மற்றும் கையாள ExcelJS ஐ எவ்வாறு பயன்படுத்துவது என்பது பற்றிய விரிவான ஆவணங்களுக்கு, பார்வையிடவும் ExcelJS அதிகாரப்பூர்வ ஆவணம் .
- JavaScript இல் Axios ஐப் பயன்படுத்தி URL களில் இருந்து படங்களை எவ்வாறு பெறுவது என்பதைப் புரிந்துகொள்ள, பார்க்கவும் ஆக்சியோஸ் ஆவணப்படுத்தல் .
- எக்செல் கோப்புகளில் உட்பொதிக்க, ஜாவாஸ்கிரிப்டில் பேஸ்64 பட குறியாக்கத்துடன் பணிபுரிவது பற்றிய தகவலுக்கு, பார்க்கவும் MDN வெப் டாக்ஸ்: FileReader.readAsDataURL .
- நீங்கள் Chrome நீட்டிப்பை உருவாக்குகிறீர்கள் மற்றும் API பயன்பாடு குறித்த வழிகாட்டுதல் தேவைப்பட்டால், இதைப் பார்வையிடவும் Chrome நீட்டிப்புகள் டெவலப்பர் வழிகாட்டி .