wkhtmltopdf + echarts 问题的解决方法

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

• 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 问题的解决方法有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注行业资讯频道，感谢大家的支持。