html页面导出pdf截断问题,html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案...

欢迎关注我的公众号

《人生代码》

我有一个大胆的想法，我要一直写到死，那一天我不写了，可能就死了。哈哈。

哈喽，大家好，我是你们的攻城狮，人贱人爱的 Ken，一个永远充满激情的人。

最近接收到一个优化需求：就是对之前的行程文档的图文介绍添加打印生成 pdf 的功能

当然，我们需要依赖 html2canvas 和 jspdf.min.js 这两个库，html2canvas 是用于生成 canvas，jspdf.min.js 是用于生成 pdf 的。

首先我们需要引入 html2canvas, jspdf

import html2canvas from 'html2canvas'

import './jspdf.min.js'

如果有滚动条，先把滚动条置顶

document.body.scrollTop = document.documentElement.scrollTop = 0

if (!selector) {

throw new Error('缺少selector')

}

let el = document.querySelector(selector)

if (!el) {

throw new Error('未找到' + selector + '对应的dom节点')

}

设置背景色为白色，然后转成图片后，获取截断处图片像素点，从截断处往上一行行扫描像素点颜色，碰到这一行颜色都是全白的，代表是