图表生成pdf,出坑经历

之前公司有个需求是,图表生成pdf 

然后 我们是使用的vue,引用组件是echarts(当然vcharts/vue-scharts等)用工具wkhtmltopdf生成;

注意点1:echarts的图表默认是有动画效果的,会导致生成的PDF中图表只渲染了一部分,所以在导出pdf的页面中,你需要把动画效果关闭

注意点2:图表渲染出来其实是 canvas使用 SVG 渲染器、也可使用 Canvas 渲染器(默认)有些情况下用Canvas 生成不了



这些是注意的地方,页面图表正常,但是尽管这样 用工具wkhtmltopdf生成的图表为空,然后页面直接用ctrl+s保存下来的html,也是正常的有图表,

(貌似因为ctrl+s 保存下来是经过浏览器编译过的 )

太多坑,记不得了,最后没用wkhtmltopdf。。。。

用了 phantomjs 工具

phantomjs 真的是太强大了,建议大家如果是vue 项目,用这个 它自己有个js 里面都可以配置,纸张大小 边距等等


需要注意的一点是,如果你数据很多 有异步数据可以设置延迟时间,使页面可以充分渲染完以后转pdf;

执行的命令

第一次写,好多坑都忘了,大家有问题可以问我 谢谢

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值