let
w
= em.
off
setWidth
let
h
= em.
off
setHeight
let
c
= document.creatElement(
'canvas'
)
//图片放大两倍再导出，导出的图片更加清新，缺点导出过大页面会卡死-->
let
opts
= {
scale:2,
canvas:c,
width:w,
height:h,
useCORS:ture,
logging:true
c.width
= w *
2
c.height
= h *
2
c.getContext('2d')
//图片放大两倍再导出，导出的图片更加清新，缺点导出过大页面会卡死--<
html2canvas(em, opts).then(function(canvas) {
var
contentWidth
= canvas.width
var
contentHeight
= canvas.height
//一页pdf显示html页面生成的canvas高度
var
pageHeight
= contentWidth /
592.28
*
841.89
//未生成pdf的html页面高度
var
leftHeight
= contentHeight
//页面偏移
var
position
=
0
//a4纸的尺寸
[595.28,841.89]
，html页面生成的canvas在pdf中图片的宽高
var
imgWidth
=
595.28
var
imgHeight
=
592.28
/contentWidth * contentHeight
var
pageData
= canvas.toDataURL(
'image/jpeg'
,
1.0
)
var
pdf
= new jsPDF(
''
,
'pt'
,
'a4'
)
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else { // 分页
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight
-
= pageHeight
position
-
=
841.89
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage()
pdf.save('我导出的PDF.pdf')
})
复制代码
问题点
1.导出PDF 导出不全解决办法，
html2canvas前加setTimeout延时200ms
2.左右滚动条部分导出不全解决办法，写一个隐藏页面，设置固定宽度，导出隐藏页面
3.导出偏移导致显示不全解决办法，导出前把要导出的元素全屏展示，导出完成再还原
导出图片
