使用jsPDF插件将Html表转换为PDF

时间:2017-04-21 05:34:15

标签: javascript html pdf

这是Html表格代码:

function processDataToDictionary(csv) {
    var allTextLines = csv.split(/\r\n|\n/);

    var csvArray = [];

    for (let i = 0; i < allTextLines.length - 1; i++) {
        var row = allTextLines[i].split(',');

        csvArray.push(row);
    }

    var colCount = csvArray[0].length;
    var rowCount = csvArray.length;

    //Arrays of values
    var count = [];
    var sum = [];
    var average = [];
    var headers = [];

    for (let i = 1; i < colCount; i++) {
        var current = csvArray[0][i].replace(/"/g, '');
        sum.push(0);
        count.push(0);

        headers[i] = current;
    }

    for (let i = 1; i < rowCount; i++) {

        for (let j = 1; j < colCount; j++) {
            // Remove the quotes from your array
            current = csvArray[i][j].replace(/"/g, '');

            // Added the Method IsNullOrWhiteSpace
            if (!isNullOrWhitespace(current)) {
                // Parse as double not int to account for dec. values
                sum[j] += Number(current);
                count[j]++;
            }
        }
    }

    for (let i = 0; i < colCount; i++) {
        average.push((sum[i] + 0.0) / count[i]);
    }

    for (let i = 1; i < colCount; i++) {
     // create an empty array

        dictionary[headers[i]] = average[i];
    }

    return dictionary;

}

function isNullOrWhitespace(input) {

    if (input == " ") {

        return true;

    } else {

        return false;
    }
}

脚本代码:

<table id="tab_customers" class="table table-bordered table-striped hidden">
    <thead>
        <tr>
            <th>Month</th>
            <th>Total Income</th>
            <th>Total Expenses</th>
            <th>Total Profit</th>
            <th>Total Loss</th>
         </tr>
      </thead>
      <tbody>

      <tr>
         <td><?php if(!empty($month_name)) { echo $month_name; } else { echo '-';}?></td>
         <td><?php if(!empty($total_income)) { echo $total_income; } else { echo '0';}?></td>
         <td><?php if(!empty($total_expenses)) { echo $total_expenses; } else { echo '0';}?></td>
         <td><?php if(!empty($total_profit)) { echo $total_profit; } else { echo '0';}?></td>
         <td><?php if(!empty($total_loss)) { echo $total_loss; } else { echo '0';}?></td>

      </tr>
   </tbody>

这个插件工作正常,但问题是PDF格式的html表设计不正确附加是PDF的结果图。 enter image description here

我是新手使用此插件请指导我如何设置PDF格式的表格设计。

感谢所有人的帮助

0 个答案:

没有答案