html2canvas和jspdf导出pdf,每个页面模块占一页,在pdf中垂直居中显示
创始人
2024-06-01 00:11:00

需求:html页面转换pdf,页面有多个模块,页面中有文本、echarts、表格等模块,一个模块占一页,因为模块高度不够,所以需要垂直居中
通过html2canvas和jspdf实现,html2canvas用于将页面元素生成canvas,jspdf用于将页面元素导出pdf
效果:在这里插入图片描述
以下代码可以直接运行,背景图需要自行加一下
注意点:背景图片不支持跨域图片,非要使用跨域图片。可以通过js转成base64,使用base64设置背景图片
图片需要在服务器端才能正常导出,可以使用vscode的live-server插件


Document

你好世界

2月3日

echarts

文本

本网站上的图像不能用于以下目的。如有违反,将承担损害赔偿责任,敬请遵守。 1、不能用图像本身或处理过的图像的二次分发 2、不能用作服务标记或商标 3、不能使用违法、虚假、诽谤、侵权等违反公序良俗的内容。 4、不能用作色情图片 5、不能用于成人媒体、娱乐相关(包括歌舞俱乐部等)和约会服务6、不能用于互联网异性恋介绍业务 7、不能用在消费金融中的应用 8、不能欺骗,例如使用人的照片通过各种软件渠道去骗取任性与钱财 9、不能用照片损坏国家形象和利益

表格

故障统计1月27日1月28日1月29日1月30日1月31日2月1日2月2日周累计风险00000000服务00000000

相关内容

热门资讯

伦敦成立专门警队保护犹太社区 来源:新华社新华社北京5月6日电英国伦敦警察局6日宣布,针对犹太社区频频遭袭的情况,该部门将成立一支...
多地农商行存款再降息,全国性银... 近期,多地农商行密集下调存款利率,部分银行还加强了差异化利率定价,提高负债成本管理的精细化程度。与此...
药物受理最新动态:江苏华益核医... 国家药品监督管理局药品审评中心数据显示,2026年5月7日,江苏华益核医药股份有限公司的氟[18F]...
药物受理最新动态:雷允上药业集... 国家药品监督管理局药品审评中心数据显示,2026年5月7日,雷允上药业集团有限公司的红灵散申请已获受...
药物受理最新动态:昆明中药厂有... 国家药品监督管理局药品审评中心数据显示,2026年5月7日,昆明中药厂有限公司的柏子养心丸申请已获受...