整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

开源easyHtml-导出html表格文件

接上篇文章,导出html文件,我对这部分代码进行优化,提交到github上,为初始版本,后面根据用户需求与讨论,会不断更新优化功能

介绍

  • 功能

导出Html 表格文件,简单易用

  • 地址

https://github.com/CollectBugs/EasyHtml

  • 项目展示



总结

开发此项目的灵感来源于一次项目开发,发现导出html表格文件需求,比较常见,市面上开源、成熟、免费的方案没有,如果每一家公司,都从零开始开发,耗时又费力,导致开发周期变长,不如大家开源共建此项目,让后来人站在巨人的肩膀上进行开发与维护,共享资源,其乐而不为,希望大家多多给与关注与讨论哦!

每天不断更,精彩不停止,明天见,我是行者

记得留个关注、点赞、评论哟,让我们一起去看星辰大海,品味代码人生

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

概述

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

纯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导出需求的小伙伴有所参考和帮助。若存在不足或更好方案,请留言讨论。

数据分析中,将数据以表格的形式呈现出来是必不可少的环节,Pandas 是一个非常强大的数据分析库,提供了很多方便的方法来处理和展示数据。今天,我们将学习如何使用 Pandas 自定义表格样式并将其导出为 HTML 格式。

通过这种方式,我们可以更好地组织和展示数据,并在网页上共享我们的分析结果,并且,掌握Pandas数据存储和表格样式自定义的方式,在日常工作过程中有更多应用和实践意义,将拓展我们的数据分析思路。

导入数据

首先,导入pandas库,并为其设置别名pd,使用pandas的read_excel函数读取指定路径下的Excel文件,并将其内容存储在DataFrame对象df中。

import pandas as pd

df = pd.read_excel(r'C:\Users\shangtianqiang\Desktop\2023年胡润百富榜.xlsx')
#默认显示DataFrame的前五行。
df.head()

df.info()显示DataFrame的简要信息,包括索引、列名、数据类型和每列的非空值数量,这里显示该数据表含有1241行数据。

#数据预览
df.info()

使用iloc方法筛选DataFrame的前100行数据。

df=df.iloc[:100,:]#筛选前100行数据
df

自定义样式

定义一个样式对象style,该对象用于生成HTML的样式,这里对筛选出来的前100行的数据进行了样式设置,它定义了一个居中的标题(h1标签),一个表格(table标签),以及表格中的表头(th标签)和单元格(td标签)。

  • h1 标签:文本居中,字体大小为24像素,下边距为10像素;
  • table 标签:边框合并(border-collapse: collapse;),宽度为100%;
  • th, td 标签:边框为1像素的实线,内边距为8像素,文本居中;
  • th 标签:背景颜色为浅灰色(#f2f2f2)。
# 定义CSS样式,添加标题“2023年胡润百富榜”  
style = """  
<style> 
h1 {  
    text-align: center;  
    font-size: 24px;  
    margin-bottom: 10px;  
}  
table {  
    border-collapse: collapse;  
    width: 100%;  
}  
th, td {  
    border: 1px solid black;  
    padding: 8px;  
    text-align: center;  
}  
th {  
    background-color: #f2f2f2;  
}  
</style>  
<head><title>2023年胡润百富榜</title></head>
<h1>2023年胡润百富榜</h1> 
"""  

将DataFrame转换为HTML代码,并添加样式,index=False来去除行索引 。

# 将DataFrame转换为HTML代码,并添加样式  
html = style + df.to_html(index=False)  # 使用index=False来避免显示行索引 

将生成的HTML内容写入到名为'2023年胡润百富榜.html'的文件中。

# 将HTML代码写入文件或打印到控制台  
with open('2023年胡润百富榜.html', 'w') as file:  
    file.write(html)  # 将HTML代码写入文件output.html

完整版的代码如下所示。

import pandas as pd

df = pd.read_excel(r'C:\Users\shangtianqiang\Desktop\2023年胡润百富榜.xlsx')
df=df.iloc[:100,:]#筛选前100行数据
  
# 定义CSS样式,添加标题“2023年胡润百富榜”  
style = """  
<style> 
h1 {  
    text-align: center;  
    font-size: 24px;  
    margin-bottom: 10px;  
}  
table {  
    border-collapse: collapse;  
    width: 100%;  
}  
th, td {  
    border: 1px solid black;  
    padding: 8px;  
    text-align: center;  
}  
th {  
    background-color: #f2f2f2;  
}  
</style>  
<head><title>2023年胡润百富榜</title></head>
<h1>2023年胡润百富榜</h1> 
"""  
  
# 将DataFrame转换为HTML代码,并添加样式  
html = style + df.to_html(index=False)  # 使用index=False来避免显示行索引  
  
# 将HTML代码写入文件或打印到控制台  
with open('2023年胡润百富榜.html', 'w') as file:  
    file.write(html)  # 将HTML代码写入文件output.html

导出的HTML表格样式如下所示,整体图表风格较为简洁。

导入数据

html的格式数据也是数据存储的一种方式,使用read_html命令可以将其很便捷地导入,从而进行接下来的数据分析。

import pandas as pd

df_html=pd.read_html('2023年胡润百富榜.html',encoding='gbk')[0]
df_html

通过学习如何使用 Pandas 自定义表格样式并将其导出为 HTML 格式,我们掌握了更丰富的数据处理和展示技巧,并且,还可以根据实际业务需求来自定义表格样式,实现与他人共享数据的目的。