我需要一个JavaScript函数，该函数将允许我调整HTML文件中每个表的一行的单元格的大小，以使该行的全局大小等于表的声明大小。目标是使尺寸以data-pdfmake宽度形式传递给PdfMake：[cellWidths]。
示例：
以下是我当前拥有的部分代码：
function fnProcessTables() {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
var t = tables [i];
// find 1st row
var rows = t.getElementsByTagName("tr");
if (rows && rows.length > 0) {
var tr = rows [0];
// row cells
var cells = tr.getElementsByTagName("td");
// find cell widths and store them as "w1,w2...,wN"
var cellWidths = "";
for (var j = 0; j < cells.length; j++) {
var td = cells [j];
var w = parseFloat(td.style.width);
if (cellWidths) {
cellWidths = cellWidths + ','
}
cellWidths = cellWidths + w.toString();
}
// add data-pdfmake attribute to the table: '{"widths":[w1,w2...,wN]}')
t.setAttribute("data-pdfmake", '{"widths":[' + cellWidths + ']}');
}
}
};
和HTML中的示例表：
<table cellspacing="0" cellpadding="0pt" style="width:**538.6**pt;border-collapse:collapse;">
<colgroup>
<col width="180" />
<col width="180" />
<col width="180" />
<col width="180" />
</colgroup>
<tr align="left" valign="top">
<td style="width:**129.55**pt; padding-right:1.8pt; padding-left:1.8pt; border-top: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-left: 1pt solid #000000;">
<p lang="fr-FR" style="text-align:right;text-indent:0pt;margin-top:0pt;margin-bottom:0pt;font-family:'Courier New';font-size:10pt;color:#000000;">1</p>
</td>
<td style="width:**129.55**pt; padding-right:1.8pt; padding-left:1.8pt; border-top: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-left: 1pt solid #000000;">
<p lang="fr-FR" style="text-align:right;text-indent:0pt;margin-top:0pt;margin-bottom:0pt;font-family:'Courier New';font-size:10pt;color:#000000;">2</p>
</td>
<td style="width:**129.55**pt; padding-right:1.8pt; padding-left:1.8pt; border-top: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-left: 1pt solid #000000;">
<p lang="fr-FR" style="text-align:right;text-indent:0pt;margin-top:0pt;margin-bottom:0pt;font-family:'Courier New';font-size:10pt;color:#000000;">3</p>
</td>
<td style="width:**129.55**pt; padding-right:1.8pt; padding-left:1.8pt; border-top: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-left: 1pt solid #000000;">
<p lang="fr-FR" style="text-align:right;text-indent:0pt;margin-top:0pt;margin-bottom:0pt;font-family:'Courier New';font-size:10pt;color:#000000;">4</p>
</td>
</tr>
</table>
答案 0 :(得分：0)
据我了解，您有一个表格，其style中的宽度已定义。例如：
<table style="width:538.6pt">
并且您希望单元格具有此宽度除以一行中的单元格数量。例如，代替：
<tr>
<td style="width:129.55pt">Cell 1</td>
<td style="width:129.55pt">Cell 1</td>
<td style="width:129.55pt">Cell 1</td>
<td style="width:129.55pt">Cell 1</td>
<tr>
您要拥有（tableWidth /行中单元格的nb = 538.6 / 4 = 134.65）：
<tr>
<td style="width:134.65pt">Cell 1</td>
<td style="width:134.65pt">Cell 2</td>
<td style="width:134.65pt">Cell 3</td>
<td style="width:134.65pt">Cell 4</td>
<tr>
注意–在您的问题中您说：
差异= 538.6-518.2 = 20.4因此，有必要将每个像元的大小更改20.4 / 4 = 5.1，以便将129.55 + 5.1 = 124.45
但是129.55 + 5.1不等于124.45，因此您可能表示129.55 + 5.1 = 134.65 （与我相同的结果）
您的代码实际上是正确的。它将呈现：
<table style="width:538.6pt;border-collapse:collapse;" data-pdfmake="{"widths":[129.55,129.55,129.55,129.55]}" cellspacing="0" cellpadding="0pt">
当您将其传递给html-to-pdfmake playground时，通过禁用the tableAutoSize选项（位于右下角），它将返回：
"widths": [
134.65,
134.65,
134.65,
134.65
]
这是预期的行为。一切准备就绪！
但是，如果要使用选项tableAutoSize，如in the documentation所述，脚本将使用每个单元格width属性中的style，而且您不需要做t.setAttribute("data-pdfmake", '{"widths":[' + cellWidths + ']}');。
在您要使用此tableAutoSize选项的情况下，html-to-pdfmake将为每个单元格使用最大的width。为避免colspan单元格出现任何问题，最好删除每个单元格的所有width，然后将所需的宽度应用于第一个单元格：
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
var t = tables[i];
// find the width for the table in "style"
var tableStyle = t.getAttribute("style");
if (tableStyle && tableStyle.indexOf("width") > -1) {
// search for the width's value
var mtch = tableStyle.match(/width:(\d+(\.\d+)?)pt;?/);
if (mtch) {
// 'tableWidth' is the total width for the row that we want to apply
var tableWidth = mtch[1];
for (var r=0; r<t.rows.length; r++) {
var cells = t.rows[r].getElementsByTagName('th');
if (cells.length === 0) cells = t.rows[r].getElementsByTagName('td');
// we assume the first row will always have the maximum number of cells
// meaning there will never be any "colspan" in the first row
if (r === 0) {
// we have to divide the table's width by the number of cells
var widthByCell = tableWidth / cells.length;
}
for (var c=0; c<cells.length; c++) {
// remove the "width" in style because html-to-pdfmake will use this value when option tableAutoSize:true
var style = cells[c].getAttribute("style") || "";
// do we have a style?
if (style.indexOf("width") > -1) {
// remove the existing 'width' value
style = style.replace(/width:\d+(\.\d+)?pt;?/g,"");
}
// if it's the first row, then we add the new width
if (r === 0) {
style += "width:"+widthByCell+"pt";
}
cells[c].setAttribute("style", style);
}
}
}
}
}
应用此代码后，您的行将如下所示–原始的width值已被删除，新的width已被应用：
<tr valign="top" align="left">
<td style="[...some style...];width:134.65pt">
<p style="text-align:right;text-indent:0pt;margin-top:0pt;margin-bottom:0pt;font-size:10pt;color:#000000;" lang="fr-FR">1</p>
</td>
<td style="[...some style...];width:134.65pt">
<p style="text-align:right;text-indent:0pt;margin-top:0pt;margin-bottom:0pt;font-size:10pt;color:#000000;" lang="fr-FR">2</p>
</td>
<td style="[...some style...];width:134.65pt">
<p style="text-align:right;text-indent:0pt;margin-top:0pt;margin-bottom:0pt;font-size:10pt;color:#000000;" lang="fr-FR">3</p>
</td>
<td style="[...some style...];width:134.65pt">
<p style="text-align:right;text-indent:0pt;margin-top:0pt;margin-bottom:0pt;font-size:10pt;color:#000000;" lang="fr-FR">4</p>
</td>
</tr>
然后html-to-pdfmake会为您呈现widths：
"widths": [
134.65,
134.65,
134.65,
134.65
]
因此，这取决于您是否使用tableAutoSize选项：-）