Spire.pdf for java 在html转pdf时 如何分页 (是否有分页标识)
//设置插件路径
HtmlConverter.setPluginPath(pluginPath);
//字节流 转成pdf的数据在这里
ByteArrayOutputStream buffer = new ByteArrayOutputStream();
//将HTML字符串转换为PDF
HtmlConverter.convert(htmlStr,buffer,true,100000, new Size(1000, 800), new PdfMargins(0), LoadHtmlType.Source_Code);
我想根据html中的内容分页, html中有两个div 想达到一个div一页的效果,
在使用 itext时 page-break-after: always; 可以,满足.
spire.pdf for java 是否有类似标识
// 创建 PdfDocument 对象
PdfDocument document = new PdfDocument();
// 将 HTML 字符串转换为 PDF
HtmlConverter.convertToPdf(htmlStr, document);
// 遍历所有页面
for (int i = 1; i <= document.getPages().getCount(); i++) {
// 获取当前页面
PdfPageBase page = document.getPages().get(i);
// 在当前页面的末尾插入分页符
page.addPageBreak();
}
// 保存 PDF 文档
document.saveToFile("output.pdf");
有疑惑请说，望采纳
Spire.PDF for Java 是一个强大的 PDF 处理工具，支持将 HTML 转换为 PDF 文档。
你可以使用 HtmlConverter.convert 方法来将 HTML 字符串转换为 PDF，但是这个方法没有直接的选项来达到你的需求，即在 HTML 中的两个 div 分别占据一页。
但是，Spire.PDF for Java 提供了另一种方法来实现这个功能：使用 PdfPageBreak 对象。
PdfPageBreak 类提供了一个 breakType 属性，可以用于设置页面断点的类型。你可以使用 PdfPageBreakType.Next_Page 来指定在当前位置新开一页。
例如，你可以使用以下代码来在 HTML 中的第一个 div 之后新开一页：
PdfPageBreak pageBreak = new PdfPageBreak();
pageBreak.breakType = PdfPageBreakType.Next_Page;
document.add(pageBreak);
注意，在使用 PdfPageBreak 对象时，需要将它添加到 PdfDocument 对象中。
这里有添加页面的代码
public void onEndPage(PdfWriter writer, Document document) {
try {
// PDF文档内容
PdfContentByte pdfContent = writer.getDirectContent();
pdfContent.saveState();
pdfContent.beginText();
int footerFontSize = 10 ;
// 解决页码中文无法显示 或者 显示为乱码的问题
// 但是必须引入jar包 itext-asian-5.2.0.jar
BaseFont baseFont = BaseFont.createFont("STSong-Light", "UniGB-UCS2-H", false);
Font fontDetail = new Font(baseFont, footerFontSize, Font.NORMAL);
pdfContent.setFontAndSize(baseFont, footerFontSize);
// 页脚的页码 展示 总页码
String footerNum = String.format("第%d页 共%d页", writer.getPageNumber(), totalPageNums);
Phrase phrase = new Phrase(footerNum, fontDetail);
// 页码的 横轴 坐标 居中
float x = ( document.left() + document.right() ) / 2 ;
// 页码的 纵轴 坐标
float y = document.bottom(-10) ;
// 添加文本内容，进行展示页码
ColumnText.showTextAligned(pdfContent, Element.ALIGN_CENTER, phrase, x, y, 0);
pdfContent.endText();
pdfContent.restoreState();
} catch (Exception e) {
e.printStackTrace();
}
}
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
/*
* 使用说明
* ele:需要导出pdf的容器元素(dom节点 不是id)
* pdfFileName: 导出文件的名字 通过调用outPutPdfFn方法也可传参数改变
* splitClassName: 避免分段截断的类名 当pdf有多页时需要传入此参数 , 避免pdf分页时截断元素 如表格<tr class="itemClass"></tr>
* 调用方式 先 let pdf = new PdfLoader(ele, 'pdf' ,'itemClass');
* 若想改变pdf名称 pdf.outPutPdfFn(fileName); outPutPdfFn方法返回一个promise 可以使用then方法处理pdf生成后的逻辑
* */
class PdfLoader {
constructor(ele, pdfFileName, splitClassName) {
this.ele = ele;
this.pdfFileName = pdfFileName;
this.splitClassName = splitClassName;
this.A4_WIDTH = 595;
this.A4_HEIGHT = 842;
};
async getPDF(resolve) {
let ele = this.ele;
let pdfFileName = this.pdfFileName
let eleW = ele.offsetWidth// 获得该容器的宽
let eleH = ele.scrollHeight// 获得该容器的高
let eleOffsetTop = ele.offsetTop// 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft// 获得该容器到文档最左的距离
let canvas = document.createElement("canvas")
let abs = 0
let win_in = document.documentElement.clientWidth || document.body.clientWidth// 获得当前可视窗口的宽度（不包含滚动条）
let win_out = window.innerWidth// 获得当前窗口的宽度（包含滚动条）
if (win_out > win_in) {
abs = (win_out - win_in) / 2// 获得滚动条宽度的一半
}
canvas.width = eleW * 2// 将画布宽&&高放大两倍
canvas.height = eleH * 2
let context = canvas.getContext("2d")
context.scale(2, 2) // 增强图片清晰度
context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
html2canvas(ele, {
useCORS: true//允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
}).then(async canvas => {
let contentWidth = canvas.width
let contentHeight = canvas.height
//一页pdf显示html页面生成的canvas高度;
let pageHeight = (contentWidth / this.A4_WIDTH) * this.A4_HEIGHT // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致
//未生成pdf的html页面高度
let leftHeight = contentHeight
//页面偏移
let position = 0
//a4纸的尺寸[595,842],单位像素，html页面生成的canvas在pdf中图片的宽高
let imgWidth = this.A4_WIDTH - 10 //-10为了页面有右边距
let imgHeight = (this.A4_WIDTH / contentWidth) * contentHeight
let pageData = canvas.toDataURL("image/jpeg", 1.0)
let pdf = jsPDF("", "pt", "a4");
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
pdf.addImage(pageData, "JPEG", 5, 0, imgWidth, imgHeight)
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
} else {
// 分页
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= this.A4_HEIGHT
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
}
pdf.save(pdfFileName + ".pdf", {returnPromise: true}).then(() => {
//去除添加的空div 防止页面混乱
let doms = document.querySelectorAll('.emptyDiv')
for (let i = 0; i < doms.length; i++) {
doms[i].remove();
}
});
this.ele.style.height = '';
resolve();
})
};
async outPutPdfFn(pdfFileName) {
return new Promise((resolve, reject) => {
this.ele.style.height = 'initial';
pdfFileName ? this.pdfFileName = pdfFileName : null;
let target = this.ele;
let pageHeight = target.scrollWidth / this.A4_WIDTH * this.A4_HEIGHT;
// 获取分割dom，此处为class类名为item的dom
let domList = document.getElementsByClassName(this.splitClassName);
// 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
let pageNum = 1; //pdf页数
let eleBounding = ele.getBoundingClientRect();
for (let i = 0; i < domList.length; i++) {
let node = domList[i];
let bound = node.getBoundingClientRect();
let offset2Ele = bound.top - eleBounding.top
let currentPage = Math.ceil((bound.bottom - eleBounding.top) / pageHeight); //当前元素应该在哪一页
if (pageNum < currentPage) {
pageNum++
let divParent = domList[i].parentNode; // 获取该div的父节点
let newNode = document.createElement('div');
newNode.className = 'emptyDiv';
newNode.style.background = 'white';
newNode.style.height = (pageHeight * (pageNum - 1) - offset2Ele + 30) + 'px'; //+30为了在换下一页时有顶部的边距
newNode.style.width = '100%';
let next = domList[i].nextSibling; // 获取div的下一个兄弟节点
// 判断兄弟节点是否存在
if (next) {
// 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
divParent.insertBefore(newNode, node);
} else {
// 不存在则直接添加到最后,appendChild默认添加到divParent的最后
divParent.appendChild(newNode);
}
}
}
// 异步函数，导出成功后处理交互
this.getPDF(resolve, reject);
})
};
}
export default PdfLoader;
如果你的HTML中包含分页标识如html<div style=“page-break-after:always”></div>，Spire.PDF是可以识别的，如果没有就是根据你设置的page size尺寸来分页