0

I currently faced an issue with jsPDF for uniCode support in table generation, to skip this problem I've used browser print feature, by just creating a new html with table and show it as a popup and call popup_window.print() for it like 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>`;

It's working very well, but as you know there are security problems like xss could happen here. So, I want to use vue for generating this peice of html and then add it as temp.innerHTML, have any idea how to this?

SeyyedKhandon
  • 5,197
  • 8
  • 37
  • 68

1 Answers1

0

VueJS is a Single Page App library, and using it would render everything in a single html file. It is possible to create two or more instances of Vue in different html pages, though you’d have to set it up so that they share the same store/data.

One way to make it try to work probably is to create a component containing your popup content, then create another Vue instance on your popup html window, and mount your component there. Perhaps you can take an idea here on CSS tricks how to create a component instance programmatically.

If this is my case though, I’d find an easiest way to solution first. If the problem is the unicode support, I’ll find an alternative library. Check this another SO thread regarding unicodes in pdf generation.

Anne
  • 591
  • 2
  • 7