wkhtmltopdf+echarts问题的解决方法

今天就跟大家聊聊有关wkhtmltopdf + echarts 问题的解决方法，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、网站建设、杨浦网络推广、微信平台小程序开发、杨浦网络营销、杨浦企业策划、杨浦品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供杨浦建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

wkhtmltopdf github
wkhtmltopdf 使用手册
开启debug --debug-javascript 调试利器
不支持新的语法必如let 定义变量最好使用var
最好不要省略每条语句后面的分号`;`
table 跨页导致表头重叠的解决方法，给tr元素标签添加以下样式

.tr {
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
}

pdf文件另起一页，可以使用以下方式

echarts 使用svg初始化饼状图，在浏览器预览时正常，生成pdf后出现黑影。添加animation：false (为何使用svg而不是canvas，因为svg生成的pdf清晰度更高)

var emailSortChart = echarts.init(document.getElementById('emailSort'), null, {renderer: 'svg'});
    var emailSortData = jsonData;
    var emailLegend = [],
        emailSeries = [];
    emailSortData.forEach(function (item) {
        var name = item['email_from'].length <= 20 ? item['email_from'] : item['name'].slice(0, 20) + '...';
        emailLegend.push(name);
        emailSeries.push({
            value: item['count_num'],
            name: name,
        });
    });

    var emailSortOption = {
        color: ["#833bf4", "#fd8a6d", "#20b6db", "#0b92fe", "#d071e5"],
        tooltip: {
            trigger: 'item',
            formatter: "{d}%",
            align: 'left',
        },
        legend: {
            type: 'scroll',
            x: 'right',
            y: 'top',
            orient: 'vertical',
            align: 'left',
            itemWidth: 10,
            itemHeight: 10,
            data: emailLegend
        },
        calculable: true,
        animation: false, // 重点添加这行代码即可解决
        series: [{
            name: '半径模式',
            type: 'pie',
            center: ['40%', '50%'],
            radius: [38, 80],
            // roseType: 'radius',
            label: {
                normal: {
                    formatter: "{d}%"
                },

            },
            lableLine: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0, 0, 0, 0.8)',
                    shadowBlur: 5,
                }
            },
            data: emailSeries
        }]
    };
    emailSortChart.setOption(emailSortOption);

看完上述内容，你们对wkhtmltopdf + echarts 问题的解决方法有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

当前文章：wkhtmltopdf+echarts问题的解决方法
转载来于：http://myzitong.com/article/pishjo.html

wkhtmltopdf+echarts问题的解决方法

其他资讯