关于前端: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 来进行服务端渲染。