SVGを持つjsPDF経由でHTML DivをPDFに変換

Question

jsPDFを使用してhtml divをpdfに変換しようとしています。私のdivには、svgの背景画像を持つファイルがあります。このファイルでは、長方形、線、テキストなどを描画できます。描画にはd3.jsを使用しています。今私はPDFにすべての図面で私のdivを保存するが、それは私のテキストを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 
); 
} 

であり、それが出てsvg図面に代わり、私のimageとテキストのPRINT AREAを印刷<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

CDNです。

は、それは私が、私はそれがjsPDFかを使用して可能である場所を指定し、特定のinformatinを取得していないPDF に変換したい私のサンプルのdivのプレビューです。

は今、私の質問は

• あるjsPDFや他のJSライブラリを使用して、それは可能ですか？

• 可能であれば、私にお勧めしますか？

何か助けていただければ幸いです。ありがとう。

Answer 1

1つの答えで私の質問は私が何かを助けるかもしれない私のソリューションを共有しているので。私は印刷svgを直接使用することができませんでしたjspdf代わりにsvgを使用して画像に変換しますhttps://github.com/exupero/saveSvgAsPng画像を使用してpdfを作成します。以下は、私のコードは

がsaveSvgAsPngのsvgAsPngUri方法を使用してbase64 image uriを取得し、コールバック関数uriとして、私はimage uriを取得しています

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

て、そのイメージを渡しています。私pdf機能で、私は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

を作るために、このuriを使用していますとあなたは、直接これがほとんどのために働く

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

例では、最新のcanvg_context2d方法の言及をPDFにSVGを書くことができますsvgのコンテンツの