So I have been trying to implement a print function on the React Modal, thus I will have to implement it using inline style css. Is there any alternative library or implementation available to preserve my css using external css or scss file
My current print function
public printPDF = (e) => {
$('input[type="checkbox"]').each(function () {
var $this = $(this);
if ($this.is(":checked")) {
$this.attr("checked", "true");
} else {
$this.removeAttr("checked");
}
});
var content = document.getElementById("modal-container");
var printWindow = window.open("", "", "height = 1080, width = 1920");
printWindow.document.open();
printWindow.document.write('<html><head><title>SUKUK Cover Letter</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(content.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.focus();
printWindow.print();
};
My current modal function
public render(): React.ReactElement<ISukukPreparerEditProps> {
<Modal
id= "coverLetter"
isOpen= { this.state.toggleModal }
contentLabel= "EZEZ"
ariaHideApp= { false }
onRequestClose= { this.onCloseModal.bind(this) }
style= {
{
fontSize: "18px",
height: "11.7in",
width: "8.3in",
maxHeight: "11.7in",
maxWidth: "8.3in",
}
}
>
<Fabric
style= {
{
float: "right"
}
}
>
<DefaultButton
onClick= { this.printPDF.bind(this) }
iconProps= { downloadFileIcon }
style= {
{
backgroundColor: "white",
margin: "20px",
borderRadius: "20px",
border: "1px solid black",
}
}
>
Download Cover Letter
</DefaultButton>
<DefaultButton
style= {
{
backgroundColor: "white",
margin: "20px",
borderRadius: "20px",
border: "1px solid black",
}
}
onClick= { this.onCloseModal }
>
Close
</DefaultButton>
<Dropdown>
className= { styles.sukukCompDropdown }
options= { this.state.compTitles }
selectedKey= { this.state.compName }
onChanged= { this.getCompName.bind(this) }
</Dropdown>
</Fabric>
<Fabric id="modal-container">
<Fabric>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
}
}
>
Date: { this.state.dateline }
</Label>
</Fabric>
<br/>
<Fabric>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
fontWeight: "bold",
}
}
>
MTrustee Berhad
</Label>
</Fabric>
<Fabric>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
}
}
>
Level 15, Menara AmFirst No.1,<br/>
Jalan 19/3, 46300 Petaling Jaya,<br/>
Selangor Darul Ehsan.
</Label>
</Fabric>
<br/>
<Fabric>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
}
}
>
Attention: Pn. Nurizan Jalil (CEO) / Pn. Sufiah Ahmad (SVP, Compliance & Risk)
</Label>
</Fabric>
<br/>
<Fabric>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
}
}
>
Dear Sir,
</Label>
</Fabric>
<br/>
<Fabric>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
fontWeight: "bold",
}
}
>
Submission of Unaudited Half Yearly Consolidated Financial Statement for Sukuk Murabahah Programme<br/>
</Label>
</Fabric>
<Fabric>
<hr
style= {
{
paddingTop: 0,
border: "1px solid black",
}
}
>
</hr>
</Fabric>
<Fabric>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
}
}
>
Pursuant to Clause 11.4(b)(2) of the Trust Deed, we hereby certify that as the date hereof:<br/>
<ol
style= {
{
marginTop: "1.25rem",
counterReset: "ol-itemModalOrderedList",
}
}
>
<li
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
counterIncrement: "ol-itemModalOrderedList",
display: "block",
textAlign: "justify",
}
}
>
that the unaudited half yearly consolidated financial statements as of 30 June 2022 we presented is true and correct; and<br/>
<span
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "20px"
}
}
>
(counter(ol-itemModalOrderedList))
</span>
</li>
<li
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
counterIncrement: "ol-itemModalOrderedList",
display: "block",
textAlign: "justify",
}
}
>
we understand that any willful dishonesty may render for refusal of this submission.
<span
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "20px"
}
}
>
(counter(ol-itemModalOrderedList))
</span>
</li>
</ol>
</Label>
</Fabric>
<Fabric>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
marginBottom: "3.75rem",
}
}
>
Thank you.
</Label>
</Fabric>
<Fabric>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
marginBottom: "6.25rem",
}
}
>
Yours faithfully,<br/>
For and on behalf of
</Label>
</Fabric>
<Fabric
style= {
{
display: "flex",
justifyContent: "space-between",
}
}
>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
width: "40%",
borderTop: "1px solid black",
}
}
>
Name:<br/>
Group Chief Executive Officer
</Label>
<Label
style= {
{
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "18px",
width: "40%",
borderTop: "1px solid black",
}
}
>
Name:<br/>
Group Chief Finance Officer
</Label>
</Fabric>
</Fabric>
</Modal>
}
My current print layout: Current Output
My current modal layout: Modal Layout
My desired output: Desired Outcome
My modal layout will need to implement a customised ordered list prefix based on the implementation of the desired output. where the list prefix is (1) (2) instead of the default 1. 2. for li type
I have tried implementing the solutions from exisitng posted questions as well as methods found online but so far only the current method is working. I'm expecting a workable library to implement both print, save as pdf, download as doc file for npm version 10.23.1
