前端HTML页面转PDF(html2canvas+jspdf)

JavaScript034

前端HTML页面转PDF(html2canvas+jspdf),第1张

utils - htmlToPdf.js

main.js

1、如果在多个页面使用,给函数定义一个参数,参数为要导出页面部分的id。

将 '#pdfDom' 替换为参数即可

2、将导出文件的名称也作为参数传入函数

此种方式也可用于vue,尝试后可行,需要调节部分参数,但毕竟不太合适。

jQuery不需要调节。

https://github.com/zhangshaoliang/downLoadPDF

vue方式

jQuery方式

目前项目使用的是前端加后端方式,前端提供模板,echarts图表的话需要转为base64发送给后台。后台使用iText。目前存在的问题是后台不支持css3语法,只支持到css2,所以复杂的样式页面显示错乱,考虑个别页面使用纯前端实现。

网站导航

2、安装html2Canvas: npm install --save html2canvas

这里使用 iframe 嵌套需要转成pdf的html文件;

如果pdf内容是动态的,可以将html丢给后端,让后端使用freemarker ftl模板语言或是啥其他的模板语言更改即可,然后将整个html作为字符串传给前端,前端再使用iframe 的 srcdoc属性将内容渲染出来。

不存在分页内容裂开的情况,但对样式呈现不太友好,有时会出现内容偏移情况,时好时坏的,经过不断的尝试,发生偏移的时候,可以将html2Canvas的width写死,但是值具体是多少,需要你自己猜

分页会出现问题:比如图片裂开,表格的某一行从中间断开了等等....我用的笨方法手动去调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight,一点点试出来合适的值(应该有更好的方法,但是技术有限)

1. 生成多页pdf,分页内容裂开的问题