公司业务系统功能要求在数据表右侧操作中添加一个‘打印’功能, 将该条数据详情经过css样式处理后,导出为pdf格式。
刚开始的做法是弹一个窗口,预览要导出的页面,再导出为pdf。
后来找到一个方法,可以将预览页面隐藏,实现点击按钮,页面无需展示,直接导出的效果。
代码如下:
<div style="position: relative">
<div style="position: absolute;">
<!-- previewSignTable是需要html2canvas生成图片的页面 -->
<preview-sign-table ref="previewSignTable" />
</div>
</div>
只需要在你要生成图片的组件,或者标签外层,加两个div设置position即可。就是这么简单。