Question

我的梦想是将div的内容保存为pdf。目前我正在以这种方式使用Html2pdf：

function pdfFatt() {
        var idFatt = 1;
        var dataFatt = 1;

        var div = document.querySelector('.default_template_holder');

        if(div_stampa){
            html2canvas(div, {
                onrendered: function (canvas) {
                    var imgData = canvas.toDataURL('image/jpeg');
                    var doc = new jsPDF();
                    doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
                    doc.save('fatt_'+idFatt+'_'+dataFatt+'.pdf');
                }
            });
        }else{

        }
}

问题是解决方案，事实上所有工作都有效，但图像的分辨率确实很差。（截图1）。

网上冲浪我找到了解决方案，我将缩放画布！所以我的代码就是这个

function pdfFatt() {
        var idFatt = 1;
        var dataFatt = 1;

        var scaleBy = 2;
        var w = 2480;
        var h = 3508;
        var div = document.querySelector('.default_template_holder');
        var canvas = document.createElement('canvas');
        canvas.width = w * scaleBy;
        canvas.height = h * scaleBy;
        canvas.style.width = w + 'px';
        canvas.style.height = h + 'px';
        var context = canvas.getContext('2d');
        context.scale(scaleBy, scaleBy);

        if(div_stampa){
            html2canvas(div, {
                canvas:canvas,
                onrendered: function (canvas) {
                    var imgData = canvas.toDataURL('image/jpeg');
                    var doc = new jsPDF();
                    doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
                    doc.save('fatt_'+idFatt+'_'+dataFatt+'.pdf');
                }
            });
        }else{

        }
}

分辨率现在还可以，但图片不适合画布!!我需要添加参数＆＃34; canvas：canvas＆＃34;在html2pdf函数上，它还没有得到缩放。（截图2）。

有没有办法获得（截图1）分辨率为（截图2）？

非常感谢。

screenshot 1

screenshot 2

解决问题的代码是：

    function pdfFatt() {
   //selezione elementi nella visuale della fattura
   var menu = document.querySelector('.vertical_menu_area'); 
   var div = document.querySelector('.default_template_holder');
   var barra = document.querySelector('.fattura-strumenti');

   //controllo esistenza dei 3 elementi fondamentali
   if(div && menu && barra){

      //id e data fattura per nome pdf
      var idFatt = $j(".fattura-sub-intestazione input[name='id-fattura']").val();
      var dataFatt = $j(".fattura-sub-intestazione input[name='data-fattura']").val();

          //creazione canvas scalato x 2 per alta risoluzione
          var scaleBy = 2;
      var w_menu = menu.offsetWidth;
      var h_menu = menu.offsetHeight;
          var w_div = div.offsetWidth;
      var h_div = div.offsetHeight;
          var div_style = div.currentStyle || window.getComputedStyle(div);
          var mar_div_w = parseFloat(div_style.marginLeft);
          var mar_div_h = parseFloat(div_style.marginTop);
          var w_barra = barra.offsetWidth;
      var h_barra = barra.offsetHeight;
      var canvas = document.createElement('canvas');
          var context = canvas.getContext('2d');
          canvas.width = w_div * scaleBy;
      canvas.height = h_div * scaleBy;
          context.scale(scaleBy, scaleBy);
          context.translate(-w_menu-w_barra-mar_div_w-8,-mar_div_h);
      context.webkitImageSmoothingEnabled = true;
          context.mozImageSmoothingEnabled = true;
          context.imageSmoothingEnabled = true;
          context.imageSmoothingQuality = "high";

          //creazione pdf con script html2canvas
      html2canvas(div, {
         canvas:canvas,
         onrendered: function (canvas) {
            var imgData = canvas.toDataURL('image/jpeg', 1.0);
        var doc = new jsPDF();
        doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
        doc.save('fattura_'+idFatt+'_'+dataFatt+'.pdf');
          }
       });
   }else{
      alert("Impossibile salvare la fattura");
   }
}

Answer 1

您的第一个代码是正确的，您只需要获取var div的宽度和高度并将其用于jsPDF()和.addImage尺寸，关于分辨率，尝试添加{{1 }}选项并将浏览器比例固定为1。我在下面更新了您的代码：

dpi:300

让canvas.toDataUrl获得正确的图像维度

1 个答案: