问题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在服务端运行,需要根据不同操作系统配置环境,可以按照[官方步骤配置](https://github.com/Automattic/node-canvas/#compiling)
[相似问题参考](https://blog.csdn.net/wengye1990/article/details/71120743)
使用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;
}
```