wkhtmltopdf使用中遇到的渲染问题

问题1. wkhtmltopdf生成pdf过程中出现echart无法渲染问题，思路就是在服务端渲染echart图表，以base64形式展示到img标签上。asyncData是nuxt.js运行在服务端的生命周期。

<script>
import * as echarts from 'echarts'
import { getChartOptions1 } from '@/utils/index'
const Canvas = require('canvas')

export default {
  async asyncData ({ $axios, query }) {
    const options1 = getChartOptions1()
    // 在服务端生成canvas节点
    const canvas = new Canvas.Canvas(parseInt(986, 10), parseInt(380, 10))
    echarts.setCanvasCreator(function () {
      return canvas
    })
    // 初始化echart
    const chart = echarts.init(canvas)
    // 生成chart1
    chart.setOption(options1)
    const imgChart1 = `data:image/png;base64,${chart.getDom().toBuffer().toString('base64')}`

    return { imgChart1 }
  }
}
</script>

node-canvas在服务端运行，需要根据不同操作系统配置环境，可以按照官方步骤配置

相似问题参考

使用node-canvas可能会遇到babel配置问题，可以参考

{
  "presets": ["@babel/preset-env"]
}

问题2. table表格分页之后出现多余的表头，解决方法

thead {
  display: table-row-group;
}

问题3. 对于不想tr分页被分割在两页时，可以设置

tr {
  page-break-inside: avoid !important;
}

问题4. 需要pdf在章节强制分页，可以在需要分页的地方插入一个div。

<div class="divider"></div>

.divider {
  page-break-before: always;
}

问题5. 对于Vue、React单页应用项目可能存在无法渲染生成pdf问题，也可能是wkhtmltopdf内核版本问题，不过试了公司好几个项目都不行，最后使用了nuxt.js来进行服务端渲染。

问题6. 字体不对，可以把相应字体放入项目中，在线转换字体文件很可能对文件造成破坏。

问题7. 表头使用<thead><th></th></thead>，一定不要使用<tr><td></td></tr>，虽然浏览器效果一样，但插件转换完成之后会出现位置错乱。

问题8. 目录使用.xsl文件来生成，相关语法参考：https://www.w3school.com.cn/x...。

实例参考：https://blog.csdn.net/qq_2986...

问题9. 图片会有默认的3像素边距，普通项目可以忽略，不过要生成pdf，每一像素差别会很影响布局。

https://www.cnblogs.com/yaoyu...

原文地址：https://xiaofeihe1993.github....