VUE html2canvas+jsPdf 下载PDF文件并且以文件流的形式传给后端 + 分页处理截断文字问题
安装:
npm install html2canvas --save
npm install jsPDF --save
配置:
新建:
页面:
解题:获取所有的需要下载的外层盒子,循环处理这些盒子,获取当前盒子距离顶部的高度offsetTop加上盒子的高度是否大于a4纸的高度,如果大于就在之前插入空白盒子,把内容挤下去

dom结构(需要在下载区域的所有外层盒子添加类似于item这样的类名)
<div class="content" id="content"> <div class="item">内容</div> <div class="item">内容</div> <!-- 每一块dom的class类设置成item(自定义)以此处理内容分割 --> <div class="item">内容</div> <div class="item">内容</div> </div>
//避免分页被截断
outPutPdfFn () {
let vm = this;
const A4_WIDTH = 592.28;
const A4_HEIGHT = 841.89;
// $myLoading 自定义等待动画组件,实现导出事件的异步等待交互
vm.$nextTick(() => {
// dom的id。
let target = document.getElementById('upload');
let pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT;
// 获取分割dom,此处为class类名为item的dom
let lableListID = document.getElementsByClassName('item');
// 进行分割操作,当dom内容已超出a4的高度,则将该dom前插入一个空dom,把他挤下去,分割
for (let i = 0; i < lableListID.length; i++) {
let multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight);
if (this.isSplit(lableListID, i, multiple * pageHeight)) {
let divParent = lableListID[i].parentNode; // 获取该div的父节点
let newNode = document.createElement('div');
newNode.className = 'emptyDiv';
newNode.style.background = '#01195e';
let _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight);
newNode.style.height = _H + 30 + 'px';
newNode.style.width = '100%';
let next = lableListID[i].nextSibling; // 获取div的下一个兄弟节点
// 判断兄弟节点是否存在
console.log(next);
if (next) {
// 存在则将新节点插入到div的下一个兄弟节点之前,即div之后
divParent.insertBefore(newNode, next);
} else {
// 不存在则直接添加到最后,appendChild默认添加到divParent的最后
divParent.appendChild(newNode);
}
}
}
this.pdf();
});
},
// 判断是否需要添加空白div
isSplit (nodes, index, pageHeight) {
// 计算当前这块dom是否跨越了a4大小,以此分割
if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) {
return true;
}
return false;
},
pdf() {
// 避免出现浏览器滚动条导致的内容不全处理
document.body.scrollTop = 0;
//div内部滚动导致内容不全处理
document.getElementById("app").style.height = 'auto';
setTimeout(()=>{
html2canvas(document.getElementById("upload"), {
background: '#01195e',
allowTaint : true,
// height: document.getElementById('upload').scrollHeight,
// windowHeight: document.getElementById('upload').scrollHeight
}).then(canvas => {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save("content.pdf");
document.getElementById("app").style.height = '100%';
document.getElementsByClassName("emptyDiv")[0].parentNode.removeChild(document.getElementsByClassName("emptyDiv")[0]);
})
},300)
},
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库