html转pdf分页问题终极解决方案 k-htmlpdf

k-htmlpdf 是能将Dom一键配置输出pdf的包，

这个包是借鉴了qq_251025116大佬的解决方案并优化升级完成的，原文链接

jspdf分页有个比较不好的地方就内容过长的时候虽然会虽然能做到分页，但是会把内容给截断，解决思路是给每个可能会被截断元素加上类，然后动态的计算该元素的位置是否在下一页和上一页之间，如果在的话就添加一个空白元素把这个元素给挤下去，这样就能实现了

1.安装依赖

    npm install k-htmlpdf

2.使用方法

    import PdfLoader from 'k-htmlpdf'let dom = document.querySelector("#pdfDom");let pdf = new PdfLoader(dom, "测试", "itemClass",'break_page');pdf.outPutPdfFn("测试");

使用说明

 let pdf =  new PdfLoader(<ele>,<pdfFileName>,[splitClassName],[breakClassName])

ele:需要导出pdf的容器元素(dom节点不是id)

pdfFileName: 导出文件的名字通过调用outPutPdfFn方法也可传参数改变

splitClassName: 避免分段截断的类名当pdf有多页时需要传入此参数 , 避免pdf分页时截断元素如表格

调用方式先 let pdf = new PdfLoader(ele, ‘pdf’ ,‘itemClass’);

若想改变pdf名称 pdf.outPutPdfFn(fileName); outPutPdfFn方法返回一个promise 可以使用then方法处理pdf生成后的逻辑

breakClassName:自定义分页符类名，默认为break_page,添加改类名的标签被自动分页到下一页

 pdf.outPutPdfFn([fileName])

*输出下载pdf

效果演示

正常效果
分页符
自动换页，防止切割

gitee 仓库
https://gitee.com/kirk958617/k-htmlpdf
github 仓库
https://github.com/manongguai/k-htmlpdf

html转pdf分页问题终极解决方案 k-htmlpdf相关推荐

Puppeteer将动态html页面生成pdf（终极解决方案）
开通掘金好几年一直没有写文章,近一年经常有朋友问我将动态的h5/vue/react/原生js 页面转成pdf,我觉得有必要写个文章,给大家提供一套经过多个项目验证的完整解决方案的思路:觉得有用可以点赞 ...
microPython驱动tft屏幕显示中文终极解决方案
microPython驱动tft屏幕显示中文终极解决方案一.运行效果二.实现原理原理同上篇文章一样,用在线汉字取模工具获取点阵的字节信息,通过st7789py.py驱动程序显示出来. 上次的程序 ...
Pytorch 训练与测试时爆显存(cuda out of memory)的终极解决方案，使用cpu(勿喷)
Pytorch 训练与测试时爆显存(cuda out of memory)的终极解决方案,使用cpu(勿喷) 参见了很多方法,都没有用. 简单点,直接把gpu设成-1
分布式事务终极解决方案探讨
2019独角兽企业重金招聘Python工程师标准>>> 分布式事务终极解决方案探讨转载于:https://my.oschina.net/dslcode/blog/1606115
静态页转换平台(StaticPol)－静态页生成终极解决方案
我本身非常不喜欢写文字材料,但是这个东西相信是很多人都需要的,把心得写出来和大家分享一下,也好让大家都努力PP,以助于尽快完善这个东东,早日贴出来供大家下载使用. 为什么要生成静态页? 这个问题咱们就 ...
Flash中文字体嵌入终极解决方案
Flash中文字体嵌入终极解决方案 http://www.xiumu.org/technology/flash-chinese-characters-embedded-in-the-ultimate- ...
TextView设置文字包含中英文时自动换行问题的终极解决方案
TextView设置文字包含中英文时自动换行问题的终极解决方案参考文章: (1)TextView设置文字包含中英文时自动换行问题的终极解决方案 (2)https://www.cnblogs.com/ ...
xml中1字节的UTF-8序列的字节1无效（[字符编码]Invalid byte 1 of 1-byte UTF-8 sequence终极解决方案）
xml中1字节的UTF-8序列的字节1无效([字符编码]Invalid byte 1 of 1-byte UTF-8 sequence终极解决方案) 参考文章: (1)xml中1字节的UTF-8序列的 ...
android 获取视频缩略图终极解决方案(ffmpeg)
android 获取视频缩略图终极解决方案(ffmpeg) 参考文章: (1)android 获取视频缩略图终极解决方案(ffmpeg) (2)https://www.cnblogs.com/juka ...
[字符编码]Invalid byte 1 of 1-byte UTF-8 sequence终极解决方案
[字符编码]Invalid byte 1 of 1-byte UTF-8 sequence终极解决方案参考文章: (1)[字符编码]Invalid byte 1 of 1-byte UTF-8 se ...

html转pdf分页问题终极解决方案 k-htmlpdf

html转pdf分页问题终极解决方案 k-htmlpdf相关推荐

最新文章

热门文章