html2canvas 与 jspdf 相结合生成 pdf 内容被截断问题

jy2029

于 2021-02-26 15:33:32 发布

阅读量2k

点赞数 3

分类专栏： html2canvas 与 jspdf 相结合生成 pdf 内容被截断文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/jy2029/article/details/114135303

版权

在使用html2canvas和jspdf进行网页内容转PDF时，遇到滚动条导致内容截断的挑战。为解决此问题，可以先将滚动条置顶，确保捕获完整页面。通过设置背景色为白色，利用html2canvas生成图片后，分析截断点，并从该点开始将剩余内容分页插入PDF。具体实现包括设置允许污染和跨域，调整图片清晰度，以及处理可能的黑色背景坑。

摘要由CSDN通过智能技术生成

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节点’)
}
设置背景色为白色，然后转成图片后，获取截断处图片像素点，从截断处往上一行行扫描像素点颜色，碰到这一行颜色都是全白的，代表是从这里开始截断，将这个高度开始将往下的内容都放到下一页

html2canvas(el, {
allowTaint: true,
useCORS: true,
dpi: 120, // 图片清晰度问题
background: ‘#FFFFFF’, //如果指定的div没有设置背景色会默认成黑色,这里是个坑
}).then(canvas => {
//未生成pdf的html页面高度
var leftHeight = canvas.height

var a4Width = 595.28
var a4Height = 841.89 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
//一页pdf显示html页面生成的canvas高度;
var a4HeightRef = Math.fl

最低0.47元/天解锁文章