xlsx-template-browser 0.1.8 → 0.2.0

package/lib/excelHelpers.js

@@ -7,7 +7,7 @@ export const valueToString = (value) => {
   if (!value) return ''
   if (Array.isArray(value)) return value.map(valueToString).toString()
   if (typeof value === 'object') value = JSON.stringify(value)
-  return escapeXml(value.toString())
+  return value.toString()
 }
 
 /**
@@ -26,7 +26,7 @@ const dateToExcel = (value) => {
  * @returns {Object|undefined} - An object with 'cellType' and 'value' properties representing the Excel data type,
  *                               or undefined if the data type is not recognized.
  */
-export const guessDataType = (value) => {
+export const guessDataType = (value, { dateStyle }) => {
   if (typeof value === 'undefined') return { cellType: 's', value: '' }
   if (typeof value === 'number') {
     if (isFinite(value)) return { cellType: 'n', value }
@@ -34,7 +34,7 @@ export const guessDataType = (value) => {
   }
   if (value instanceof Date) {
     if (isNaN(value)) return undefined
-    return { cellType: 'n', value: dateToExcel(value) }
+    return { cellType: 'n', value: dateToExcel(value), style: dateStyle }
   }
   if (typeof value === 'boolean') return { cellType: 'b', value: value + 0 }
   return { cellType: 's', value: valueToString(value) }
@@ -64,7 +64,7 @@ export const createSharedString = (text, template) => {
  * @param {string} options.cellType - The type of the cell (e.g., 's', 'n', 'b', 'f') for Excel formatting.
  * @returns {Element} - The created cell element.
  */
-export const createCell = ({ value, row, column, template, cellType }) => {
+export const createCell = ({ value, row, column, template, cellType, style }) => {
   // If the cell is not a string, then skip
   if (!cellType && !value) {
     return template
@@ -87,6 +87,10 @@ export const createCell = ({ value, row, column, template, cellType }) => {
   if (typeof value === 'undefined') return cell
   const valueTag = document.createElement('v')
   cell.setAttribute('t', cellType)
+  if (style) {
+    cell.setAttribute('s', style)
+    cell.removeAttribute('t')
+  }
   valueTag.textContent = value
   cell.appendChild(valueTag)
   return cell

package/lib/index.js

@@ -1,15 +1,30 @@
 import { downloadBlob } from './helpers'
 import replace from './main'
 
+/**
+ * Generates an XLSX file by replacing data in a template file.
+ * @param {string} templateURL - The URL of the template XLSX file.
+ * @param {Object} data - The data object containing values to replace in the template.
+ * @returns {Promise<Blob>} A promise that resolves with the Blob of the generated XLSX file.
+ * @throws {Error} Throws an error if either the template URL or data is not provided, or if unable to fetch the template file.
+ */
 export const generateXlsx = async (template, data) => {
   if (!template || !data) throw Error('No template or data provided')
-  if (typeof template.match === 'string' && template.match(/^https:/)) {
-    const response = await fetch(template)
+  if (typeof template === 'string' && template.match(/^https?:/)) {
+    const response = await fetch(template).catch(err => { return false})
+    if (!response) throw Error('Can\'t fetch the template URL')
     template = response.arrayBuffer()
   }
   return await replace(template, data)
 }
 
+/**
+ * Downloads an XLSX file by replacing data in a template file and initiates the download in the browser.
+ * @param {string} templateURL - The URL of the template XLSX file.
+ * @param {Object} data - The data object containing values to replace in the template.
+ * @param {string} [fileName] - The name of the file to be downloaded. If not provided, a default name based on the current date will be used.
+ * @returns {Promise<void>} A promise that resolves once the download is initiated.
+ */
 export const downloadXlsx = async (template, data, fileName, mimeType) => {
   if (!fileName) fileName = new Date().toISOString().substring(0, 10) + ' - Report.xlsx'
   downloadBlob(await generateXlsx(template, data), fileName, mimeType)

package/lib/main.js

@@ -34,6 +34,54 @@ const replace = async (template, data) => {
   // Load xlsx (zipped file)
   let res = await new_zip.loadAsync(template)
 
+  /* Add custom style for dates */
+  const xmlStyle = await res.file('xl/styles.xml').async('string')
+  const domStyle = parser.parseFromString(xmlStyle, 'application/xml')
+
+  // Create date number format
+  const styleSheet = domStyle.querySelector('styleSheet')
+  let numFmts = domStyle.querySelector('numFmts')
+  if (!numFmts) numFmts = document.createElementNS(null, 'numFmts')
+  let numFmt = document.createElementNS(null, 'numFmt')
+  numFmt.setAttributeNS(null, 'numFmtId', '166')
+  numFmt.setAttributeNS(null, 'formatCode', 'yyyy\\-mm\\-dd;@')
+  let oldNumFmt = domStyle.querySelectorAll('numFmt')
+  let count = 0
+  const newNumFmts = numFmts.cloneNode()
+  oldNumFmt.forEach(numFmt => {
+    newNumFmts.append(numFmt)
+    count++
+  })
+  newNumFmts.append(numFmt)
+  count++
+  newNumFmts.setAttribute('count', count)
+  styleSheet.prepend(newNumFmts)
+
+  // Add a style for the date format
+  const cellXfs = domStyle.querySelector('cellXfs')
+  const xf = document.createElement('xf')
+  xf.setAttributeNS(null, 'numFmtId', 166)
+  xf.setAttributeNS(null, 'fontId', 0)
+  xf.setAttributeNS(null, 'fillId', 0)
+  xf.setAttributeNS(null, 'borderId', 0)
+  xf.setAttributeNS(null, 'xfId', 0)
+  xf.setAttributeNS(null, 'applyNumberFormat', 1)
+  const oldXf = domStyle.querySelectorAll('cellXfs xf')
+  count = 0
+  const newCellXfs = cellXfs.cloneNode()
+  oldXf.forEach(xf => {
+    newCellXfs.append(xf)
+    count++
+  })
+  count++
+  newCellXfs.append(xf)
+  newCellXfs.setAttribute('count', count)
+  const dateStyle = count - 1
+  cellXfs.replaceWith(newCellXfs)
+  const newXfData = serializer.serializeToString(domStyle).replace(/ ?xmlns="(http:\/\/www\.w3\.org\/1999\/xhtml)?"/g, '')
+  // Save new shared strings
+  await new_zip.file('xl/styles.xml', newXfData)
+
   /* PROCESSING OF THE SHARED STRINGS */
 
   // Read all shared text values
@@ -83,14 +131,15 @@ const replace = async (template, data) => {
     if (typeof value === 'undefined') return false
     // Save tables for further processing
     if (isTable) {
-      valuesToReplace[i] = { isTable, value: value.map(guessDataType) }
+      if (!value) value = []
+      valuesToReplace[i] = { isTable, value: value.map(el => guessDataType(el, { dateStyle })) }
       return false
     }
     if (Array.isArray(value)) {
-      valuesToReplace[i] = value.map(guessDataType)
+      valuesToReplace[i] = value.map(el => guessDataType(el, { dateStyle }))
       return false
     }
-    valuesToReplace[i] = guessDataType(value)
+    valuesToReplace[i] = guessDataType(value, { dateStyle })
   })
 
   /* PROCESSING OF WORKSHEETS */
@@ -142,7 +191,7 @@ const replace = async (template, data) => {
           const value = c
           const cellType = 'f'
           newCells[newIndex] = Object.assign({}, { value, cellType }, { template: c })
-          return false          
+          return false
         }
         // Check if the cell contains string
         let isString = c.getAttribute('t')
@@ -153,26 +202,26 @@ const replace = async (template, data) => {
         // Get the new value to replace
         let newValue = valuesToReplace[v.textContent] || {}
         if (!Array.isArray(newValue)) {
-          let { value, cellType, isTable } = newValue
+          let { value, cellType, style, isTable } = newValue
           // If the new value is an array from the table, then return an array of values
           if (isTable) {
             newCells[newIndex] = value.map(el => {
               if (!el) return { template: c }
               if (el.cellType === 's' && typeof el.value === 'string') el.value = addString(el.value)
-              return { value: el.value, cellType: el.cellType, template: c }
+              return { value: el.value, cellType: el.cellType, style: el.style, template: c }
             })
             return false
           }
           // Return a new value
           if (cellType === 's' && typeof value === 'string') value = addString(value)
-          newCells[newIndex] = Object.assign({}, { value, cellType }, { template: c })
+          newCells[newIndex] = Object.assign({}, { value, cellType, style }, { template: c })
           return false
         }
         // If the value is an array (not from table), then extend the existing list of cells
         for (let i = 0; i < newValue.length; i++) {
-          let { value, cellType } = newValue[i] || {}
+          let { value, cellType, style } = newValue[i] || {}
           if (cellType === 's' && typeof value === 'string') value = addString(value)
-          newCells[newIndex + i] = Object.assign({}, { value, cellType }, { template: c })
+          newCells[newIndex + i] = Object.assign({}, { value, cellType, style }, { template: c })
           if (i) cellOffset++
         }
       })
@@ -210,7 +259,9 @@ const replace = async (template, data) => {
         })
         const newRow = row.cloneNode()
         newRow.setAttribute('r', rowIndex)
-        rowValues.forEach(value => newRow.append(value))
+        rowValues.forEach(value => {
+          if (value) newRow.append(value)
+        })
         newRows.push(newRow)
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xlsx-template-browser",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "On-the-fly generation of .xlsx (Excel) files directly within the browser using templates constructed in Excel.",
   "main": "./lib/index",
   "files": [