问题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;}