Recently, I encountered a problem with jsPDF regarding Unicode support in table generation. To work around this issue, I decided to utilize the browser's print feature instead. I achieved this by creating a new HTML document with the table and displaying it as a popup, then calling popup_window.print() as shown below:
//exporter.ts
const temp = document.createElement("div");
temp.innerHTML = tableHtml(
tableHead,
tableBody,
fileName
);
const popup_window: any = window.open(location.origin, fileName, "x=y");
popup_window.document.write(temp.innerHTML);
setTimeout(() => {
popup_window.print();
popup_window.close();
}, 1000);
// tableHtml.ts
const tableHtml = (
headers: string[],
records: GeneralOBJ[],
title: string,
direction = "rtl"
) => `<!DOCTYPE html>
<html>
<body>
<main id="main" style="direction: ${direction};">
<h1>${title}</h1>
<div class="app_table">
<table class="table">
<thead>
<tr>
${headers
.map(header => "<th class='col' dir='auto'>" + header + "</th>")
.join("")}
</tr>
</thead>
<tbody>
${records
.map(
record =>
"<tr>" +
Object.values(record)
.map(td => "<td dir='auto'>" + td + "</td>")
.join("") +
"</tr>"
)
.join("")}
</tbody>
</table>
</div>
</main>
</body>
</html>`;
While this method works well, there are potential security risks such as xss vulnerabilities. To address this, I am considering using Vue.js to generate this piece of HTML content and then incorporate it into temp.innerHTML. Do you have any suggestions on how to achieve this securely?