Преобразование HTML Div в PDF через jsPDF с SVG

Question

Я пытаюсь преобразовать html div в pdf, используя jsPDF. В моем div у меня есть файл svg с фоновым изображением, где пользователь может рисовать прямоугольник, линию, текст и т. Д. Я использую d3.js для рисования. Теперь я хочу сохранить свой div со всеми чертежами в pdf, но это только преобразование моего текста в pdf. Мой JS код

function htmlToPdf() { 
    console.log("--------------- with in demoFromHTML"); 
    var pdf = new jsPDF('p', 'pt', 'letter'); 
    // source can be HTML-formatted string, or a reference 
    // to an actual DOM element from which the text will be scraped. 
    source = $('svg.plancontainer')[0]; 

    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) 
    // There is no support for any other type of selectors 
    // (class, of compound) at this time. 
    specialElementHandlers = { 
    // element with id of "bypass" - jQuery style selector 
    '#bypassme': function (element, renderer) { 
     // true = "handled elsewhere, bypass text extraction" 
     return true 
    } 
    }; 
    margins = { 
    top: 80, 
    bottom: 60, 
    left: 40, 
    width: 522 
    }; 
    // all coords and widths are in jsPDF instance's declared units 
    // 'inches' in this case 
    pdf.fromHTML(
    source, // HTML string or DOM elem ref. 
    margins.left, // x coord 
    margins.top, { // y coord 
     'width': margins.width, // max width of content on PDF 
     'elementHandlers': specialElementHandlers 
    }, 

    function (dispose) { 
     // dispose: object with X, Y of the last line add to the PDF 
     //   this allow the insertion of new lines after html 
     // pdf.autoPrint(); 
     pdf.output('dataurlnewwindow'); 
    }, margins 
); 
} 

и является CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

Он печати PRINT AREA вместо моего image и текст с из svg рисунка.

Это предварительный мой образец DIV, что я хочу, чтобы преобразовать в PDF я не получил каких-либо конкретных informatin, задающие, где можно с помощью jsPDF или нет.

Теперь мои вопросы

• Можно ли с помощью jsPDF или любой другой JS библиотеки?

• Если возможно, не могли бы вы предложить мне?

Любые виды помощи приветствуются. Благодарю.

Answer 1

Поскольку на одном ответе мой вопрос, я делюсь своим решением, которое может помочь кому-то. Я не мог управлять печатью svg напрямую, используя jspdf вместо того, что я сделал, сначала конвертирует svg в изображение с помощью https://github.com/exupero/saveSvgAsPng, затем используйте это изображение для создания pdf. Ниже мой код

Получить base64 image uri используя svgAsPngUri метод saveSvgAsPng и передать этот образ через функцию обратного вызова

svgAsPngUri(#svgObj, options, function (uri, options) { 
     pdf(uri, options.pdf) 
    }); 

где я получаю image uri, как uri. С в моей pdf функции Я использую этот uri сделать Pdf

function pdf(b64Image, options) { 
    console.log("--------------- passing options is ", JSON.stringify(options, null, 4)); 
    var image = new Image(); 
    image.src = b64Image; 
    console.log('--------- pdf options' + JSON.stringify(options, null, 4)); 
    var pdf = new jsPDF(options.orientation, null, options.format); 

    margins = { 
     top: 20, 
     bottom: 20, 
     left: 20, 
     right: 20 
    }; 

    var pdfWidth = pdf.internal.pageSize.width; 
    var pdfHeight = pdf.internal.pageSize.height; 
    var footer_height = options.f_height || 30; 
    var htmlPageRightOffset = 0; 

    var outerRacBorder = 2; 
    var imageDrawableHeight = pdfHeight - margins.top - margins.bottom - footer_height - outerRacBorder; 
    var imageDrawableWidth = pdfWidth - margins.left - margins.right - outerRacBorder; 

    footer = { 
     top: margins.top + imageDrawableHeight + outerRacBorder + 10, 
     bottom: 20, 
     left: margins.left, 
     right: 20, 
     width: 100, 
     height: 25, 
    }; 

    company_text_position = { 
     x: footer.left+2, 
     y: footer.top + 6 
    }; 
    site_text_position = { 
     x: company_text_position.x, 
     y: company_text_position.y + 6 
    }; 
    floor_plan_text_position = { 
     x: site_text_position.x, 
     y: site_text_position.y + 6 
    }; 
    logo_text_position = { 
     x: pdfWidth - margins.left - 55, 
     y: pdfHeight - margins.bottom - 4 
    }; 
    logo_image_position = { 
     x: logo_text_position.x +35, 
     y: logo_text_position.y - 4 
    }; 
    /* 
    Image drawing on pdf 
    */ 
    imageSize = calculateAspectRatioFit(image.width, image.height, imageDrawableWidth, imageDrawableHeight); 
    pdf.addImage(image, 'JPEG', margins.left + 2, margins.top + 2, imageSize.width, imageSize.height); 

    /* 
    Outer rectangle 
    */ 
    pdf.rect(margins.left, margins.top, imageDrawableWidth + outerRacBorder, imageDrawableHeight + outerRacBorder); 

    // pdf.rect(margins.left, imageSize.height + 10, drawableWidth, (drawableWidth - imageSize.height)); 

    pdf.rect(footer.left, footer.top, footer.width, footer.height); 
    console.log(footer.left); 
    console.log(footer.company_x); 

    var footer_data = getFooterInfo(); 
    pdf.text("Company: " + footer_data.client, company_text_position.x, company_text_position.y); 
    pdf.text("Site: " + footer_data.site, site_text_position.x, site_text_position.y); 
    pdf.text("Floor Plan: " + footer_data.floor_plan, floor_plan_text_position.x, floor_plan_text_position.y); 

    pdf.text("Powered by: ", logo_text_position.x, logo_text_position.y); 

    var logo = new Image(); 
    logo.src = $('#logo_image').val(); 
    console.log(logo); 
    logoSize = calculateAspectRatioFit(logo.width, logo.height, 20, 10); 
    pdf.addImage(logo, 'JPEG', logo_image_position.x, logo_image_position.y, logoSize.width, logoSize.height); 

    pdf.autoPrint(); 
    pdf.save(options.name + '.pdf'); 
} 


/** 
* Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging 
* images to fit into a certain area. 
* 
* @param {Number} srcWidth Source area width 
* @param {Number} srcHeight Source area height 
* @param {Number} maxWidth Fittable area maximum available width 
* @param {Number} maxHeight Fittable area maximum available height 
* @return {Object} { width, heigth } 
* 
*/ 
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { 
    if(srcHeight == 0 || srcWidth == 0){ 
     return {width: maxWidth, height: maxHeight}; 
    } 

    var ratio = [maxWidth/srcWidth, maxHeight/srcHeight]; 
    ratio = Math.min(ratio[0], ratio[1]); 

    return {width: srcWidth * ratio, height: srcHeight * ratio}; 
} 

function getFooterInfo() { 
    var elem = $('.entityselbin .h4'); 
    var info = {}; 
    info.client = elem[0].innerHTML; 
    info.site = elem[1].innerHTML; 
    info.floor_plan = elem[2].innerHTML; 
    return info; 
} 

Answer 2

Вы можете напрямую написать SVG в PDF с последним canvg_context2d методом упоминания в примере

https://github.com/MrRio/jsPDF/blob/master/examples/canvg_context2d/bar_graph_with_text_and_lines.html

Это работает для большинства содержимого svg.