Results 1 to 5 of 5

Thread: Export Chart to PDF in extjs4.1 client side

  1. #1
    Sencha User Jeegnesh's Avatar
    Join Date
    Feb 2013
    Location
    Khedbrahma
    Posts
    30
    Answers
    1

    Default Answered: Export Chart to PDF in extjs4.1 client side

    Is any code or package available for export the chart(gauge,column) to PDF at client side. bcoz my all the chart is created at client side and i need to export as pdf,but all web forum says that it's only achieve by server side. my extjs version is 4.1 and i am using vb.net as monogramming language.
    thanks in advance!



  2. Now see what i done...

    <javascript>
    Ext.fly('ctl00_RPTHtml').dom.value = ""


    var srcurl = 'data.aspx?M=getHTMLToPdf'

    form = Ext.get('form2').dom

    Ext.fly('ctl00_RPTHtml').dom.value = window.encodeURI(Ext.get(eval(result)[0].columnLineConfig.divToRender).dom.innerHTML);


    form.action = srcurl;
    form.submit();

    </javasript>

    and

    getHTMLtoPDF:

    Dim pdfDocument As PdfDocument.Document = Nothing
    Dim pdfConverter As PdfConverter = New PdfConverter()
    Dim pdfBytes As Byte() = Nothing


    Dim strHtml As String = ""
    Dim htmlreport As String = ""
    Dim ReportFileName As String = ""
    Dim Response_1 As HttpResponse = Me.Response


    htmlreport = Me.Request.Form.Item("ctl00$RPTHtml").ToString()
    htmlreport = HttpUtility.UrlDecode(htmlreport)


    Response_1.Clear()
    Response_1.Buffer = True
    Response_1.ClearContent()
    Response_1.ClearHeaders()


    ReportFileName = GetReportName() + ".pdf"


    pdfConverter = New Winnovative.WnvHtmlConvert.PdfConverter()


    pdfConverter.AvoidImageBreak = True
    pdfConverter.AvoidTextBreak = True
    pdfConverter.TruncateOutOfBoundsText = True
    pdfConverter.LicenseKey = "7MfezN3M3MzbwtzM393C3d7C1dXV1Q=="
    pdfConverter.PdfDocumentOptions.PdfPageSize = PdfPageSize.A4
    pdfConverter.PdfDocumentOptions.StretchToFit = True


    pdfBytes = pdfConverter.GetPdfBytesFromHtmlString(htmlreport)


    Response_1.AddHeader("Content-type", "application/pdf")
    Response_1.AddHeader("Content-Disposition", "attachment; filename=" + ReportFileName)


    Response_1.BinaryWrite(pdfBytes)
    Response_1.Flush()
    Response_1.End()
    -----------------------------------------------------------------------------
    i get this one why this happening. something mistake in select innerhtml


    Attachment 44064

  3. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    But all web forum says that it's only achieve by server side
    Is correct. You might want to look at the sample for SVG exporting, it sends an SVG string to the server and expects an image response. You could probably do a similar thing by either:

    a) svg -> pdf
    b) svg -> image -> pdf

    As for how you achieve a or b, that's outside the scope of this forum.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #3
    Sencha User Jeegnesh's Avatar
    Join Date
    Feb 2013
    Location
    Khedbrahma
    Posts
    30
    Answers
    1

    Default

    Now see what i done...

    <javascript>
    Ext.fly('ctl00_RPTHtml').dom.value = ""


    var srcurl = 'data.aspx?M=getHTMLToPdf'

    form = Ext.get('form2').dom

    Ext.fly('ctl00_RPTHtml').dom.value = window.encodeURI(Ext.get(eval(result)[0].columnLineConfig.divToRender).dom.innerHTML);


    form.action = srcurl;
    form.submit();

    </javasript>

    and

    getHTMLtoPDF:

    Dim pdfDocument As PdfDocument.Document = Nothing
    Dim pdfConverter As PdfConverter = New PdfConverter()
    Dim pdfBytes As Byte() = Nothing


    Dim strHtml As String = ""
    Dim htmlreport As String = ""
    Dim ReportFileName As String = ""
    Dim Response_1 As HttpResponse = Me.Response


    htmlreport = Me.Request.Form.Item("ctl00$RPTHtml").ToString()
    htmlreport = HttpUtility.UrlDecode(htmlreport)


    Response_1.Clear()
    Response_1.Buffer = True
    Response_1.ClearContent()
    Response_1.ClearHeaders()


    ReportFileName = GetReportName() + ".pdf"


    pdfConverter = New Winnovative.WnvHtmlConvert.PdfConverter()


    pdfConverter.AvoidImageBreak = True
    pdfConverter.AvoidTextBreak = True
    pdfConverter.TruncateOutOfBoundsText = True
    pdfConverter.LicenseKey = "7MfezN3M3MzbwtzM393C3d7C1dXV1Q=="
    pdfConverter.PdfDocumentOptions.PdfPageSize = PdfPageSize.A4
    pdfConverter.PdfDocumentOptions.StretchToFit = True


    pdfBytes = pdfConverter.GetPdfBytesFromHtmlString(htmlreport)


    Response_1.AddHeader("Content-type", "application/pdf")
    Response_1.AddHeader("Content-Disposition", "attachment; filename=" + ReportFileName)


    Response_1.BinaryWrite(pdfBytes)
    Response_1.Flush()
    Response_1.End()
    -----------------------------------------------------------------------------
    i get this one why this happening. something mistake in select innerhtml


    PDF.png

  5. #4
    Sencha User Jeegnesh's Avatar
    Join Date
    Feb 2013
    Location
    Khedbrahma
    Posts
    30
    Answers
    1

    Default Export Chart to PDF in extjs4.1 client side

    bcoz i forgot to include the "ext-all.css" file
    just see how i include
    Dim objReader As New System.IO.StreamReader(Server.MapPath("App_Themes/ext-all.css"))
    Dim a As String = objReader.ReadToEnd
    htmlreport = "<html><head><style type=""text/css"">" + a + "</style></head><body>" + htmlreport + "</body></html>"

    problem solved

  6. #5

    Default

    Can I get you're example on jsfiddle.net? I'm looking forward for this feauture
    *Btw, can I use this method in ExtJS 4.2?

    Thanks in advance

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •