How to Display Base64 Image (Logo) in Microsoft Excel Using

dmex-karthik

Hi Sir,

I'm working on generating an Excel file (e.g., using libraries like ExcelJS or similar) where I need to display a logo image. The image is fetched from a server and converted to a base64 string.

Here's the code I'm using to fetch and convert the image:

const axios = require('axios');

async function convertImageToBase64(imageUrl) {
    try {
        const response = await axios.get(imageUrl, { responseType: 'arraybuffer' });
        const base64Image = Buffer.from(response.data, 'binary').toString('base64');
        const contentType = response.headers['content-type'];
        return `data:${contentType};base64,${base64Image}`;
    } catch (e) {
        console.error(`Error while converting image to base64: ${e.message}`, e.stack);
        throw new Error('Error while converting image to base64: ' + e);
    }
}

I successfully got a base64 string like:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...

My question is: How can I display this base64 image in a generated Excel file?

I'm not sure how to properly embed or display the image using the base64 string.

Thanks in advance!

admin

jsreport xlsx recipe provides xlsxImage helper to embed base64 image to the specific position, however, it needs further study..

The link to the documentation
https://jsreport.net/learn/xlsx

A demo with you case
https://playground.jsreport.net/w/anon/LyTAxE8t

dmex-karthik

Hi Sir,
I have tried to follow the function

async function convertImageToBase64(imageUrl) {
try {
const response = await axios.get(imageUrl, { responseType: 'arraybuffer' });
const base64Image = Buffer.from(response.data, 'binary').toString('base64');
console.log('returning base64')
return base64Image;
} catch (e) {
console.error(Error while converting image to base64: ${e.message}, e.stack);
throw new Error('Error while converting image to base64: ' + e);
}
}

I successfully get the base64 string, and then I try to inject it into an Excel template using this syntax:

However, I'm encountering the following error during template rendering:

Error: "xlsxAddImage" helper call failed
(because) cannot read properties of undefined (reading '[Content_Types].xml')
at module.exports (/app/node_modules/@jsreport/jsreport-core/lib/shared/createError.js:10:13)
at WorkerReporter.createError (/app/node_modules/@jsreport/jsreport-core/lib/shared/reporter.js:53:12)
at getEnhancedHelperError (/app/node_modules/@jsreport/jsreport-core/lib/worker/render/executeEngine.js:425:54)
at /app/node_modules/@jsreport/jsreport-core/lib/worker/render/executeEngine.js:443:15
wrapped by:
Error: Error while executing xlsx recipe
(because) "xlsxAddImage" helper call failed
(because) cannot read properties of undefined (reading '[Content_Types].xml')
(system-helpers.js line 3535:41)
3533 | const name = imageName + '.png'
3534 |

3535 | if (!options.data.root.$xlsxTemplate['[Content_Types].xml'].Types.Default.filter(function (t) { return t.$.Extension === 'png' }).length) {
| ^
3536 | options.data.root.$xlsxTemplate['[Content_Types].xml'].Types.Default.push({
3537 | $: {
3538 | Extension: 'png',
(system-helpers.js line 3655:17)
3653 | }
3654 |
3655 | return fn.apply(this, arguments)
| ^
3656 | }
3657 | }
3658 |
(system-helpers.js line 3685:30)
3683 | }
3684 | function xlsxAddImage (...args) {
3685 | return __xlsx.xlsxAddImage.call(this, ...args)
| ^
3686 | }
3687 |
3688 | function xlsxAddSheet (...args) {
| ^
2952 | },
2953 | m: function (options) {
2954 | return mergeOrFormulaCell.call(this, 'mergeCell', options)
(system-helpers.js line 2983:31)
2981 | try {
2982 | if (values.length > 0) {
2983 | return targetHelper.call(context, ...values, options)
| ^
2984 | }
2985 |
2986 | return targetHelper.call(context, options)
(system-helpers.js line 3015:18)
3013 | __xlsxD.assertDataArg(type != null, '_D helper t arg is required')
3014 |
3015 | return __xlsxD.resolveHelper(type, arguments.length, this, values, optionsToUse)
| ^
3016 | }
3017 |
3018 | // alias for {{_D t='r'}} helper call, we do it this way to optimize size of the generated xml
(system-helpers.js line 3080:13)
3078 | }
3079 |
3080 | return _D.call(this, data, options)
| ^
3081 | }
3082 |
3083 | // alias for {{_D t='c'}} helper with autodetect call with calcChainUpdate: true

And one more thing: Can the logo be printed directly as base64 in the Excel template? I need to print the logo multiple times and also do it dynamically.

admin

Please share playground demo.