javaweb导出excel表格怎么实现(Java后端实现HTML网页报表导出pdf方案)

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

概述

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

纯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页面目录打开命令行,执行指令。

javaweb导出excel表格怎么实现(Java后端实现HTML网页报表导出pdf方案)(1)

运行指令,生成pdf

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

javaweb导出excel表格怎么实现(Java后端实现HTML网页报表导出pdf方案)(2)

javaweb导出excel表格怎么实现(Java后端实现HTML网页报表导出pdf方案)(3)

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

javaweb导出excel表格怎么实现(Java后端实现HTML网页报表导出pdf方案)(4)

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

javaweb导出excel表格怎么实现(Java后端实现HTML网页报表导出pdf方案)(5)

小结

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

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页