尝试离线导出到Highcharts

Posted 2021-04-08

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

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

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

答案

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

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

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

API：

fallbackToExportServer：boolean

如果脱机导出模块无法在客户端导出图表，是否回退到导出服务器。

...

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

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

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

另一答案

您需要将'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>

以上是关于尝试离线导出到Highcharts的主要内容，如果未能解决你的问题，请参考以下文章

HighCharts 离线导出模块不工作

Highcharts饼图导出，标签渲染两次

图像无法在 highcharts 中正确导出

Android Highcharts DialogFragment

如何在highcharts中更改导出文件名

highcharts 导出图片 .net Demo