SVG가있는 jsPDF를 통해 HTML Div를 PDF로 변환

jsPDF을 사용하여 HTML div를 pdf로 변환하려고합니다. 내 div에 나는 사용자가 직사각형, 선, 텍스트 등을 그릴 수있는 배경 이미지가있는 svg 파일을 가지고 있습니다. 드로잉에 d3.js을 사용하고 있습니다. 지금은 PDF로 모든 도면과 함께 내 사업부를 저장하고 싶지만 단지 PDF로 내 텍스트를 변환. 내 JS 코드는SVG가있는 jsPDF를 통해 HTML Div를 PDF로 변환

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 로 변환 할 내 샘플 사업부의 미리보기입니다.

이제 내 질문

는 jsPDF 또는 JS 다른 라이브러리를 사용하여 가능하다?
가능하면 제게 제안 해주세요.

모든 종류의 도움을 받으실 수 있습니다. 감사.

출처

2016-12-20 Engr. Hasanuzzaman Sumon

해결 방법을 찾으셨습니까? –

하나의 대답에 대해 내 질문에 도움이 될 수있는 해결책을 공유하고 있습니다. 난 직접 jspdf을 사용하는 대신 내가 무엇을했는지를 svg으로 변환하여 이미지를 https://github.com/exupero/saveSvgAsPng로 변환 한 다음 pdf를 만드는 이미지를 사용합니다. 아래는 내가 uri로 image uri을 얻고 콜백 함수

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

를 통해 해당 이미지를 saveSvgAsPng의 svgAsPngUri 방법을 사용하고 전달할 내 코드

가져 base64 image uri입니다. 내 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; 
}

출처

2017-02-09 12:14:00

를 만들기 위해이 uri을 사용하고 당신이 직접

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

이 대부분 작동 예에서 최신 canvg_context2d 방법에 대한 언급과 함께 PDF로 SVG를 쓸 수 있습니다 svg 내용 중.

출처

2017-05-08 06:43:12 DharanBro

SVG가있는 jsPDF를 통해 HTML Div를 PDF로 변환

답변

관련 문제