javascript - 在pdf中使用jspdf.debug.js Wrap table head时

Question

我正在使用 jspdf.debug.js 生成 pdf 格式的 html 表。表格标题未正确换行，如下所示: image of the distorted heading jspdf.debug.js

下面是打印出 thead 的代码。虽然它不会在下一行换行长文本

 jsPDFAPI.printHeaderRow = function (lineNumber, new_page) {

    if (!this.tableHeaderRow) {
        throw 'Property tableHeaderRow does not exist.';
    }

    var tableHeaderCell,
        tmpArray,
        i,
        ln;

    this.printingHeaderRow = true;
    if (headerFunction !== undefined) {
        var position = headerFunction(this, pages);
        setLastCellPosition(position[0], position[1], position[2], position[3], -1);
    }
    this.setFontStyle('bold');
    var tempHeaderConf = [];
    for (i = 0, ln = this.tableHeaderRow.length; i < ln; i += 1) {
        this.setFillColor(248,218,194);

        //this.maxWidth(10);
        //this.setWidth(10);
        // console.log("width"+this.width);
        /*changed neeraj color of table heading*/
        //this.setFillColor(200,200,200);


        tableHeaderCell = this.tableHeaderRow[i];
        if (new_page) {
            tableHeaderCell[1] = this.margins && this.margins.top || 0;
            tempHeaderConf.push(tableHeaderCell);
        }
        tmpArray = [].concat(tableHeaderCell);
        this.cell.apply(this, tmpArray.concat(lineNumber));
    }
    if (tempHeaderConf.length > 0){
        this.setTableHeaderRow(tempHeaderConf);
    }
    this.setFontStyle('normal');
    this.printingHeaderRow = false;
};
})(jsPDF.API);

if fiddle 的相同代码 https://jsfiddle.net/neerajsonar/afas07Lf/

Answer 1

我正在使用 jsPDF 版本 1.0.272

在jsPDFAPI.table = function (x,y, data, headers, config) (2833行左右)

1. 在if (printHeaders) {之后子句，我添加了 true作为调用 calculateLineHeight() 的最后一个参数: var lineHeight = this.calculateLineHeight(headerNames, columnWidths, headerPrompts.length?headerPrompts:headerNames,true);
2. 接下来，在 for 循环中，我从最后一个参数中删除了 String(): tableHeaderConfigs.push([x, y, columnWidths[header], lineHeight, (headerPrompts.length ? headerPrompts[i] : header)]);


3. 在 //Construct the data rows 之后的 for 循环中评论，我添加 false 作为 calculateLineHeight() 的最后一个参数: lineHeight = this.calculateLineHeight(headerNames, columnWidths, model,false);

4. 我向 calculateLineHeight 函数添加了另一个参数 isHeader: jsPDFAPI.calculateLineHeight = function (headerNames, columnWidths, model, isHeader)

5. 然后我修改了函数:

jsPDFAPI.calculateLineHeight = function (headerNames, columnWidths, model, isHeader) {
var header, lineHeight = 0;
for (var j = 0; j < headerNames.length; j++) {
header = headerNames[j];
if(isHeader){
model[j] = this.splitTextToSize(String(model[j]), columnWidths[model[j].toLowerCase().replace(/\s+/g, '')] - padding);
var h = this.internal.getLineHeight() * model[j].length + padding;
}else{
model[header] = this.splitTextToSize(String(model[header]), columnWidths[header] - padding);
var h = this.internal.getLineHeight() * model[header].length + padding;
}
if (h > lineHeight)
lineHeight = h;
}
return lineHeight;
};

如果您想取消加粗表格标题，请转到函数 jsPDFAPI.printHeaderRow = function (lineNumber, new_page)并注释行 this.setFontStyle('bold');