Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
接上篇文章,導出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標簽)。
# 定義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 格式,我們掌握了更豐富的數據處理和展示技巧,并且,還可以根據實際業務需求來自定義表格樣式,實現與他人共享數據的目的。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。