从javascript生成的网页PDF与网页不同

Question

我在html2pdf的帮助下将我的网页转换为PDF。将网页转换为html的代码如下所示

 $("#btnpdf").click(function() {
        var element = document.getElementById('target');
        html2pdf(element,{
      filename:     'MyPDF.pdf',
      image:        { type: 'jpeg', quality: 1 },

    });
    });

生成pdf但其中的数据没有正确定位。它下面的表格标题和小部件与网页中看不完全一致。它们稍微偏离了网页中的实际位置。

我使用的HTML如下

我的HTML代码

<div id="target">
<div class="gridster">
 <table border = "1" class=".table-responsive">
                    <tr>
                        <th colspan="4"  style="background-color:#05345c;">Zone 1</th>
                        <th colspan="4"  style="background-color:#05345c;">Zone  2</th>
                        <th colspan="4"  style="background-color:#05345c;">Zone  3</th>
                    </tr>
                    <tr>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 1</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 2</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 3</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 4</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 1</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 2</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 3</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 4</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 1</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 2</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 3</td>
                        <td width="400" align="center" style="background-color:#0085ca">Sub 4</td>
                    </tr>
                </table>
    <ul>
    </ul>

</div>
</div>
<div class="controls">
    <button class="js-seralize">Serialize</button>
</div>

<textarea id="log"></textarea>

                <button class="add-button btn btn-success mr-2">Add widget</button>

                <input type="button" class="btn btn-success mr-2" id="btnpdf" value="Download PDF"/>

我的整个Javascript代码

我的JS代码

var gridster;


gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 100],
  widget_margins: [5, 5],
    serialize_params: function($w, wgd) {
            return {value:$w.find('textarea').val().trim() , col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}
        },
  helper: 'clone',
  resize: {
    enabled: true
  }
}).data('gridster');

var json = [{
    "html": "Some big text ", //testing this failed
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html": "Brand1, Small text", 
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},

{
    "html": "Very big text",
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},


{
    "html": "Brand 5",
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "Brand 5",
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},

{
    "html": "Brand 5",
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];

for(var index=0;index<json.length;index++) {
    gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><textarea class="textareaclass">' +json[index].html+ '</textarea></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
}


    $('.js-seralize').on('click', function() {
        var s = gridster.serialize();
        $('.gridster ul li').each((idx, el) => { // grab the grid elements
            s[idx].html = $('textarea', el).html(); // add the html key/values
        });
        $('#log').val(JSON.stringify(s));
});

$(document).on("click", ".delete-widget-button", function() {
        var gridster = $(".gridster ul").gridster().data('gridster');
        gridster.remove_widget($(this).parent());
    });

     $(document).on( "click", ".add-button", function() {
        var gridster = $(".gridster ul").gridster().data('gridster');      
        //gridster.add_widget('<li><button class="delete-widget-button">-</button></li>', 1, 1);

        // get selected color value
        var color = $("#widget-color").val();

        // build the widget, including a class for the selected color value
        var $widget = $('<li>', {
          'style': 'background-color:' + color
        })
        .append($('<button>', {
          'class': 'delete-widget-button',
          'text':'-'
        }))
        .append($('<textarea>',{
        'class' : 'textareaclass'
        }));

        // add widget to the grid
        gridster.add_widget($widget, 1, 1);


    });

   $("#btnpdf").click(function() {
    var element = document.getElementById('target');
    html2pdf(element,{
  filename:     'MyPDF.pdf',
  image:        { type: 'jpeg', quality: 1 },

});
});

Fiddle Link 从Fiddle下载的pdf的小部件与Sub1，Sub2等不同步。不像实际的网页显示