Unable to create a document file using HTML string
abhinovpankaj opened this issue · comments
Docx Template :
- The doesn't generate, rather exception comes.
Node js 18
Please read the example in the README again. You don't need the +++INS around your htmldata.
I remember I did try that
template like
+++HTML {htmldata}+++
createReport looks like below:
const buffer = await docxTemplate.createReport({
template,
data: {
htmldata:htmlString
}
},
);
htmlString is my HTML string which I already have generated using all the props of objects and with styles.
Am I missing anything, I read the documentation.
You dont need the brackets { and } around htmldata.
Tried that too, didn't work.
the report doc just has the text htmldata.
Word app also throws error when I open the report.
Sample HTML
<meta charset="UTF-8">
<body>
<h2 style="text-align: center; font-family: Nunito, sans-serif;"><strong>Visual Inspection Report</strong></h2>
<table style="border-spacing: initial; border-collapse: collapse; background: #F0F0F0; width: 100%; margin: 5px auto; position: relative; border: 1px solid #E3F1D5; line-height: 1.625; color: darkslategray; font-family: Nunito, sans-serif;">
<tbody>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5; background: #C0C0C0;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<strong>Project Name:</strong>
</td>
<td style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
<p>docs project</p>
</td>
</tr>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<strong>Project Address:</strong>
</td>
<td style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
<p>dasda</p>
</td>
</tr>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5; background: #C0C0C0;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<strong>Project Description:</strong>
</td>
<td style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
<p>test</p>
</td>
</tr>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<strong>Created Date:</strong>
</td>
<td style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
<p>2023-08-26 17:24:47.384872</p>
</td>
</tr>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5; background: #C0C0C0;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<strong>Created By:</strong>
</td>
<td style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
<p></p>
</td>
</tr>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5; height: auto;">
<td style="width: 100%; text-align: center; padding: 1px; vertical-align: top;" colspan="2">
<img style="max-height: 100%; width: 100%;" src="https://deckinspectors.blob.core.windows.net/docsproject/image_picker_B194945A-A0AF-41A7-B4C1-4DC295F0ADA3-29040-0000122F3CA9D22A.jpg" />
</td>
</tr>
</tbody>
</table><div style="page-break-before: always;">
<table style="border-spacing: initial; page-break-before: always; border-collapse: collapse; background: #F0F0F0; width: 100%; margin: 5px auto; position: relative; border: 1px solid #E3F1D5; line-height: 1.625; color: darkslategray; font-family: Nunito, sans-serif;" align="center" >
<tbody>
<tr style=" font-size: 16px; border: 1px solid #E3F1D5; ">
<td style="width: 100%; font-size: 16px; margin: 10px; padding: 6px; text-align: center; background-color: #EC7A19"
colspan="2">
<strong>Common Locations</strong>
</td>
</tr>
<tr style=" font-size: 15px; border: 1px solid #E3F1D5; ">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p><strong>Project Common Location Name</strong></p>
</td>
<td style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
<p><strong>docs location</strong></p>
</td>
</tr>
<tr style=" font-size: 15px; border: 1px solid #E3F1D5; background: #C0C0C0;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p><strong>Location Name</strong></p>
</td>
<td style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
<p><strong>Location1</strong></p>
</td>
</tr>
</tbody>
</table>
</div><style>
.MsoTableGrid {
border-spacing: initial;
border-collapse: collapse;
background: #F0F0F0;
width: 100%;
table-layout: fixed;
margin: 5px auto;
word-wrap: break-word;
border: 1px solid #E3F1D5;
line-height: 1.625;
color: darkslategray;
font-family: Nunito, sans-serif;
}
.bad{
color:red;
}
.good{
color:green;
}
</style>
<table class="MsoTableGrid" align="center">
<tbody>
<tr style=" font-size: 16px; border: 1px solid #E3F1D5; ">
<td style="width:100%; color: white; padding:8px;margin:10px; padding:8px;text-align:center;background-color:#888888"
colspan="2">
<strong >Visual Report</strong>
</td>
</tr>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p><strong>Exterior Elements</strong></p>
</td>
<td style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
<p > Decks,Porches/Entry,Stairs,Stairs Landing,Walkways,Railings,Integrations,Door Threshold,Stucco Interface</p>
</td>
</tr>
<tr style="background: #C0C0C0; font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; " >
<p ><strong>Water Proofing Elements</strong></p>
</td>
<td style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
<p> Coatings,Waterproofing</p>
</td>
</tr>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p ><strong>Visual Review</strong></p>
</td>
<td class="good" style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
Fair
</td>
</tr>
<tr style="background: #C0C0C0; font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p ><strong>Any Visual Signs of leaks</strong></p>
</td>
<td class="bad" style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
Yes
</td>
</tr>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p ><strong>Further Invasive Review Required</strong></p>
</td>
<td class="good" style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
Yes
</td>
</tr>
<tr style="background: #C0C0C0; font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p ><strong>Condition Assessment</strong></p>
</td>
<td class="bad" style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
Fail
</td>
</tr>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p ><strong>Additional Considerations or Concerns</strong></p>
</td>
<td style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
<p > gggg</p>
</td>
</tr>
<tr style="background: #C0C0C0; font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p ><strong>Life Expectancy (EEE)</strong></p>
</td>
<td class="good" style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
4-7 Years
</td>
</tr>
<tr style=" font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p ><strong>Life Expectancy (LBC)</strong></p>
</td>
<td class="bad" style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
0-1 Years
</td>
</tr>
<tr style="background: #C0C0C0; font-size: 12px; border: 1px solid #E3F1D5;">
<td style="width: 50%; text-align: left; padding: 8px; ">
<p><strong>Life Expectancy (AWE)</strong></p>
</td>
<td class="bad" style="width: 50%; text-align: left; padding: 8px; border-left: groove; ">
0-1 Years
</td>
</tr>
</tbody>
</table><style>
body {
font-family: Nunito, sans-serif;
color: darkslategray;
}
.image-table {
width: 100%;
margin: 5px auto;
border-collapse: collapse;
border: 1px solid #E3F1D5;
table-layout: fixed;
}
.image-table th {
font-size: 14px;
border: 1px solid #E3F1D5;
background-color: #888888;
padding: 8px;
margin: 10px;
text-align: center;
color: white;
}
.image-table td {
font-size: 12px;
border: 1px solid #E3F1D5;
text-align: center;
padding: 8px;
}
.image {
display: block;
width: 100%;
height: auto;
max-height: 250px;
margin: 0 auto;
}
</style>
<table class="image-table">
<thead>
<tr>
<th colspan="4">Visual Photos</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="image" src="https://deckinspectors.blob.core.windows.net/location1/image_picker_CEA17B79-A21E-49E3-BDB4-FE8A156352DD-29040-0000122F64386F57.jpg" />
</td>
<td>
<img class="image" src="https://deckinspectors.blob.core.windows.net/location1/image_picker_B1EDD566-0AF5-4BA5-A9D4-1BA5ABB7FA2A-29040-0000122F6395A60E.jpg" />
</td>
<td>
<img class="image" src="https://deckinspectors.blob.core.windows.net/location1/image_picker_742E0819-BA82-4019-9B4F-3CBBA64A5233-29040-0000122F63FA77F1.jpg" />
</td>
<td>
<img class="image" src="https://deckinspectors.blob.core.windows.net/location1/image_picker_B1EDD566-0AF5-4BA5-A9D4-1BA5ABB7FA2A-29040-0000122F6395A60E.jpg" />
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<img class="image" src="https://deckinspectors.blob.core.windows.net/location1/image_picker_CEA17B79-A21E-49E3-BDB4-FE8A156352DD-29040-0000122F64386F57.jpg" />
</td>
<td>
<img class="image" src="https://deckinspectors.blob.core.windows.net/location1/image_picker_742E0819-BA82-4019-9B4F-3CBBA64A5233-29040-0000122F63FA77F1.jpg" />
</td>
</tr>
</tbody>
</table>
</body>Your HTML includes external images. That works fine in a web browser, but AFAIK is not supported when inserting HTML into docx.
Then, how should I move about this? Should I try converting images to base64 and then try, hopefully should work.
Yes, something like that. Note that Microsoft Word only has very limited support for HTML inside docx files. I don't know what exactly is supported and what is not. This is very poorly documented. This library lets you insert any HTML you want, but can't guarantee that Word will open it. Note that Microsoft Word is absolutely not a web browser.