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

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

已标记关键词 清除标记
05-08 1946
05-06 2173
实付 79.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值