Offline-Exporting PDF (BOOST) Issue 19253

author(s): PadWorks

by PadWorks

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.src.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>


<div id="container"></div>

<button id="exportPdf">
  Export PDF
</button>
<button id="exportPng">
  Export PNG
</button>

CSS

#container {
    height: 400px;
}

JavaScript

// workaround solution - override some functions
((H) => {

const { addEvent, fireEvent, merge, error, extend } = H;

const Exporting = H._modules['Extensions/Exporting/Exporting.js'],
	OfflineExporting = H._modules['Extensions/OfflineExporting/OfflineExporting.js'],
  OfflineExportingDefaults = H._modules['Extensions/OfflineExporting/OfflineExportingDefaults.js'];

// allow necessary tags, attributes and references
H.AST.allowedTags.push('image');
H.AST.allowedAttributes.push('preserveAspectRatio');
H.AST.allowedAttributes.push('filter');
H.AST.allowedReferences.push('data:');

function pushUnique() {
  return array.indexOf(item) < 0 && !!array.push(item);
}

function getSVGForLocalExport(options, chartOptions, failCallback, successCallback) {
  const chart = this,
    // After grabbing the SVG of the chart's copy container we need
    // to do sanitation on the SVG
    sanitize = (svg) => chart.sanitizeSVG(svg, chartCopyOptions),
    // When done with last image we have our SVG
    checkDone = () => {
      if (images && imagesEmbedded === imagesLength) {
        successCallback(sanitize(chartCopyContainer.innerHTML));
      }
    },
    // Success handler, we converted image to base64!
    embeddedSuccess = (imageURL, imageType, callbackArgs) => {
      ++imagesEmbedded;
      // Change image href in chart copy
      callbackArgs.imageElement.setAttribute('href', imageURL);
      checkDone();
    };
  let el, chartCopyContainer, chartCopyOptions, href = null,
    images, imagesLength = 0,
    imagesEmbedded = 0;
  // Hook into getSVG to get a copy of the chart copy's
  // container (#8273)
  chart.unbindGetSVG = addEvent(chart, 'getSVG', (e) => {
    chartCopyOptions = e.chartCopy.options;
    chartCopyContainer = e.chartCopy.container.cloneNode(true);
    images = chartCopyContainer && chartCopyContainer
      .getElementsByTagName('image') || [];
    imagesLength = images.length;
  });
  // Trigger hook to get chart copy
  chart.getSVGForExport(options,...