将页面内容截图导出为PDF文件，如果有高度过高的表格或图片，尽量不截断而是放在下一页展示。

1.将需要导出的dom，都用一个特殊的类名标注起来，然后用html2Canvas将这些dom一一截图。
（这里并非将整个页面截图，而是多个dom截图再拼接，是为了判断是否截断问题。）
2.之后将得到的图片用JsPDF从上到下依次添加到一个pdf文件中即可。
3.关于截断分页的问题，需要对每一张图片和当前页面剩余高度进行比较，可以分为一下几种情况。
（1）图片高度小于当前页面剩余高度=>正常添加该图片到pdf
（2）图片高度大于当前页剩余高度，而且图片高度小于一个空白页的高度=>翻页，将图片放在最新的一页
（3）图片高度大于空白页高度=>这种情况即便是翻页也无法避免截断，所以正常添加该图片到pdf即可

import html2Canvas from 'html2canvas';
import JsPDF from '../../public/js/jspdf.debug';
 * [获取页面导出的pdf文件]
 * @param   {[Object]}  options  [导出pdf配置项，包括一个title属性设置文件名，以及query属性设置获取元素的条件]
function getPdf(options) {
    var title = options.title || '标题';// 导出文件名，默认为“标题”
    const children = document.getElementsByClassName(options.className || 'pdf-cell');
    let canvas = [];
    let i = 0;
    function toCanvas() {
        if (children.length > 1) {
            html2Canvas(children[i], {
                dpi: 500, // 导出pdf清晰度
                background: '#fff', // 背景设为白色（默认为黑色）
            }).then(res => { // 计算每个dom的高度，方便后面计算分页
                res.imgWidth = 595.28;
                res.imgHeight = 592.28 / res.width * res.height;
                canvas.push(res);
                i++;
                if (canvas.length === children.length) {
                    paging();
                    toPdf();
                } else {
                    toCanvas();
            });
     * [根据dom的高度初步进行分页，会将canvas组装为一个二维数组]
    function paging() {
        const imgArr = [[]];
        let pageH = 0;// 页面的高度
        let allH = 0;// 当前组所有dom的高度和
        let j = 0;
        for (let k = 0; k < canvas.length; k++) { // 涉及到k--的操作，使用for循环方便
            pageH += canvas[k].imgHeight;
            if (pageH > 841.89 && canvas[k].imgHeight < 841.89) { // 当某个页面装不下下一个dom时，则分页
                imgArr[j][0].allH = allH - canvas[k].imgHeight;
                allH = pageH = 0;
                k--;
                j++;
                imgArr.push([]);
            } else {
                if (canvas[k].imgHeight > 841.89) { // 特殊情况：某个dom高度大于了页面高度，特殊处理
                    canvas[k].topH = 841.89 - (pageH - canvas[k].imgHeight);// 该dom顶部距离页面上方的距离
                    pageH = (2 * canvas[k].imgHeight - pageH) % 841.89;
                    canvas[k].pageH = pageH;// 该dom底部距离页面上方的距离
                imgArr[j].push(canvas[k]);
                allH += canvas[k].imgHeight;
            if (k === canvas.length - 1) imgArr[j][0].allH = allH;
        canvas = imgArr;
     * [生成PDF文件]
    function toPdf() {
        const PDF = new JsPDF('', 'pt', 'a4');
        canvas.forEach((page, index) => {
            let allH = page[0].allH;
            let position = 0;// pdf页面偏移
            if (index !== 0 && allH <= 841.89) PDF.addPage();
            page.forEach(img => {
                if (img.imgHeight < 841.89) { // 当某个dom高度小于页面宽度，直接添加图片
                    PDF.addImage(img.toDataURL('image/jpeg', 1.0), 'JPEG', 0, position, img.imgWidth, img.imgHeight);
                    position += img.imgHeight;
                    allH -= img.imgHeight;
                } else { // 当某个dom高度大于页面宽度，则需另行处理
                    while (allH > 0) {
                        PDF.addImage(img.toDataURL('image/jpeg', 1.0), 'JPEG', 0, position, img.imgWidth, img.imgHeight);
                        allH -= img.topH || 841.89;
                        position -= img.topH || 841.89;
                        img.topH = 0;
                        if (allH > 0) PDF.addPage();
                    position = img.pageH;
            });
        });
        PDF.save(title + '.pdf');
    toCanvas();
export default getPdf;
                                    要求按A4纸大小生成pdf，支持分页且内容不被截断使用html2canvas和jspdf插件实现通过html2canvas将HTML页面转换成图片，然后再通过jspdf将图片生成为pdf文件一、添加依赖模块npm install html2canvas --savenpm install jspdf --save二、创建pdf.js全局函数文件// 创建 pdf.js// 引入依赖import V...
                                    文中内容是在 Vue 项目中使用 html2canvas和 jspdf 插件实现将页面的内容生成 PDF，并记录在使用过程中遇到的一些问题和解决方案。文中将会贴出很多参考文章，如果各位有需要，可以前往原文章查阅。
html2canvas + jspdf介绍使用方法分页分割问题html2canvas生成图片只有一半其他参考文章
1、html2canvas
该插件允许我们直接在浏览器上对网页或其部分进行“截图”操作，但是屏幕截图基于 DOM，这一点很关键。这就会导致截图的结果，很可能不是自己想要的。.
                                    jspdf-html2canvas生成多页pdf防截断处理，最近遇到一个下载生成pdf文件的需求，我采用的是jspdf+html2canvas，但转换过程中内容总是会被截断，拿到所有需要预防被截断的元素2.根据页面高度进行判断3.创建div插入进去。
                                    由于项目需要前端导出文档，一开始是准备导出word,后来发现导出word比较麻烦，并且前端基本都是由echarts和dataTable组成的，不好导出，最后改为导出为pdf,采用的是jsPDF和html2canvas
一、先引入html2canvas和jsPD
<script type="text/javascript" src="/resource/plugins/jsPDF/jspdf.debug.js"></script>
<script type="text/
                                    需要将一个背景图+动态获取的文字+微信头像拼接成一张图片，用户可长按保存最终图片，难免就是要将html转换成图片。最初想要自己用canvas画，但是略麻烦，后来发现了html2canvas这个插件，先将html转成canvas，再生成图片。使用起来也很简单：setTimeout(function () {html2canvas($('#img_html')[0]).then(function (c...
                                    来源：xhtmlrenderer 将html转换成pdf，完美css，带图片，手动分页，解决内容断开的问题 - 煮过的花朵 - 博客园
之前用itext7将html导出为pdf，比较方便，代码较少，而且支持base64的图片。但是itext7是收费的，所以换成了xhtmlrenderer。
xhtmlrenderer自动引入依赖包itext2.0.8，而且不能再引入其他版本的itext，因为itext2.0.8是已经被废弃的，里面的很多方法在新版本已经没有了。
itext导出pdf最重要的4个难点：