最近在设计企业风险报告的产品，我们就希望可以直接把页面保存为pdf文档，这样方便客户保存和分享。

常规的做法有以下几种：

1. 通过浏览器的打印，另存为pdf

这个方法，自己使用很方便，但是有个局限就是：不是所有的页面都能保存为pdf，尤其是动态的页面。具体怎么操作，可以baidu，很多这样的文章。

2. 装一个chrome 插件

https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg

这个插件可以很方便地截取整个页面或者你想选择的区域

3. 通过pdf库生成页面所有的组件

这个方法需要写很多代码，尤其如果页面有图表的时候，需要花很多的时间去维护和更新。

4. html2canvas

利用html2canvas库，可以很方便地把dom元素保存为base64编码的图片，在后台，利用pdf库把图片转化为pdf
优势：html2canvas可以把后台不容易处理的组件用图片来代替，后台可以专门处理常规的展示，比如表格，文字等等。

最后上代码：
html2canvas 代码
[code]
function exportAsPdf() {
console.log("export as pdf")
let imageBase64 = []
html2Canvas(document.querySelector("#fullPage")).then(canvas => {
let imgData = canvas.toDataURL(‘image/png’)
imageBase64.push(imgData)
}).then(event => {
dispatch({
type: "dashboard/exportAsPdf",
payload: {
name: dashboard.companylaw.name,
imageBase64: imageBase64,
}
})
});
};
[/code]

java生成pdf代码
[java]
private boolean generatePdf(String title, String[] imagesPath, File outputFile) {
try {
PDDocument doc = new PDDocument();
for (int i = 0; i < imagesPath.length; i++) {
String image = imagesPath[i];
File imageFile = new File(image);
if (!imageFile.exists()) {
log.warn("Image file:{} can’t be found", image);
continue;
}

BufferedImage bufferedImage = ImageIO.read(imageFile);
int width = PDF_PADDING * 2 + bufferedImage.getWidth();
int height = PDF_PADDING * 2 + bufferedImage.getHeight();
int imageY = 0;
if (i == 0) {
height += PDF_TITLE_HEIGHT;
imageY += PDF_TITLE_HEIGHT;
}

PDPage page = new PDPage(new PDRectangle(width, height));
PDPageContentStream contents = new PDPageContentStream(doc, page);

if (i == 0) {
InputStream inputStream = getClass().getClassLoader().getResourceAsStream("fonts/simhei.ttf");
PDFont formFont = PDType0Font.load(doc, inputStream);
contents.beginText();
contents.newLineAtOffset(15, height – imageY);
contents.setFont(formFont, 30);
contents.showText(title);
contents.endText();
}
PDImageXObject pdImage = PDImageXObject.createFromFileByContent(imageFile, doc);
contents.drawImage(pdImage, PDF_PADDING, PDF_PADDING);
contents.close();
doc.addPage(page);
}
doc.save(outputFile);
doc.close();
log.info("Generate pdf file:{}", outputFile);
return true;
} catch (Exception e) {
log.error(e.getMessage(), e);
}

return false;
}
[/java]

参考资源
html2canvas