Java使用Puppeteer将网页指定区域转成pdf

友情提示：本文章只提供方法思路，不要复制粘贴后说跑不通

一、需要先安装NodeJs，网上教程很多

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

npm install puppeteer --save

三、在安装puppeteer依赖的目录下创建puppeteer.js

const puppeteer = require('puppeteer');
const options = process.argv;
var address, types;
(async () => {
 if(options.length>=4){
    address=options[2]; //网址
    types=options[3]; //types
    //idclass=options[4]; //页面div中的id
    mobileWidth=Number(options[4]); //网页可见区域宽：采用网页中js的document.body.clientWidth方法获取
    mobileHight=Number(options[5]); //网页可见区域高：采用网页中js的document.body.clientHeight方法获取
    }
  const browser = await puppeteer.launch({
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
    timeout: 60000,
     headless:true
  })
  try {
      const page = await browser.newPage();
      page.setViewport({width: mobileWidth, height: mobileHight});
      await page.goto(address, {waitUntil: 'networkidle2'});
      await page.waitForSelector('.nodeCompleted'); //页面加载完成后才开始导出，需要在前端页面设置一个class
/*	 let clip = await page.evaluate(classId => {
    	let {
    		x,
    		y,
    		width,
    		height
    	} = document.getElementById(classId).getBoundingClientRect();
    	return {
    		x,
    		y,
    		width,
    		height
    	};
      },idclass);*/
//   console.log("mobileWidth="+mobileWidth+",mobileHight="+mobileHight)
//   console.log("mobileWidth="+mobileWidth+",clip.height="+clip.height)
//  await page.waitFor(1000000); //页面加载完成后才开始导出
      const pdf = await page.pdf({
		  width:mobileWidth,
          height:mobileHight+1,//不知道什么原因，前端页面真实长度比document.body.clientHeight方法获取到的长度多1，解释不通，可能不通网页会有不一样，切勿直接复制粘贴，请根据具体情况设置
          printBackground:true,
          margin:{top:0,right:0,bottom:0,left:0},
          scale:1
         
    });
    await browser.close();
    process.stdout.write(pdf);
 

}catch(e){

}finally{
  await browser.close();
}
})().then(function(res){
  
});

四、Java项目中创建PuppeteerHtmlToPdf.class

/**
 *
 * @author zx
 * @date 2020/8/5
 * 用谷歌提供的node实现的Puppeteer，实现网页截图及把网页生成pdf文件采
 */
public class PuppeteerHtmlToPdf {
    /**
     * html转pdf,直接通过流输出到浏览器
     * @param response 浏览器响应
     * @param fileName 文件名称
     * @param puppeteerjs 要采用哪个js文件执行
     * @param webSiteUrl 要生成pdf/图片的网页
     * @param types 类型  pdf代表要生成pdf文件，jpg代表要生成jpg图片
     * @param mobileWidth 需要转化的网页宽度 
     * @param mobileHight 需要转化的网页长度 
     */
    public static void parseHtml2Pdf(HttpServletResponse response, String fileName, String puppeteerjs, String webSiteUrl, String types, String mobileWidth, String mobileHight) {
        try {
            Runtime rt = Runtime.getRuntime();
            //Process p = rt.exec("node C:\\Users\\boshi\\Desktop\\iview-admin-master\\hn.js http://yunfu.ifutest.com/adminAchievement/viewPdfHtml/7e6bba53b5d34124a54c0648a825bcda pdf");
            Process p = rt.exec("node " + puppeteerjs + " " + webSiteUrl + " " + types + " " + mobileWidth + " " + mobileHight);
            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();
        }

    }
}

五、在你需要将网页转成pdf是去调用PuppeteerHtmlToPdf 的parseHtml2Pdf方法即可

六、注意：需要等页面加载完才去转pdf,需要在页面设置一个标志用于判断页面是否加载完成（这里前端使用的是vue的语法，页面加载完会把addNameFlags置为true,只有为true才设置class属性nodeCompleted，传统的可以在onload函数中给标签绑定class属性）