Как удалить серую рамку вокруг холста - PullRequest
Новая
       10

Как удалить серую рамку вокруг холста

1 голос
/ 12 марта 2020

Мне нужно экспортировать в файл PDF какой-то фрагмент html. Я использую для этого html2canvas и pdf js. Но вокруг этого фрагмента добавлена ​​серая рамка

Вот фрагмент теста html: 

<div class="col-md-12 white-bg box-shadow margb0" id="test">
     <div class="col-md-12 paddl0 paddr0 margt0 margb10">
          <h4 class="paddb10 margt20 margb10 border-bottom-sc">
              Some information out here
          </h4>
     </div>
</div>

И css для него (col-md-12 от bootstrap .min. css): 

.white-bg { background: #ffffff; }
.margb0 {margin-bottom: 0px !important;}
.margt0 {margin-top: 0px !important;}
.margb10 {margin-bottom: 10px;}
.margt20 { margin-top: 20px;}
.paddl0 {padding-left: 0px !important;}
.paddr0 {padding-right: 0px !important;}
.paddb10 { padding-bottom: 10px;}
.border-bottom-sc {border-bottom: 1px solid #424343;}

В Chrome это выглядит так: enter image description here

Вот как я это делаю в js: 

var pdf = new jsPDF('p', 'pt', 'a4', true);
var content = document.getElementById('test');
html2canvas(content, { background: "white" },
                         { scrollX: 0, scrollY: 0 }).then(function (canvas) {
    var srcImg  = canvas;
    var sX      = 0;
    var sY      = 0;
    var sWidth  = 1150;
    var sHeight = 1350;
    var dX      = 25;
    var dY      = 25;
    var dWidth  = 1150;
    var dHeight = 1350;
    window.onePageCanvas = document.createElement("canvas");
    onePageCanvas.setAttribute('width', 1150);
    onePageCanvas.setAttribute('height', 1350);
    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.height;
    pdf.addImage(canvasDataURL, 'jpg', 0, 0, (width*.51), (height*.51));
    pdf.save('test.pdf');
});

А вот как этот фрагмент выглядит в документе: enter image description here

Демонстрация: https://jsfiddle.net/x6yg1kbm/2/

Итак, мой вопрос: как не показывать эту границу при экспорте в PDF?

Ответы [ 2 ]

0 голосов
/ 28 марта 2020

Нужно просто удалить .white-bg {background: #ffffff; } css свойство

0 голосов
/ 13 марта 2020

В вашем файле CSS удалите все поля и отступы, что по умолчанию приводит к тому, что документ имеет рамку. 

 * {
   margin: 0;
   padding: 0;
}
...