我需要一个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>
[据我了解，您的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选项（位于右下角，它将返回：
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。为避免colspan单元的任何问题，最好删除每个单元的所有width，然后将所需的宽度应用于第一个单元：
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 ]选项：-）