尝试离线导出到 Highcharts

Question

我想使用 highcharts 进行离线导出。这是我的代码

import {Chart} from 'highcharts-vue'
import Highcharts from 'highcharts'
import offlineExporting from "highcharts/modules/offline-exporting"
offlineExporting(Highcharts)

我尝试将 exporting.js 和 offline-exporting.js 一起使用并且有效。这是问题的解决方案吗？如果不行，还有其他解决办法吗？

Answer 1

您需要将“exporting.fallbackToExportServer”设置为“false”，以便始终在本地导出您的图表。

http://jsfiddle.net/viethien/rcmpbsL1/

/* Automate testing of module somewhat */

var nav = Highcharts.win.navigator,
    isMSBrowser = /Edge\/|Trident\/|MSIE /.test(nav.userAgent),
    isEdgeBrowser = /Edge\/\d+/.test(nav.userAgent),
    containerEl = document.getElementById('container'),
    parentEl = containerEl.parentNode,
    oldDownloadURL = Highcharts.downloadURL;

function addText(text) {
    var heading = document.createElement('h2');
    heading.innerHTML = text;
    parentEl.appendChild(heading);
}

function addURLView(title, url) {
    var iframe = document.createElement('iframe');
    if (isMSBrowser && Highcharts.isObject(url)) {
        addText(title +
        ': Microsoft browsers do not support Blob iframe.src, test manually'
        );
        return;
    }
    iframe.src = url;
    iframe.width = 400;
    iframe.height = 300;
    iframe.title = title;
    iframe.style.display = 'inline-block';
    parentEl.appendChild(iframe);
}

function fallbackHandler(options) {
    if (options.type !== 'image/svg+xml' && isEdgeBrowser ||
        options.type === 'application/pdf' && isMSBrowser) {
        addText(options.type + ' fell back on purpose');
    } else {
        throw 'Should not have to fall back for this combination. ' +
            options.type;
    }
}

Highcharts.downloadURL = function (dataURL, filename) {
    // Emulate toBlob behavior for long URLs
    if (dataURL.length > 2000000) {
        dataURL = Highcharts.dataURLtoBlob(dataURL);
        if (!dataURL) {
            throw 'Data URL length limit reached';
        }
    }
    // Show result in an iframe instead of downloading
    addURLView(filename, dataURL);
};

Highcharts.Chart.prototype.exportTest = function (type) {
    this.exportChartLocal({
        type: type
    }, {
        title: {
            text: type
        },
        subtitle: {
            text: false
        }
    });
};

Highcharts.Chart.prototype.callbacks.push(function (chart) {
    if (!chart.options.chart.forExport) {
        var menu = chart.exportSVGElements && chart.exportSVGElements[0],
            oldHandler;
        chart.exportTest('image/png');
        chart.exportTest('image/jpeg');
        chart.exportTest('image/svg+xml');
        chart.exportTest('application/pdf');

        // Allow manual testing by resetting downloadURL handler when trying
        // to export manually
        if (menu) {
            oldHandler = menu.element.onclick;
            menu.element.onclick = function () {
                Highcharts.downloadURL = oldDownloadURL;
                oldHandler.call(this);
            };
        }
    }
});

/* End of automation code */


Highcharts.chart('container', {
    exporting: {
        chartOptions: { // specific options for the exported image
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true
                    }
                }
            }
        },
        sourceWidth: 400,
        sourceHeight: 300,
        scale: 1,
        fallbackToExportServer: false,
        error: fallbackHandler
    },

    title: {
        text: 'Offline export'
    },

    subtitle: {
        text: 'Click the button to download as PNG, JPEG, SVG or PDF'
    },

    chart: {
        type: 'area'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

});

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

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

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

Answer 2

要使用 offline-exporting 模块，您还需要导入 exporting 模块。

此外，您可以禁用 fallbackToExportServer 属性以便导出永远不会使用 Highcharts 导出服务器。

exporting: {
    ...,
    fallbackToExportServer: false
},

API:

fallbackToExportServer: boolean

Whether or not to fall back to the export server if the offline-exporting module is unable to export the chart on the client side.

...

现场演示： https://jsfiddle.net/BlackLabel/92dbwLgx/

API参考：https://api.highcharts.com/highcharts/exporting.fallbackToExportServer

文档： https://www.highcharts.com/docs/export-module/client-side-export

Answer 3

对于offline-exporting，您必须进行客户端导出实施

import { withHighcharts } from 'react-jsx-highcharts';
import Highcharts from 'highcharts';
import exportingOption from 'highcharts/modules/exporting';
import offlineOption from 'highcharts/modules/offline-exporting';

exportingOption(Highcharts);
offlineOption(Highcharts);

withHighcharts(Component, Highcharts);

此外，您必须添加导出对象作为 Highcharts 选项

exporting: {
    buttons: {
        contextButton: {
            menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
        }
    }
}

尝试离线导出到 Highcharts

Try to offline exporting to Highcharts

javascript

export

offline-mode

highcharts

vue.js