Как удалить верхнюю / нижнюю границы со страниц jspdf?

Я использую комбинацию html2canvas, canvg и jspdf, чтобы взять содержимое html (которое содержит графики svg) и превратить их в холсты, которые затем используются для создания файла pdf. Чтобы предотвратить некоторые неприятные проблемы с разрывом страниц, лучшим решением, которое я нашел, было создание нескольких холстов, где 1 холст равнялся бы одной странице. Затем холсты преобразуются в изображения с помощью todataurl () перед использованием библиотеки jspdf, и она отлично работает, за исключением того, что каждое изображение на странице pdf имеет верхнюю и нижнюю границы.

Эти границы не отображаются на самой веб-странице, ни в HTML, ни в холстах - они отображаются только в сгенерированном PDF-файле. Я не нашел ничего в Google, кроме этого сообщения: html2canvas и toDataURL сгенерированы изображение имеет горизонтальную линию. Кто-нибудь знает, что происходит и как убрать эти границы?

-Редактировать: я должен добавить, я пробовал установить границу: нет на холстах, и это не помогло. Ни на одном из моих div'ов также не установлено свойство border. Используемый браузер - IE 11, и IE 10+ должен поддерживаться (Chrome и другие не являются опциями).

Это код, который я использую для создания PDF-файла:

function saveToCAMM(canvasArray) {
    var numCanvas = canvasArray.length;
    var imgWidth = 250;
    var pageHeight = 360;
    var canvasPDF = new jsPDF('l', 'mm', "letter");

    for (var i = 0; i < numCanvas; i++) {
        var canvas = canvasArray[i];

        var canvasImg = canvas.toDataURL("image/jpeg", 1.0);
        var imgHeight = canvas.height * imgWidth / canvas.width;

        if (i != 0) { canvasPDF.addPage(); }

        canvasPDF.addImage(canvasImg, 'JPEG', 15, 0, imgWidth, imgHeight);
    }


    canvasPDF.setDisplayMode("125%", "continuous");

}

пример: страница PDF с границами

Спасибо, Аманда


person user1779418    schedule 22.05.2017    source источник
comment
Поделитесь кодом, который вы пытались использовать для проекта.   -  person trav    schedule 22.05.2017
comment
Ой, спасибо за напоминание.   -  person user1779418    schedule 22.05.2017


Ответы (1)


У меня была такая же проблема: кажется, что изображения jpeg получают черный фон в функции canvas.toDataURL ("image / jpeg", 1.0), как было указано:

https://ourcodeworld.com/articles/read/10/image-created-from-canvas-have-black-background-html5-.

Использование canvas.toDataURL () и принятие изображения png с прозрачным фоном сделали это за меня.

person octameter    schedule 08.12.2018