Exact reproduction of a document with ASCII table in React/JavaScript

Issue không nêu tệp nào trong repository, entry point hay test cần sửa; trước tiên hãy làm rõ liệu có yêu cầu thay đổi react-component/table hay không. Tái hiện sự tương thích đã nêu với React 18 và JavaScript cùng các yêu cầu về PDF, sau đó xác định output được chấp nhận và một test trước khi triển khai.

I am developing a React application that needs to generate a PDF document with very specific formatting. The main challenge is to reproduce exactly a formatted table using only ASCII characters for borders and structure, while maintaining perfect alignment.
Specific Features of the Document

The document I need to reproduce has these precise characteristics:
It uses simple ASCII characters (:, -) to construct all borders.
Columns are separated by colon characters :
Horizontal lines are made up of repeated dash characters -
The header contains information across multiple lines.
Alignment must remain perfectly stable, character by character.
Spacing between columns must be uniform.
The document exclusively uses a fixed-width (monospace) font.

Here is an example of the exact format I need to reproduce:

Main Issues I'm Facing
When I try to generate this document:

Alignment issues : As soon as I insert text into the cells, the border : characters shift, ruining the vertical alignment.
Line misalignment : The horizontal lines made of - do not align properly.
Inconsistent spacing : I can't maintain uniform spacing between characters.
What makes this particularly difficult is that the document must look exactly like one generated by a dot matrix printer or typewriter — every character must align precisely on an invisible grid.

Attempts Made So Far
I have tried:
Standard HTML tables : Alignment changes depending on content.
CSS-based tables : Borders don’t align correctly.
Monospace fonts with

 tags : I lose alignment when adding content.

Canvas : Hard to place each character precisely.

PDF libraries : Problems with ASCII characters and alignment.

React-PDF : Can’t maintain perfect alignment.

My Technical Environment

React 18.x

JavaScript

Tried libraries: jsPDF, pdfmake, react-pdf, html2canvas

Specific Questions

What would be the best approach to generate a document where each character (including borders) must be placed at a fixed grid position?

How can I maintain perfect alignment of ASCII characters (:, -) regardless of the amount of text?

Are there any techniques to treat the document as a matrix of fixed characters rather than fluid HTML content?

Is there a JavaScript library particularly suited for this kind of "typewriter-style" formatting?

How can I export this document to PDF while preserving perfect character alignment?

I’m ready to completely change my approach if necessary. The key is to faithfully reproduce this very specific format.

Thank you in advance for your help!