Utilizing the library sheetjs, I am generating HTML from an Excel range by utilizing the function sheet_to_html(). This generated HTML is then used to display a table using the v-html directive. Users can interact with the table by adding or removing classes. My goal is to save the modified HTML as a string once the user has made their changes.
Below is my Vue component setup:
<script setup>
import { utils } from 'xlsx';
const htmlParse = utils.sheet_to_html(worksheet)
function classModifier(event){
const clickedElement = event.target
clickedElement.classList.toggle("my-class")
}
</script>
<template>
<div @click="classModifier" v-html="htmlParse"></div>
</template>
Once the user interacts with the table, modifying the classes, I aim to retrieve the updated HTML content containing the new classes applied. It's worth noting that this implementation is done using Vue.js in Electron.