Skip to main content

Can't export IncludeHtml to NativeExcel, wraps HTML in SPAN tag

Johnny Stevens
  • Logi Info Ninja
  • Logi Forum Guru

I have a sample report below. I need to be able to export an SVG to PDF and NativeExcel. I am able to use the IncludeHtml element for the SVG and export to PDF without any issues. However, when I export to NativeExcel, I get no image (and corruption in the View Export HTML in the debugger).

I found that the IncludeHtml element wraps the contents in a SPAN tag which breaks the NativeExcel for some reason. To resolve this, I am grabbing my IncludeHtml's innerHTML and base64 encoding it to try to pass an HTML IMG tag to NativeExcel instead of the IncludeHtml. Here is the Action.PreActionJavascript I'm using (svgElement is my IncludeHtml and hdnXml is the Input.Hidden element I'm placing in my IMG tag's src attribute):

var svg = document.getElementById('svgElement').innerHTML; //get SVG from IncludeHtml element
console.log(svg); //check innerHTML for valid SVG as XML
var xmlval = btoa(svg); //base64 encode innerHTML for IncludeHtml element
document.getElementById('hdnXml').value = "data:image/svg+xml;base64,"+xmlval; //assign img string to hidden input

This isn't working for some reason... the js is sound and the console.log shows me the correct var values. Any ideas on how to make this work?

Here is my full reproducer with some other code that didn't work remarked:

<?xml version="1.0" encoding="utf-8"?>
<Report
    ID="TestGetSvgExcel"
    >
    <Body>
        <Division
            HtmlDiv="True"
            ID="divExport"
            ShowModes="rdBrowser"
            >
            <Label
                Caption="To Excel"
                >
                <Action
                    ID="expExcel"
                    Type="NativeExcel"
                    >
                    <Target
                        ExcelOutputFormat="Excel2007"
                        FrameID="NewWindow"
                        ID="tgtExcel"
                        ShowGridlines="True"
                        Type="NativeExcel"
                    />
                    <Action
                        Javascript="//var svg = document.getElementById(&apos;svgElement&apos;);
//var xmlval = new XMLSerializer().serializeToString(svg);
//document.getElementById(&apos;hdnXml&apos;).value = &quot;data:image/svg+xml;base64,&quot;+xmlval;
//this picks up the span tags, need to strip that off of svgElement or use innerHTML

var svg = document.getElementById(&apos;svgElement&apos;).innerHTML; //get SVG from IncludeHtml element
console.log(svg); //check innerHTML for valid SVG as XML
var xmlval = btoa(svg); //base64 encode innerHTML for IncludeHtml element
document.getElementById(&apos;hdnXml&apos;).value = &quot;data:image/svg+xml;base64,&quot;+xmlval; //assign img string to hidden input

return true;"
                        Type="PreActionJavascript"
                    />
                </Action>
            </Label>
        </Division>
        <Division
            HtmlDiv="True"
            ID="divBrowser"
            ShowModes="rdBrowser"
            >
            <IncludeHtml
                Html="&lt;svg xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; version=&quot;1.1&quot; class=&quot;highcharts-root&quot; style=&quot;font-family:arial, helvetica, sans-serif;font-size:12px;&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;800&quot; height=&quot;540&quot; viewBox=&quot;0 0 800 540&quot;&gt;&lt;desc&gt;Created with Highcharts 9.0.1&lt;/desc&gt;&lt;defs&gt;&lt;clipPath id=&quot;highcharts-sv8taes-16-&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;651&quot; height=&quot;492&quot; fill=&quot;none&quot;&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;/defs&gt;&lt;rect fill=&quot;#FFFFFF&quot; class=&quot;highcharts-background&quot; stroke=&quot;rgba(255,255,255,0)&quot; stroke-width=&quot;1&quot; x=&quot;0.5&quot; y=&quot;0.5&quot; width=&quot;798&quot; height=&quot;538&quot; rx=&quot;0&quot; ry=&quot;0&quot;&gt;&lt;/rect&gt;&lt;rect fill=&quot;#FFFFFF&quot; class=&quot;highcharts-plot-background&quot; x=&quot;48&quot; y=&quot;10&quot; width=&quot;651&quot; height=&quot;492&quot;&gt;&lt;/rect&gt;&lt;g class=&quot;highcharts-pane-group&quot; data-z-index=&quot;0&quot;&gt;&lt;/g&gt;&lt;g class=&quot;highcharts-grid highcharts-xaxis-grid&quot; data-z-index=&quot;1&quot;&gt;&lt;path fill=&quot;none&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 264.5 10 L 264.5 502&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 481.5 10 L 481.5 502&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 698.5 10 L 698.5 502&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 47.5 10 L 47.5 502&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class=&quot;highcharts-grid highcharts-yaxis-grid&quot; data-z-index=&quot;1&quot;&gt;&lt;path fill=&quot;none&quot; stroke=&quot;#C0C0C0&quot; stroke-width=&quot;1&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 48 502.5 L 699 502.5&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; stroke=&quot;#C0C0C0&quot; stroke-width=&quot;1&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 48 432.5 L 699 432.5&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; stroke=&quot;#C0C0C0&quot; stroke-width=&quot;1&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 48 361.5 L 699 361.5&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; stroke=&quot;#C0C0C0&quot; stroke-width=&quot;1&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 48 291.5 L 699 291.5&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; stroke=&quot;#C0C0C0&quot; stroke-width=&quot;1&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 48 221.5 L 699 221.5&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; stroke=&quot;#C0C0C0&quot; stroke-width=&quot;1&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 48 151.5 L 699 151.5&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; stroke=&quot;#C0C0C0&quot; stroke-width=&quot;1&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 48 80.5 L 699 80.5&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; stroke=&quot;#C0C0C0&quot; stroke-width=&quot;1&quot; data-z-index=&quot;1&quot; class=&quot;highcharts-grid-line&quot; d=&quot;M 48 9.5 L 699 9.5&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;rect fill=&quot;none&quot; class=&quot;highcharts-plot-border&quot; data-z-index=&quot;1&quot; x=&quot;48&quot; y=&quot;10&quot; width=&quot;651&quot; height=&quot;492&quot;&gt;&lt;/rect&gt;&lt;g class=&quot;highcharts-axis highcharts-xaxis&quot; data-z-index=&quot;2&quot;&gt;&lt;path fill=&quot;none&quot; class=&quot;highcharts-tick&quot; stroke=&quot;#ccd6eb&quot; stroke-width=&quot;1&quot; d=&quot;M 264.5 502 L 264.5 512&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; class=&quot;highcharts-tick&quot; stroke=&quot;#ccd6eb&quot; stroke-width=&quot;1&quot; d=&quot;M 481.5 502 L 481.5 512&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; class=&quot;highcharts-tick&quot; stroke=&quot;#ccd6eb&quot; stroke-width=&quot;1&quot; d=&quot;M 699.5 502 L 699.5 512&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; class=&quot;highcharts-tick&quot; stroke=&quot;#ccd6eb&quot; stroke-width=&quot;1&quot; d=&quot;M 47.5 502 L 47.5 512&quot; opacity=&quot;1&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;none&quot; class=&quot;highcharts-axis-line&quot; stroke=&quot;#ccd6eb&quot; stroke-width=&quot;1&quot; data-z-index=&quot;7&quot; d=&quot;M 48 502.5 L 699 502.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class=&quot;highcharts-axis highcharts-yaxis&quot; data-z-index=&quot;2&quot;&gt;&lt;path fill=&quot;none&quot; class=&quot;highcharts-axis-line&quot; data-z-index=&quot;7&quot; d=&quot;M 48 10 L 48 502&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class=&quot;highcharts-series-group&quot; data-z-index=&quot;3&quot;&gt;&lt;g class=&quot;highcharts-series highcharts-series-0 highcharts-line-series&quot; data-z-index=&quot;0.1&quot; opacity=&quot;1&quot; transform=&quot;translate(48,10) scale(1 1)&quot; clip-path=&quot;url(#highcharts-sv8taes-16-)&quot;&gt;&lt;path fill=&quot;none&quot; d=&quot;M 108.5 351.42857142857144 L 325.5 210.8571428571429 L 542.5 70.28571428571428&quot; class=&quot;highcharts-graph&quot; data-z-index=&quot;1&quot; stroke=&quot;rgba(36,159,218,0.8)&quot; stroke-width=&quot;2&quot; stroke-linejoin=&quot;round&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class=&quot;highcharts-markers highcharts-series-0 highcharts-line-series&quot; data-z-index=&quot;0.1&quot; opacity=&quot;1&quot; transform=&quot;translate(48,10) scale(1 1)&quot; clip-path=&quot;none&quot;&gt;&lt;/g&gt;&lt;g class=&quot;highcharts-series highcharts-series-1 highcharts-column-series&quot; data-z-index=&quot;0.1&quot; opacity=&quot;1&quot; transform=&quot;translate(48,10) scale(1 1)&quot; clip-path=&quot;url(#highcharts-sv8taes-16-)&quot;&gt;&lt;rect x=&quot;56&quot; y=&quot;492&quot; width=&quot;105&quot; height=&quot;1&quot; fill=&quot;rgba(138,192,66,0.8)&quot; opacity=&quot;1&quot; class=&quot;highcharts-point&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;273&quot; y=&quot;490&quot; width=&quot;105&quot; height=&quot;3&quot; fill=&quot;rgba(138,192,66,0.8)&quot; opacity=&quot;1&quot; class=&quot;highcharts-point&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;490&quot; y=&quot;489&quot; width=&quot;105&quot; height=&quot;4&quot; fill=&quot;rgba(138,192,66,0.8)&quot; opacity=&quot;1&quot; class=&quot;highcharts-point&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class=&quot;highcharts-markers highcharts-series-1 highcharts-column-series&quot; data-z-index=&quot;0.1&quot; opacity=&quot;1&quot; transform=&quot;translate(48,10) scale(1 1)&quot; clip-path=&quot;none&quot;&gt;&lt;/g&gt;&lt;/g&gt;&lt;text x=&quot;400&quot; text-anchor=&quot;middle&quot; class=&quot;highcharts-title&quot; data-z-index=&quot;4&quot; style=&quot;color:#274b6d;font-size:16px;fill:#274b6d;&quot; y=&quot;23&quot;&gt;&lt;/text&gt;&lt;text x=&quot;400&quot; text-anchor=&quot;middle&quot; class=&quot;highcharts-subtitle&quot; data-z-index=&quot;4&quot; style=&quot;color:#4d759e;fill:#4d759e;&quot; y=&quot;25&quot;&gt;&lt;/text&gt;&lt;text x=&quot;10&quot; text-anchor=&quot;start&quot; class=&quot;highcharts-caption&quot; data-z-index=&quot;4&quot; style=&quot;color:#666666;fill:#666666;&quot; y=&quot;538&quot;&gt;&lt;/text&gt;&lt;g class=&quot;highcharts-legend&quot; data-z-index=&quot;7&quot; transform=&quot;translate(711,10)&quot;&gt;&lt;rect fill=&quot;none&quot; class=&quot;highcharts-legend-box&quot; rx=&quot;0&quot; ry=&quot;0&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;78&quot; height=&quot;45&quot; visibility=&quot;visible&quot;&gt;&lt;/rect&gt;&lt;g data-z-index=&quot;1&quot;&gt;&lt;g&gt;&lt;g class=&quot;highcharts-legend-item highcharts-line-series highcharts-color-undefined highcharts-series-0&quot; data-z-index=&quot;1&quot; transform=&quot;translate(8,3)&quot;&gt;&lt;path fill=&quot;none&quot; d=&quot;M 0 13 L 16 13&quot; class=&quot;highcharts-graph&quot; stroke=&quot;rgba(36,159,218,0.8)&quot; stroke-width=&quot;2&quot;&gt;&lt;/path&gt;&lt;text x=&quot;21&quot; style=&quot;color:#000000;cursor:pointer;font-size:14px;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;start&quot; data-z-index=&quot;2&quot; y=&quot;17&quot;&gt;Count&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;highcharts-legend-item highcharts-column-series highcharts-color-undefined highcharts-series-1&quot; data-z-index=&quot;1&quot; transform=&quot;translate(8,20)&quot;&gt;&lt;text x=&quot;21&quot; y=&quot;17&quot; style=&quot;color:#000000;cursor:pointer;font-size:14px;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;start&quot; data-z-index=&quot;2&quot;&gt;id&lt;/text&gt;&lt;rect x=&quot;0&quot; y=&quot;6&quot; width=&quot;16&quot; height=&quot;12&quot; fill=&quot;rgba(138,192,66,0.8)&quot; class=&quot;highcharts-point&quot; data-z-index=&quot;3&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class=&quot;highcharts-axis-labels highcharts-xaxis-labels&quot; data-z-index=&quot;7&quot;&gt;&lt;text x=&quot;156.5&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(0,0)&quot; y=&quot;523&quot; opacity=&quot;1&quot;&gt;Johnny&lt;/text&gt;&lt;text x=&quot;373.5&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(0,0)&quot; y=&quot;523&quot; opacity=&quot;1&quot;&gt;Sallie&lt;/text&gt;&lt;text x=&quot;590.5&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(0,0)&quot; y=&quot;523&quot; opacity=&quot;1&quot;&gt;Emily&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;highcharts-axis-labels highcharts-yaxis-labels&quot; data-z-index=&quot;7&quot;&gt;&lt;text x=&quot;33&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;end&quot; transform=&quot;translate(0,0)&quot; y=&quot;508&quot; opacity=&quot;1&quot;&gt;0&lt;/text&gt;&lt;text x=&quot;33&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;end&quot; transform=&quot;translate(0,0)&quot; y=&quot;437&quot; opacity=&quot;1&quot;&gt;50&lt;/text&gt;&lt;text x=&quot;33&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;end&quot; transform=&quot;translate(0,0)&quot; y=&quot;367&quot; opacity=&quot;1&quot;&gt;100&lt;/text&gt;&lt;text x=&quot;33&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;end&quot; transform=&quot;translate(0,0)&quot; y=&quot;297&quot; opacity=&quot;1&quot;&gt;150&lt;/text&gt;&lt;text x=&quot;33&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;end&quot; transform=&quot;translate(0,0)&quot; y=&quot;226&quot; opacity=&quot;1&quot;&gt;200&lt;/text&gt;&lt;text x=&quot;33&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;end&quot; transform=&quot;translate(0,0)&quot; y=&quot;156&quot; opacity=&quot;1&quot;&gt;250&lt;/text&gt;&lt;text x=&quot;33&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;end&quot; transform=&quot;translate(0,0)&quot; y=&quot;86&quot; opacity=&quot;1&quot;&gt;300&lt;/text&gt;&lt;text x=&quot;33&quot; style=&quot;color:#000000;cursor:default;font-size:12px;white-space:nowrap;font-weight:normal;font-family:verdana;fill:#000000;&quot; text-anchor=&quot;end&quot; transform=&quot;translate(0,0)&quot; y=&quot;16&quot; opacity=&quot;1&quot;&gt;350&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;"
                ID="svgElement"
            />
        </Division>
        <Division
            HtmlDiv="True"
            ID="divImage"
            ShowModes="rdExport"
            >
            <Remark>
                <Image
                    Caption="@Request.hdnXml~"
                    ID="img"
                />
            </Remark>
            <HtmlTag
                HtmlTagName="img"
                >
                <HtmlAttributeParams
                    src="@Request.hdnXml~"
                />
            </HtmlTag>
        </Division>
        <InputHidden
            ID="hdnXml"
        />
    </Body>
    <ideTestParams
        hdnXml=""
    />
</Report>

 

0

Comments

1 comment

Date Votes
  • Johnny Stevens
    • Logi Info Ninja
    • Logi Forum Guru

    After reviewing with Logi Engineering, we found that Logi's NativeExcel exporter/renderer doesn't accept SVG code. I solved this requirement by using the following process:

    1. Generate the Chart in Info
    2. Use HighCharts' getSVG API to get the SVG for the chart
    3. --stop here and pass the SVG as Hidden Input if you want PDF export--
    4. Write the SVG to a hidden (in CSS) IMG element
    5. When the img loads, copy its contents to an HTML CANVAS element
    6. Use the Canvas element's toDataURL API
    7. Store the resulting DataURL (minus the prefix) in a Hidden Input
    8. Pass that Hidden Input as a Request Token (POST) to a new report definition
    9. In the new definition, use a DataLayer.Static to grab the Token value
    10. Add a FileColumn element to write the Token to the file server as a PNG
    11. Present the PNG on the page as the Caption in an Image Element
    12. Export this page/report to Excel

    This feels convoluted but it works, and it is typically much faster than using the Action.NativeExcel which re-runs the entire report to generate the Excel. I'll create a separate forum post with a full reproducer so the option isn't hidden under this specific topic.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post