jspdf-html2canvas 自动分页 网页导出pdf 自动根据dom子节点的高度进行分页,避免dom的内容在分页的时候被截断

本文介绍如何利用jspdf与html2canvas库,结合DOM元素高度,实现网页内容在导出为PDF时的自动分页,确保内容不被截断。特别注意,当需要整块计算孙节点高度时,需在其父节点添加.pdf标识,同时处理外部图片的跨域问题。
摘要由CSDN通过智能技术生成

jspdf-html2canvas 网页导出pdf 自动根据dom子节点的高度进行分页,避免dom的内容在分页的时候被截断

说明

  1. 要导出的内容用 .pdf 包裹 ,默认会以.pdf的子节点进行整块的高度计算,如果孙节点需要整块计算,孙节点的父节点上增加.pdf;
  2. 如果导出的内容里面有外部图片引用,需要配置外部图片支持跨域;

直接上代码


import html2PDF from 'jspdf-html2canvas';

// 存储变化前的dom的边距
// 为了自动分页,改变部分dom界面的上边距
const originMarginTop = []
// 按照a4的尺寸,网页宽度1280计算的每页高度为1810.286
// 计算公式是 pageHeight = width*297/210
const pageHeight = 1810.286
//存储pdf根节点距离页面顶部的高度,这个高度会随着后面的计算动态变化,所以需要每次导出时候进行重置
let top = 0

// eslint-disable-next-line no-unused-vars
export function exportPdf(dom, fileName, success) {
   
  // 重置顶部高度
  top = dom.offsetTop
  // 动态计算dom是否跨页,跨页则增加margin-top 将这部分内容挤到下面的页面
  countPosition(dom)
  // 进行导出
  setTimeout((
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值