问题描述:
最近遇到一个项目，需要做一个PDF预览页，重新排版网页的一些需要的元素，做成一个PDF导出来。使用的是html2canvas + jspdf 两个库组合使用。做法是在root级页面加入一个隐藏的div（记为preview-div）作为预览，preview-div定高，定宽，显示在浏览器可视区域的正中间，当内含元素宽高超过preview-div的大小时，可以滚动并显示内容，preview-div里根据需要添加与A4纸的大小比例一致的div（记为a4-div），在 a4-div里面画上需要的内容。在preview-div外有一个[导出PDF]按钮，点击以后会截取preview-div里面的内容。以上一切都搞定以后，发现预览没有问题，但是准备导出pdf的时候遇到了问题：无论怎么截图，都只截取到当前能看到的preview-div显示出来的内容，宽高和preview-div一样（其实比实际看到部分的还大一点点，这一点点，其实是被滚动条遮挡的内容），百度一番也没有找到解决方案，找到的一些类似问题基本上都是说跨域问题导致的截图不全，无法解决我的问题。最后自己找到了解决办法，所以写下来供大家参考。
办法如下：
当每次点击[导出PDF]按钮时，将preview-div的宽高属性，从固定的像素值改为auto，然后导出即可。当改为这样以后，preview-div就没有滚动条了，会被内容自动撑大，从而显示出全部的内容。达到导出的PDF为所见即所得的效果。
主要代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!--涉及到的网页样式部分--> <style> .center-show{margin-top:2%;height: 85%; display: inline-grid; text-align: center;} .show-scroll{overflow-y: auto;} .pdf-print{height:auto} </style> <!--涉及到的网页html部分--> …… <div id="preview-div" class="center-show show-scroll">……</div> <div> <button id="exportPDF">导出PDF</button> </div> …… <!--涉及到的网页脚本--> <script> …… /* 如果保留滚动条，且高度继续使用预览时的高度，即"center-show"里定义的85%， * 那么截图会就只截取当前窗口高度的85%，不能截取所有的a4-div页面， * 甚至连第一页都无法截取完。 * 删除滚动条并加上"pdf-print" class，可以使preview-div的 * 高度变成被所有a4-div页面所撑开，这样就可以打印出预览中所有的页。 * --------------------------------------------------*/ $("#preview-div").removeClass("show-scroll"); $("#preview-div").addClass("pdf-print"); html2canvas(document.getElementById("preview-div"), {……}); /*导出PDF完成以后，恢复成预览时的样式*/ $("#preview-div").addClass("show-scroll"); $("#preview-div").removeClass("pdf-print"); …… </script> |