Я использую комбинацию 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 с границами
Спасибо, Аманда