Bootstrap

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节点')

}

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

;