持原创，共同进步！请关注我，后续分享更精彩!

概述

项目中经常有生成图表报告的需求。实现的方式有很多，下面几种方案，各有优缺点。

纯java后端实现：后端JFreeChart等绘制库画好图表，再通过itext库导出为pdf。该方案能实现简单的图表功能，样式、格式调整等可能会花大量时间。适合中小型报表开发项目。

前端绘制图表，后端运行时命令调用wkhtmltopdf生成pdf：后端通过运行时命令调用node js，js使用wkhtmltopdf库动态访问报表url地址，HTML内容渲染完成后生成pdf文件。该方案，使用纯前端js绘制图表，能实现复杂需求。但wkhtmltopdf库对不同浏览器的js存在兼容性问题，导出成pdf文件时存在各种坑，在单页面技术支持还不太成熟。适合丰富报表的pdf导出，但兼容性问题维护成本太高。

前端绘制图表，后端运行时命令调用puppeteer生成pdf：后端通过运行时命令调用node js，js使用puppeteer库动态访问报表url地址，HTML内容渲染完成后生成pdf文件。该方案和wkhtmltopdf方案类似，但兼容性更好。puppeteer是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行。可以在无界面的环境中运行Chrome或通过命令行、程序语言操作 Chrome。理论上Chrome中显示的图表，就能通过该库生成一致的pdf文件内容，不用浪费很多时间在页面样式和兼容性问题上。

本文选择puppeteer方案介绍如何生成一个pdf报表。细心的小伙伴可能注意到了，既然puppeteer是js库，为什么不直接前端导出pdf，干嘛这么麻烦还通过后端绕一圈来实现？

这主要出于需求和用户体验的考虑，有些业务场景需要通过api接口动态生成pdf报表，不需要用户访问界面。如果生成的pdf的报表很大，直接在用户端生成，可能占用大量客户端资源，导致页面崩溃或假死，从而影响使用体验。

实现

1.先安装NodeJs，网上教程很多，本文不再赘述。

2.安装puppeteer依赖，如果npm下载不成功就使用cnpm命令（cnpm需要先安装）

npm install puppeteer --save

3.在安装puppeteer依赖的目录下创建page2pdf.js

const puppeteer = require('puppeteer');
const options = process.argv;
var siteUrl;
//执行 node page2pdf.js https://www.baidu.com

(async() => {
if(options.length>=3){
    siteUrl=options[2];
    //types=options[3];
	//console.log(siteUrl);
}

const browser = await puppeteer.launch();
const page = await browser.newPage();

//console.log(options.length);
//console.log(options[0]);
//console.log(options[1]);
//console.log(options[2]);
//console.log(options[3]);

const userAgent = "Mozilla/5.0 (Linux; Android 8.1.0; MI 8 Build/OPM1.171019.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/62.0.3202.84 Mobile Safari/537.36";
page.setUserAgent(userAgent);

await page.setViewport({ width: 1000, height: 1080 });

//await page.setViewport({ width: 480, height: 800,isMobile: true}); 

//通过css样式可见，动态设置站点加载完成标识。
//page.waitForSelector('img').then(() => console.log('siteUrl with page load success: ' + siteUrl));

await page.goto(siteUrl, {timeout: 10*60000, waitUntil: 'networkidle2'});

/**await page.goto(siteUrl, {timeout: 10*60000, waitUntil: 'networkidle2'})
			.catch(e => {
			  console.log(siteUrl+" is error:"+e);
			  browser.close()
			});*/

const pdf = await page.pdf({
		path: 'page.pdf', //便于测试验证，实际使用时可屏蔽
		format: 'A4'
	});
	
await browser.close();
process.stdout.write(pdf);
})();

page2pdf.js文件引入puppeteer依赖库，通过传入siteUrl参数访问HTML page页面，page.pdf生成文件，再通过process.stdout.write(pdf)返回java后台。

4.创建java PuppeteerHtmlToPdf.java文件

/**
 * 用谷歌提供的node实现的Puppeteer，实现网页生成pdf文件
 */
public class PuppeteerHtmlToPdf {
    /**
     * html转pdf,直接通过流输出到浏览器
     * @param response 浏览器响应
     * @param fileName 文件名称
     * @param puppeteerjs 要采用哪个js文件执行
     * @param webSiteUrl 要生成pdf的网页
     */
    public static void parseHtml2Pdf(HttpServletResponse response, String fileName, String puppeteerjs, String webSiteUrl) {
        try {
            Runtime rt = Runtime.getRuntime();
            Process p = rt.exec("node "+puppeteerjs+" "+webSiteUrl);
            InputStream is = p.getInputStream();
            BufferedInputStream bf=new BufferedInputStream(is);
            byte[] data = IOUtils.toByteArray(bf);
            fileName = URLEncoder.encode(fileName, "UTF-8");
            response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
            response.addHeader("Content-Length", "" + data.length);
            response.setContentType("application/octet-stream;charset=UTF-8");
            OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
            outputStream.write(data);
            outputStream.flush();
            outputStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
}

5.报表生成

page2pdf.js页面目录打开命令行，执行指令。

运行指令，生成pdf

node page2pdf.js https://www.baidu.com

查看对应目录，已动态生成了一个page.pdf文件

打开pdf文件，对应HTML内容已生成。

小结

本文介绍了报表导出pdf的3种方式，通过优缺点分析，详细阐述了puppeteer的实现方式。并通过百度页面的pdf导出做了演示。

希望本文对有类似报表pdf导出需求的小伙伴有所参考和帮助。若存在不足或更好方案，请留言讨论。

CREATE TABLE `zzjh2019v` (
`YXDH` varchar(9) COMMENT '学校代号',
`YXMC` varchar(54) COMMENT '学校名称',
`ZYDH` varchar(2) COMMENT '专业代号',
`ZYMC` varchar(28) COMMENT '专业名称',
`XZ` varchar(3) COMMENT '学制',
`XL` varchar(4) COMMENT '学历',
`JH` varchar(6) COMMENT '招生计划数',
`BZ` varchar(200) COMMENT '备注',
`yxbm` char(2) COMMENT '学校编码',
`sxbm` char(2) COMMENT '市县编码'
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_bin ROW_FORMAT = Compact;

CREATE TABLE `sx` (
`sxbm` char(2) COMMENT '市县编码',
`sxmc` varchar(20) COMMENT '市县名称'
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_bin ROW_FORMAT = Compact;

CREATE DEFINER=`root`@`localhost` PROCEDURE `splitjh`()
BEGIN
declare done INT DEFAULT 0;
declare pyxbm char(2);
declare psxmc varchar(10);
declare pyxmc varchar(50);
declare pjhall int;
declare pjhrows TEXT;
declare yxjh cursor
for
select yxbm,yxmc,sum(jh) jhall from zzjh2019v a,sx b where a.sxbm=b.sxbm group by yxbm,yxmc order by yxbm;
declare CONTINUE HANDLER FOR SQLSTATE '02000' SET done = 1;
open yxjh;
fetch yxjh into pyxbm,pyxmc,pjhall;
while done !=1 do
select group_concat(jhrow separator '') into pjhrows from
(select concat('<tr class="subtitle"><td>',yxdh,'</td><td>',yxmc,'在 <span><font color="red">',b.sxmc,'</font></span> 招生计划如下</td><td>',sum(jh),'</td><td></td><td></td></tr>',group_concat('<tr class="jhrow"><td>',zydh,'</td><td>',zymc,'(',bz,')</td><td>',jh,'</td><td>',xz,'</td><td>',xl,'</td></tr>' order by zydh separator '')) jhrow
from zzjh2019v a,sx b where yxbm=pyxbm and a.sxbm=b.sxbm group by yxdh order by yxdh,zydh) jhs;
set @pfilename = concat('''d:/32/1/1/jh11',pyxbm,'.html''');
set @sql =concat('select concat(''<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="zsjh.css" ><title>3+2计划</title></head><body><h3></h3><table><tr class="subtitle"><th>代号</th><th>专业及名称备注</th><th>人数</th><th>学制</th><th>学历</th></tr>'',''',pjhrows,''',''</body></html>'') from dual into outfile ',@pfilename);
prepare execsql from @sql;
execute execsql;
DEALLOCATE PREPARE execsql;
fetch yxjh into pyxbm,pyxmc,pjhall;
end while;
close yxjh;
END;

call splitjh();

declare yxjh cursor
for
select yxbm,yxmc,sum(jh) jhall from zzjh2019v a,sx b where a.sxbm=b.sxbm group by yxbm,yxmc order by yxbm;#游标定义
declare CONTINUE HANDLER FOR SQLSTATE '02000' SET done = 1;#游标循环条件，注意此句一定要定义在游标之后，才起作用
open yxjh;#打开游标
fetch yxjh into pyxbm,pyxmc,pjhall;#将游标行内容赋值给变量。

prepare execsql from @sql;#从一个变量准备一个动态sql，注意execsql不用提前定义
execute execsql;#执行准备好的语句
DEALLOCATE PREPARE execsql;#销毁语句

导出当前HTML页面，可以按照以下步骤操作：

1、打开浏览器：首先，在你的电脑上打开一个支持开发者工具的浏览器（如Chrome、Firefox或Edge）。

2、打开开发者工具：通过按下`F12`键或在浏览器的地址栏输入`chrome://inspect/#devices`（对于Chrome）、`about:debugging`（对于Firefox）或者右键点击页面上的任何元素并选择“检查”（对于所有浏览器），以打开开发者工具。

3、定位到元素面板：在开发者工具的顶部菜单中，找到并点击“Elements”（在Chrome和Edge中）或“Inspector”（在Firefox中），这将打开元素面板，显示当前页面的HTML结构。

4、选择要导出的HTML：在元素面板中，你可以看到页面的HTML代码。你可以通过点击左上角的箭头图标选择页面上的元素，对应的HTML代码将在元素面板中高亮显示。你也可以在元素面板中编辑HTML代码。

5、导出HTML代码：一旦确定要导出的HTML部分，可以使用以下几种方法之一来导出：

在元素面板中，右键点击选择的HTML代码，然后选择“Edit as HTML”或类似选项，这将打开一个新的编辑器窗口，其中包含所选HTML的完整代码。接下来，你可以通过复制这段代码并粘贴到文件中来保存。

使用快捷键`Ctrl+C`或`Cmd+C`来复制选定的HTML代码。

6、保存HTML代码：最后，将复制的HTML代码粘贴到合适的位置，以便将其保存在本地文件系统中。

以上步骤综合了不同开发环境下的开发者工具的使用方式，无论是在Windows、Mac还是Linux操作系统下，都可以根据自己常用的开发工具来进行相应的操作。