javascript - 画布和响应式 jspdf

Question

我正在像这样使用 canvas 和 jspdf 生成 pdf 表单。我将粘贴表格：

<div id="alert" class="form_wrapper">
<div id="teste" class="form_container">
<div class="title_container">
<h4>PLANO INDIVIDUAL DE CUIDADOS</h4>
</div> 
<form id="insert_form">
<div class="row clearfix">
<div class="col_half1">
<label>Código Utente</label>
<div class="input_field"> <span><i aria-hidden="true" class="fa fa-file-code"></i></span>
<input type="text" id="codigo1" name="codigo" value="'.$row["codigo"].'" class="form-control" readonly="true"/>
</div>
</div>

那么js有这样的方式：

$('#dataModal').on('shown.bs.modal', function(){
   $("body").css("height", $('.modal-dialog', this).outerHeight()+"px");
}).on('hide.bs.modal', function(){
   $("body").css("height","auto");
});

(function($){
    $.fn.createPdf = function(parametros) {

        var config = {              
            'fileName':'html-to-pdf'
        };

        if (parametros){
            $.extend(config, parametros);
        }                            

        var quotes = document.getElementById($(this).attr('id'));

        html2canvas(quotes, {
            onrendered: function(canvas) {
                var pdf = new jsPDF('p', 'pt', 'A4');
                for (var i = 0; i <= quotes.clientHeight/1250; i++) {
                    var srcImg  = canvas;
                    var sX      = 0;
                    var sY      = 1250*i;
                    var sWidth  = 900;
                    var sHeight = 1250;
                    var dX      = 0;
                    var dY      = 0;
                    var dWidth  = 900;
                    var dHeight = 1250;

                    window.onePageCanvas = document.createElement("canvas");
                    onePageCanvas.setAttribute('width', 900);
                    onePageCanvas.setAttribute('height', 1250);
                    var ctx = onePageCanvas.getContext('2d');
                    ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

                    var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
                    var width         = onePageCanvas.width;
                    var height        = onePageCanvas.clientHeight;

                    if (i > 0) {
                        pdf.addPage(595.28, 841.89);
                    }

                    pdf.setPage(i+1);
                    pdf.addImage(canvasDataURL, 'PNG', 10, 25, (width*.62), (height*.62));
                }

                pdf.save(config.fileName);
            }
        });
    };
})(jQuery);

function createPDF(teste) {
    $('#alert').createPdf({
        'fileName' : 'PIC'
    });
}   
    ……………
    </form>  
    </div>
    </div>

的CSS：

@media (min-width: 324px) {
    
    .modal-dialog {
            width: 370px;
            /* New width for default modal */} /* 1600px */
    }

@media (min-width: 82em) {
    
    .modal-dialog {
            width: 950px;
            /* New width for default modal */} /* 1600px */
    }

当我在计算机屏幕上生成 pdf 时，它会生成具有正确测量值的 pdf，如图所示：

但是如果在手机上生成是这样生成的，就不要填写pdf表格：

可以帮忙

标签： javascripthtml2canvas