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文件另起一页，可以使用以下方式

<div ></div>

• 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);

  AI代码助手复制代码

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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>