整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本文中，我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式復(fù)雜的 React 頁面生成 PDF 文檔。
背景：幾個(gè)月前，一個(gè)客戶要求我們開發(fā)一個(gè)功能，用戶可以得到 PDF 格式的 React 頁面內(nèi)容。該頁面基本上是患者病例的報(bào)告和數(shù)據(jù)可視化結(jié)果，其中包含許多 SVG。另外還有一些特殊的請(qǐng)求來操縱布局，并對(duì) HTML 元素進(jìn)行一些重新排列。因此與原始的 React 頁面相比，PDF 中應(yīng)該有不同的樣式和額外的內(nèi)容。
由于這個(gè)任務(wù)比用簡(jiǎn)單的 CSS 規(guī)則解決要復(fù)雜得多，所以我們先探討了可能的實(shí)現(xiàn)方法。我們找到了 3 個(gè)主要解決方案。這篇博文將指導(dǎo)你了解它們的可能性并最終實(shí)施。
目錄：
在客戶端還是服務(wù)器端生成？
在客戶端和服務(wù)器端都可以生成PDF文件。但是讓后端處理它可能更有意義，因?yàn)槟悴⒉幌牒谋M用戶瀏覽器可以提供的所有資源。
即便如此，我仍然會(huì)展示這兩種方法的解決方案。
方案1：從 DOM 制作屏幕截圖
乍一看，這個(gè)解決方案似乎是最簡(jiǎn)單的，事實(shí)證明的確是這樣，但它有其自身的局限性。如果你沒有特殊需求，例如在 PDF 中選擇文本或?qū)ξ谋具M(jìn)行搜索，那么這就是一種簡(jiǎn)單易用的方法。
此方法簡(jiǎn)單明了：從頁面創(chuàng)建屏幕截圖，并把它放到 PDF 文件中。非常直截了當(dāng)。我們可以使用兩個(gè)包來實(shí)現(xiàn)：
開始編碼：
npm install html2canvas jspdf
就這樣！
請(qǐng)注意 html2canvas 的 onclone方法。當(dāng)你在截圖之前需要操縱 DOM（例如隱藏打印按鈕）時(shí)，它是非常方便的。我看到過很多使用這個(gè)包的項(xiàng)目。但不幸的是，這不是我們想要的，因?yàn)槲覀冃枰诤蠖送瓿蓪?duì) PDF 的創(chuàng)建工作。
方案2：只使用 PDF 庫
NPM上有幾個(gè)庫，如 jsPDF（如上所述）或PDFKit。他們的問題是，如果我想使用這些庫，我將不得不重新調(diào)整頁面結(jié)構(gòu)。這肯定會(huì)損害可維護(hù)性，因?yàn)槲倚枰獙⑺泻罄m(xù)更改應(yīng)用到 PDF 模板和 React 頁面中。
請(qǐng)看下面的代碼。你需要親自手動(dòng)創(chuàng)建 PDF 文檔。你需要遍歷 DOM 并找出每個(gè)元素并將其轉(zhuǎn)換為 PDF 格式，這是一項(xiàng)繁瑣的工作。必須找到一個(gè)更簡(jiǎn)單的方法。
這段代碼段來自 PDFKit 文檔。但是如果你的目標(biāo)是直接生成一個(gè) PDF 文件，而不是對(duì)一個(gè)已經(jīng)存在的（并且不斷變化的）HTML 頁面進(jìn)行轉(zhuǎn)換，它還是很有用的。
最終方案3：基于 Node.js 的 Puppeteer 和 Headless Chrome
什么是 Puppeteer？其文檔中寫道：
Puppeteer 是一個(gè) Node 庫，它提供了一個(gè)高級(jí) API 來控制 DevTools 協(xié)議上的 Chrome 或 Chromium。 Puppeteer 默認(rèn)以 headless 模式運(yùn)行 Chrome 或 Chromium，但其也可以被配置為完整的（non-headless）模式運(yùn)行。
它本質(zhì)上是一個(gè)可以從 Node.js 運(yùn)行的瀏覽器。如果你讀過它的文檔，其中首先提到的就是你可以用 Puppeteer 來生成頁面的截圖和PDF。優(yōu)秀！這正是我們想要的。
先用 npmi i puppeteer 安裝 Puppeteer，并實(shí)現(xiàn)我們的功能。
這是一個(gè)簡(jiǎn)單的功能，可導(dǎo)航到 URL 并生成站點(diǎn)的 PD F文件。
首先，我們啟動(dòng)瀏覽器（僅在 headless 模式下支持 PDF 生成），然后打開新頁面，設(shè)置視口，并導(dǎo)航到提供的URL。
設(shè)置 waitUntil:'networkidle0' 選項(xiàng)意味著當(dāng)至少500毫秒沒有網(wǎng)絡(luò)連接時(shí)，Puppeteer 會(huì)認(rèn)為導(dǎo)航已完成。 （可以從 API docs 獲取更多信息。）
之后，我們將 PDF 保存為變量，關(guān)閉瀏覽器并返回 PDF。
注意：page.pdf 方法接收 options 對(duì)象，你可以使用 'path' 選項(xiàng)將文件保存到磁盤。如果未提供路徑，則 PDF 將不會(huì)被保存到磁盤，而是會(huì)得到緩沖區(qū)。（稍后我將討論如何處理它。）
如果需要先登錄才能從受保護(hù)的頁面生成 PDF，首先你要導(dǎo)航到登錄頁面，檢查表單元素的 ID 或名稱，填寫它們，然后提交表單：
要始終將登錄憑據(jù)保存在環(huán)境變量中，不要硬編碼！
樣式控制
Puppeteer 也有這種樣式操作的解決方案。你可以在生成 PDF 之前插入樣式標(biāo)記，Puppeteer 將生成具有已修改樣式的文件。
await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })
將文件發(fā)送到客戶端并保存
好的，現(xiàn)在你已經(jīng)在后端生成了一個(gè) PDF 文件。接下來做什么？
如上所述，如果你不把文件保存到磁盤，將會(huì)得到一個(gè)緩沖區(qū)。你只需要把含有適當(dāng)內(nèi)容類型的緩沖區(qū)發(fā)送到前端即可。
現(xiàn)在，你只需在瀏覽器向服務(wù)器發(fā)送請(qǐng)求即可得到生成的 PDF。
一旦發(fā)送了請(qǐng)求，緩沖區(qū)的內(nèi)容就應(yīng)該開始下載了。最后一步是將緩沖區(qū)數(shù)據(jù)轉(zhuǎn)換為 PDF 文件。
就這樣！如果單擊“保存”按鈕，那么瀏覽器將會(huì)保存 PDF。
在 Docker 中使用 Puppeteer
我認(rèn)為這是實(shí)施中最棘手的部分 —— 所以讓我?guī)湍愎?jié)省幾個(gè)小時(shí)的百度時(shí)間。
官方文檔指出*“在 Docker 中使用 headless Chrome 并使其運(yùn)行起來可能會(huì)非常棘手”*。官方文檔有疑難解答部分，你可以找到有關(guān)用 Docker 安裝 puppeteer 的所有必要信息。
如果你在 Alpine 鏡像上安裝 Puppeteer，請(qǐng)確保在看到頁面的這一部分時(shí)再向下滾動(dòng)一點(diǎn)。否則你可能會(huì)忽略一個(gè)事實(shí)：你無法運(yùn)行最新的 Puppeteer 版本，并且你還需要用一個(gè)標(biāo)記禁用 shm ：
const browser = await puppeteer.launch({
headless: true,
args: ['--disable-dev-shm-usage']
});
否則，Puppeteer 子進(jìn)程可能會(huì)在正常啟動(dòng)之前耗盡內(nèi)存。
方案 3 + 1：CSS 打印規(guī)則
可能有人認(rèn)為從開發(fā)人員的角度來看，簡(jiǎn)單地使用 CSS 打印規(guī)則很容易。沒有 NPM 模塊，只有純 CSS。但是在跨瀏覽器兼容性方面，它的表現(xiàn)如何呢？
在選擇 CSS 打印規(guī)則時(shí)，你必須在每個(gè)瀏覽器中測(cè)試結(jié)果，以確保它提供的布局是相同的，并且它不是100％能做到這一點(diǎn)。
例如，在給定元素后面插入一個(gè) break-after 并不是一個(gè)多么高深的技術(shù)，但是你可能會(huì)驚訝的發(fā)現(xiàn)要在 Firefox 中使用它需要使用變通方法。
除非你是一位經(jīng)驗(yàn)豐富的 CSS 大師，在創(chuàng)建可打印頁面方面有很多的經(jīng)驗(yàn)，否則這可能會(huì)非常耗時(shí)。
如果你可以使打印樣式表保持簡(jiǎn)單，打印規(guī)則是很好用的。
讓我們來看一個(gè)例子吧。
@media print {
.print-button {
display: none;
}
.content div {
break-after: always;
}
}
上面的 CSS 隱藏了打印按鈕，并在每個(gè) div 之后插入一個(gè)分頁符，其中包含content 類。有一篇很棒的文章總結(jié)了你可以用打印規(guī)則做什么，以及它們有什么問題，包括瀏覽器兼容性。
考慮到所有因素，如果你想從不那么復(fù)雜的頁面生成 PDF，CSS打印規(guī)則非常有效。
總結(jié)
讓我們快速回顧前面介紹的方案，以便從 HTML 頁面生成 PDF 文件：
雖然今天是愚人節(jié)，但是以上所有內(nèi)容都是在真的！
作者：瘋狂的技術(shù)宅
鏈接：https://juejin.im/post/5ca1dc0251882543d569e075
Java實(shí)現(xiàn)根據(jù)svg模版動(dòng)態(tài)生成圖片
需要Java語言動(dòng)態(tài)生成圖片
用流程圖簡(jiǎn)單說明下我這邊工作中使用的場(chǎng)景
僅供參考
所以這里就需要生成證書了
我先給大家看下最終實(shí)現(xiàn)的圖片效果
這里要先說明一下
下面說下我是如何解決的
這種方式是不能實(shí)現(xiàn)這個(gè)需求的
這個(gè)的原理就是對(duì)網(wǎng)頁截圖 但只能對(duì)于靜態(tài)頁面截圖 不能根據(jù)不同的參數(shù)值動(dòng)態(tài)生成圖片
所以不提倡使用這種方式
但也介紹下這種使用方式 朋友們根據(jù)自己的實(shí)際需求情況有選擇的使用
這是h5代碼
test文件夾下面的內(nèi)容
安裝一個(gè)docker nginx 將test文件夾加載到nginx容器的/usr/share/nginx/html目錄下面
docker run --name nginx80 -p 8000:80 -v /tmp/test:/usr/share/nginx/html -d docker.io/nginx
訪問的頁面效果
這張圖片是截圖生成的圖片 但url中的id值并沒有傳給頁面
在h5代碼中請(qǐng)求后端接口獲取數(shù)據(jù)動(dòng)態(tài)顯示出來也是不可以的
所以這種方式使用局限性很窄
大致原理是 通過http請(qǐng)求該url獲取該url的文件流然后解析h5代碼生成圖片
其實(shí)現(xiàn)原理大致為 讀取svg document h5代碼 將動(dòng)態(tài)參數(shù)map解析到h5代碼中 轉(zhuǎn)換成字節(jié)數(shù)組 生成圖片格式
我本地是mac系統(tǒng)沒有這個(gè)問題 在發(fā)布到測(cè)試環(huán)境linux系統(tǒng)出現(xiàn)了這個(gè)問題
先看下問題的現(xiàn)象
看到了沒 生成的圖片中文全是亂碼
原因是因?yàn)閘inux系統(tǒng)沒有中文字體
既然linux系統(tǒng)沒有中文字體 那么就安裝它嘛 let's 盤它?。。?/p>
brew install fontconfig
fc-list :lang=zh (注意‘：’前的空格)
mac環(huán)境默認(rèn)會(huì)安裝很多中文字體
yum -y install fontconfig
fc-list :lang=zh
果然沒有中文字體
a 先在mac系統(tǒng)中找到字體安裝目錄
/System/Library/Fonts
b 找到宋體對(duì)應(yīng)的文件
c 將該文件上傳到linux指定的目錄下
/usr/share/fonts/chinese
d 賦予文件夾操作權(quán)限
chmod -R 755 /usr/share/fonts/chinese
e 安裝ttmkfdir來搜索目錄中所有的字體信息，并匯總生成fonts.scale文件
yum -y install ttmkfdir
ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir
vi /etc/fonts/fonts.conf
添加
<dir>/usr/share/fonts/chinese</dir>
fc-cache
a 找到j(luò)dk所在的安裝目錄
echo $JAVA_HOME
b 將宋體文件復(fù)制過來
cp /usr/share/fonts/chinese/STHeiti\ Light.ttc /usr/local/software/jdk1.8.0_141/jre/lib/fonts/fallback
fallback代表存放后備語言的文件夾
https://gitee.com/pingfanrenbiji/resource/tree/master/image
注意: 引入的依賴問題
<!--phantomjs -->
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>2.53.1</version>
</dependency>
<dependency>
<groupId>com.github.detro</groupId>
<artifactId>ghostdriver</artifactId>
<version>2.1.0</version>
</dependency>
<!--svg-->
<dependency>
<groupId>com.github.hui.media</groupId>
<artifactId>svg-core</artifactId>
<version>2.5</version>
</dependency>
這些依賴jar包我是上傳到了公司的私服上了
若是朋友們下拉不下來
我提供給大家這些底層jar包的實(shí)現(xiàn)源碼
https://gitee.com/pingfanrenbiji/quick-media
自行上傳到自己的私服即可
天給大家分享一款超全功能的跨瀏覽器平臺(tái)甘特圖表庫DHTMLXGantt。
dhtmlx-gantt DHTMLX公司開源的 JavaScript 甘特圖/橫道圖/條狀圖類庫。用來快速構(gòu)建顯示項(xiàng)目、進(jìn)度，和隨著時(shí)間關(guān)聯(lián)的相關(guān)進(jìn)展情況。
dhtmlx-Gantt 由位于俄羅斯圣彼得堡的DHTMLX公司開發(fā)的甘特圖組件，適用于B/S模式的Web應(yīng)用開發(fā)。被廣泛應(yīng)用于項(xiàng)目管理、建筑、IT軟件、汽車等領(lǐng)域。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>gantt demo</title>
<script src="dhtmlxgantt.js?v=6.0.0"></script>
<link rel="stylesheet" href="dhtmlxgantt.css?v=6.0.0">
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
var taskList = {
data: [
{
id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
progress: 0.4, open: true
},
{
id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
progress: 0.6, parent: 1
},
{
id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
progress: 0.6, parent: 1
}
],
links: [
{id: 1, source: 1, target: 2, type: "1"},
{id: 2, source: 2, target: 3, type: "0"}
]
};
gantt.config.date_format = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.parse(taskList);
</script>
</body>
</html>為了配置甘特圖所需外觀，dhtmlxGantt提供了2個(gè)對(duì)象 config和templates。
gantt.config //日期，比例，控件等的配置選項(xiàng)。
gantt.templates //格式化甘特圖中使用的日期和標(biāo)簽的模板。gantt.config.scale_unit = "year"; //按年顯示
gantt.config.step = 1.5; //設(shè)置時(shí)間刻度的步長(zhǎng)（X軸）
gantt.config.date_scale = "%Y"; //日期尺度按年
gantt.init("gantt_here");gantt.config.scale_unit = "month"; //按月顯示
gantt.config.date_scale = "%F, %Y"; //設(shè)置時(shí)間刻度的格式（X軸） 多個(gè)尺度
gantt.config.scale_height = 50; //設(shè)置時(shí)間刻度的高度和網(wǎng)格的標(biāo)題
gantt.config.subscales = [
{unit: "day", step: 1, date: "%j, %D"}
]; //指定第二個(gè)時(shí)間刻度
gantt.init("gantt_here");gantt.templates.task_text=function(start,end,task){
return "<b>Text:</b> "+task.text+",<b> Holders:</b> "+task.username;
};
gantt.init("gantt_here");官網(wǎng)提供了豐富的文檔示例。
非常棒的一款開源甘特圖庫，可以讓你預(yù)測(cè)時(shí)間、成本、數(shù)量及質(zhì)量上的關(guān)聯(lián)并回溯結(jié)果。也能幫助你考慮人力、資源、日期、項(xiàng)目中重復(fù)的要素和關(guān)鍵部分，讓你更加直觀的看到任務(wù)進(jìn)展及資源的利用率等。
# 官網(wǎng)地址
https://dhtmlx.com/docs/products/dhtmlxGantt/
# 倉(cāng)庫地址
https://github.com/DHTMLX/gantt好了，今天就介紹到這里。大家如果有其它不錯(cuò)的甘特圖庫，歡迎一起交流討論！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
