页面导出为PDF文件时为每页增加页眉
接上篇文章,https://blog.51cto.com/boytnt/2324214,有人问到如何给每页加页眉,其实思想很简单,比如页眉上想添加logo,那就在jspdf创建每页时多加个图片上去就好了。
先上效果图,借华为LOGO一用:
文章图片
再放代码,主体还是上篇文章的分页导出算法:
测试PDF导出 - 锐客网 html,body { margin:0; padding:0; } #page ul { padding:0; list-style:none; } #page li { line-height:110px; color:#fff; padding-left:10px; font-size:26px; } #logo { display:none; } .c0 { background-color:#ea644a; } .c1 { background-color:#f1a325; } .c2 { background-color:#38b03f; } .c3 { background-color:#03b8cf; } .c4 { background-color:#bd7b46; } .c5 { background-color:#8666b8; }
文章图片
变化在于以下几点:
1、添加了一个隐藏的标签,用于承载logo;
2、创建每一页时,多加了一行pdf.addImage(logo, 'PNG', 5, 3),用于在页眉位置放logo;
【页面导出为PDF文件时为每页增加页眉】
不使用标签,在代码里直接创建Image对象然后指定src来加载图片也行,但要注意应在Image对象的onload事件里再处理后续代码。另外注意运行时不能直接双击打开,需要放到web服务器上,因为加载了图片资源,受浏览器安全性限制,toDataURL仅允许同源资源,否则会报错:Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.。
推荐阅读
- 为什么你的路演总会超时()
- 知识
- 财商智慧课(六)
- 低头思故乡——只是因为睡不着
- 华为旁!大社区、地铁新盘,佳兆业城市广场五期!
- 吃了早餐,反而容易饿(为什么?)
- 你有婚内虐待行为吗()
- Android中的AES加密-下
- ?【段子图】内裤为啥湿呢(想想好邪恶啊...)
- 孩子行为背后的秘密(2)胡老师讲座感悟