🪑 table style pre-processing before inquiries for docx, with time table examples ✨
This commit is contained in:
parent
d41d9d2ac8
commit
5a0359dcea
@ -26,26 +26,64 @@
|
|||||||
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">ถ้าจะต้องรายงาน</span><span
|
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">ถ้าจะต้องรายงาน</span><span
|
||||||
style="color:#4d8db0;font-family:'Angsana New', serif;font-size:16pt;"><strong><u>ค่าเฉลี่ย</u></strong></span><span
|
style="color:#4d8db0;font-family:'Angsana New', serif;font-size:16pt;"><strong><u>ค่าเฉลี่ย</u></strong></span><span
|
||||||
style="font-family:'Angsana New', serif;font-size:16pt;">ของการวัดความยาวครั้งนี้ </span><span
|
style="font-family:'Angsana New', serif;font-size:16pt;">ของการวัดความยาวครั้งนี้ </span><span
|
||||||
style="font-size:16pt;">
|
style="font-size:16pt;">
|
||||||
<script type="math/tex">\left(\overline{x}\right)</script>
|
<script type="math/tex">\left(\overline{x}\right)</script>
|
||||||
</span><span
|
</span><span
|
||||||
style="font-family:'Angsana New', serif;font-size:16pt;"> และรายงานความคลายเคลื่อนของความยาวเฉลี่ย </span><span
|
style="font-family:'Angsana New', serif;font-size:16pt;">และรายงานความคลายเคลื่อนของความยาวเฉลี่ย </span><span
|
||||||
style="font-size:16pt;">
|
style="font-size:16pt;">
|
||||||
<script type="math/tex">\left(\Delta\overline{x}\right)</script>
|
<script type="math/tex">\left(\Delta\overline{x}\right)</script>
|
||||||
</span><span style="font-family:'Angsana New', serif;font-size:16pt;"> ด้วยสูตร</span></p>
|
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">ด้วยสูตร</span></p>
|
||||||
<p style="text-align:center;"><span style="font-size:16pt;">
|
<p style="text-align:center;"><span style="font-size:16pt;">
|
||||||
<script type="math/tex">\Delta\overline{x}=\frac{x_{\max}-x_{\min}}{2}</script>
|
<script type="math/tex">\Delta\overline{x}=\frac{x_{\max}-x_{\min}}{2}</script>
|
||||||
</span><span style="font-family:'Angsana New', serif;font-size:16pt;"> </span></p>
|
</span><span style="font-family:'Angsana New', serif;font-size:16pt;"> </span></p>
|
||||||
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">เมื่อ </span><span style="font-size:16pt;">
|
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">เมื่อ </span><span
|
||||||
<script type="math/tex">x_{\max}</script>
|
style="font-size:16pt;">
|
||||||
</span><span style="font-family:'Angsana New', serif;font-size:16pt;"> และ </span><span
|
<script type="math/tex">x_{\max}</script>
|
||||||
style="font-size:16pt;">
|
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">และ </span><span
|
||||||
<script type="math/tex">x_{\min}</script>
|
style="font-size:16pt;">
|
||||||
</span><span style="font-family:'Angsana New', serif;font-size:16pt;"> คือ ค่าที่มากที่สุด
|
<script type="math/tex">x_{\min}</script>
|
||||||
|
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">คือ ค่าที่มากที่สุด
|
||||||
และค่าที่น้อยที่สุดของข้อมูล ตามลำดับ</span></p>
|
และค่าที่น้อยที่สุดของข้อมูล ตามลำดับ</span></p>
|
||||||
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">ข้อใดแสดงผลการรายงานการวัดความยาว</span><span
|
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">ข้อใดแสดงผลการรายงานการวัดความยาว</span><span
|
||||||
style="color:#7ccc7b;font-family:'Angsana New', serif;font-size:16pt;"><i><strong><u>ได้ถูกต้อง</u></strong></i></span>
|
style="color:#7ccc7b;font-family:'Angsana New', serif;font-size:16pt;"><i><strong><u>ได้ถูกต้อง</u></strong></i></span>
|
||||||
</p>
|
</p>
|
||||||
|
<figure class="table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">ตารางเรียน</th>
|
||||||
|
<th colspan="3">ปีการศึกษา 2567 ภาคปลาย (Spring2024)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>วัน</th>
|
||||||
|
<th>เวลา</th>
|
||||||
|
<td>0900 - 1200</td>
|
||||||
|
<td>1300 - 1600</td>
|
||||||
|
<td>1630 - 1900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">วันพฤหัส</th>
|
||||||
|
<td>Prob Stat</td>
|
||||||
|
<td>Seminar</td>
|
||||||
|
<td>ComSys Security</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">lathmive</th>
|
||||||
|
<td>
|
||||||
|
<script type="math/tex">\sum_{0\le i \le m \atop 0 < j < n}P\left(i,j\right)</script>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<script type="math/tex">\prod_{k=1}^{n}A_k</script>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<script type="math/tex">\bigcup_{n=1}^{m}\left(X_n\cap Y_n\right)</script>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="./ckeditor.dist.js"></script>
|
<script src="./ckeditor.dist.js"></script>
|
||||||
|
|||||||
@ -52,12 +52,41 @@ export default class Export extends Plugin {
|
|||||||
const parser = new DOMParser();
|
const parser = new DOMParser();
|
||||||
const doc = parser.parseFromString(this.editor.getData(), "text/html");
|
const doc = parser.parseFromString(this.editor.getData(), "text/html");
|
||||||
|
|
||||||
|
// pre-process mathlive script to html MathML tag with the help of temml
|
||||||
for (const mathliveElement of doc.querySelectorAll('script[type="math/tex"]')) {
|
for (const mathliveElement of doc.querySelectorAll('script[type="math/tex"]')) {
|
||||||
const temmlWrapperElement = document.createElement('span');
|
const temmlWrapperElement = document.createElement('span');
|
||||||
const temmlMathMLString = Temml.render(mathliveElement.textContent ?? "", temmlWrapperElement);
|
const temmlMathMLString = Temml.render(mathliveElement.textContent ?? "", temmlWrapperElement);
|
||||||
mathliveElement.replaceWith(temmlWrapperElement);
|
mathliveElement.replaceWith(temmlWrapperElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// pre-process for table
|
||||||
|
for (const table of doc.querySelectorAll('table')) {
|
||||||
|
// pre-process table for border and centering and inner border
|
||||||
|
table.style.borderCollapse = 'collapse';
|
||||||
|
table.style.borderSpacing = '0';
|
||||||
|
table.style.border = '1px solid #b3b3b3';
|
||||||
|
table.style.margin = 'auto';
|
||||||
|
// pre-process table for padding
|
||||||
|
for (const td of table.querySelectorAll('td')) {
|
||||||
|
td.style.padding = '8px';
|
||||||
|
}
|
||||||
|
// pre-process table for inner border
|
||||||
|
for (const tr of table.querySelectorAll('tr')) {
|
||||||
|
for (const td of tr.querySelectorAll('td')) {
|
||||||
|
td.style.border = '1px solid #b3b3b3';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// pre-process table for header background color rgba(0,0,0,.05) to hex #f2f2f2
|
||||||
|
// and it's own border
|
||||||
|
// and padding
|
||||||
|
const ths = table.querySelectorAll('th');
|
||||||
|
for (const th of ths) {
|
||||||
|
th.style.backgroundColor = '#f2f2f2';
|
||||||
|
th.style.border = '1px solid #b3b3b3';
|
||||||
|
th.style.padding = '8px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
console.log(doc.body.innerHTML);
|
console.log(doc.body.innerHTML);
|
||||||
|
|
||||||
fetch('http://localhost:8080/aspose/html-to-word', {
|
fetch('http://localhost:8080/aspose/html-to-word', {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user