Generate Excel Reports with Item Images in NetSuite using Vue.js + ExcelJS

Sometimes business users need Excel reports with images, totals, and summaries—something NetSuite’s standard reporting doesn’t easily support. By combining Suitelets, Vue.js, and ExcelJS, we can generate fully customized Excel files directly from the browser.

🔧 What We Used

• Suitelet → serves a Vue.js frontend
• Vue.js → user interface and trigger
• ExcelJS → build styled Excel reports
• FileSaver.js → download the file

📝 Key Implementation

1. Setup Workbook & Headers

javascript

Copy

Edit
const workbook = new ExcelJS.Workbook();
const sheet = workbook.addWorksheet('ORDER QUOTATION');
sheet.addRow(['Sr.', 'Item No.', 'Design', 'Diamond', '', '', '', '', 'Gold', '', '', '', '', 'Stone']);
sheet.mergeCells('D1:H1'); // Diamond
sheet.mergeCells('I1:M1'); // Gold

2. Insert Rows with Images

javascript

Copy

Edit
if (item.design) {
  const imgBuffer = await fetch(item.design).then(res => res.arrayBuffer());
  const imgId = workbook.addImage({ buffer: imgBuffer, extension: 'jpeg' });
  sheet.addImage(imgId, { tl: { col: 2, row: rowIndex - 1 }, ext: { width: 80, height: 80 } });
  sheet.getRow(rowIndex).height = 60;
}

3. Add Totals & Summaries

javascript

Copy

Edit
const totals = groupTotal(group);
sheet.addRow(['', '', 'Group Total', '', totals.diamondPcs, totals.diamondWts, '', totals.diamondAmt]);

4. Auto Width & Export

javascript

Copy

Edit
sheet.columns.forEach(col => {
  let maxLen = 12;
  col.eachCell(cell => { if (String(cell.value || '').length > maxLen) maxLen = cell.value.length; });
  col.width = maxLen + 2;
});

const buffer = await workbook.xlsx.writeBuffer();
saveAs(new Blob([buffer]), `report_${Date.now()}.xlsx`);