html轉為pdf的組件有很多,但是還沒有哪一款能達到這個效果,其只要原因是wkhtmltopdf使用webkit網頁渲染引擎開發的用來將 html轉成 pdf的工具,可以跟多種腳本語言進行集成來轉換文檔。但是就使用簡便性來說還是itext等組件占據優勢,如果你要轉換格式有比較高的要求,那么wkhtmltopdf絕對是不二之選!
下載路徑
官網地址 wkhtmltopdf.org/
github地址 github.com/wkhtmltopdf…
使用方法
java調用demo
public class HtmlToPdfInterceptor extends Thread { private InputStream is; public HtmlToPdfInterceptor(InputStream is){ this.is = is; } public void run(){ try{ InputStreamReader isr = new InputStreamReader(is, "utf-8"); BufferedReader br = new BufferedReader(isr); String line = null; while ((line = br.readLine()) != null) { System.out.println(line.toString()); //輸出內容 } }catch (IOException e){ e.printStackTrace(); } }}public class HtmlToPdf { //wkhtmltopdf在系統中的路徑 private static final String toPdfTool = "D:\wkhtmltopdf\bin\wkhtmltopdf.exe"; /** * html轉pdf * @param srcPath html路徑,可以是硬盤上的路徑,也可以是網絡路徑 * @param destPath pdf保存路徑 * @return 轉換成功返回true */ public static boolean convert(String srcPath, String destPath){ File file = new File(destPath); File parent = file.getParentFile(); //如果pdf保存路徑不存在,則創建路徑 if(!parent.exists()){ parent.mkdirs(); } StringBuilder cmd = new StringBuilder(); cmd.append(toPdfTool); cmd.append(" "); cmd.append(" --header-line");//頁眉下面的線 cmd.append(" --header-center 這里是頁眉這里是頁眉這里是頁眉這里是頁眉 ");//頁眉中間內容 //cmd.append(" --margin-top 30mm ");//設置頁面上邊距 (default 10mm) cmd.append(" --header-spacing 10 ");//(設置頁眉和內容的距離,默認0) cmd.append(srcPath); cmd.append(" "); cmd.append(destPath); boolean result = true; try{ Process proc = Runtime.getRuntime().exec(cmd.toString()); HtmlToPdfInterceptor error = new HtmlToPdfInterceptor(proc.getErrorStream()); HtmlToPdfInterceptor output = new HtmlToPdfInterceptor(proc.getInputStream()); error.start(); output.start(); proc.waitFor(); }catch(Exception e){ result = false; e.printStackTrace(); } return result; } public static void main(String[] args) { HtmlToPdf.convert("https://my.oschina.net/papio/blog/835645", "d:/wkhtmltopdf.pdf"); }}復制代碼
wkhtmltopdf 參數詳解
wkhtmltopdf [OPTIONS]... <input file> [More input files] <output file>常規選項 --allow <path> 允許加載從指定的文件夾中的文件或文件(可重復) --book* 設置一會打印一本書的時候,通常設置的選項 --collate 打印多份副本時整理 --cookie <name> <value> 設置一個額外的cookie(可重復) --cookie-jar <path> 讀取和寫入的Cookie,并在提供的cookie jar文件 --copies <number> 復印打印成pdf文件數(默認為1) --cover* <url> 使用HTML文件作為封面。它會帶頁眉和頁腳的TOC之前插入 --custom-header <name> <value> 設置一個附加的HTTP頭(可重復) --debug-javascript 顯示的javascript調試輸出 --default-header* 添加一個缺省的頭部,與頁面的左邊的名稱,頁面數到右邊,例如: --header-left '[webpage]' --header-right '[page]/[toPage]' --header-line --disable-external-links* 禁止生成鏈接到遠程網頁 --disable-internal-links* 禁止使用本地鏈接 --disable-javascript 禁止讓網頁執行JavaScript --disable-pdf-compression* 禁止在PDF對象使用無損壓縮 --disable-smart-shrinking* 禁止使用WebKit的智能戰略收縮,使像素/ DPI比沒有不變 --disallow-local-file-access 禁止允許轉換的本地文件讀取其他本地文件,除非explecitily允許用 --allow --dpi <dpi> 顯式更改DPI(這對基于X11的系統沒有任何影響) --enable-plugins 啟用已安裝的插件(如Flash --encoding <encoding> 設置默認的文字編碼 --extended-help 顯示更廣泛的幫助,詳細介紹了不常見的命令開關 --forms* 打開HTML表單字段轉換為PDF表單域 --grayscale PDF格式將在灰階產生 --help Display help --htmldoc 輸出程序HTML幫助 --ignore-load-errors 忽略claimes加載過程中已經遇到了一個錯誤頁面 --lowquality 產生低品質的PDF/ PS。有用縮小結果文檔的空間 --manpage 輸出程序手冊頁 --margin-bottom <unitreal> 設置頁面下邊距 (default 10mm) --margin-left <unitreal> 將左邊頁邊距 (default 10mm) --margin-right <unitreal> 設置頁面右邊距 (default 10mm) --margin-top <unitreal> 設置頁面上邊距 (default 10mm) --minimum-font-size <int> 最小字體大小 (default 5) --no-background 不打印背景 --orientation <orientation> 設置方向為橫向或縱向 --page-height <unitreal> 頁面高度 (default unit millimeter) --page-offset* <offset> 設置起始頁碼 (default 1) --page-size <size> 設置紙張大小: A4, Letter, etc. --page-width <unitreal> 頁面寬度 (default unit millimeter) --password <password> HTTP驗證密碼 --post <name> <value> Add an additional post field (repeatable) --post-file <name> <path> Post an aditional file (repeatable) --print-media-type* 使用的打印介質類型,而不是屏幕 --proxy <proxy> 使用代理 --quiet Be less verbose --read-args-from-stdin 讀取標準輸入的命令行參數 --readme 輸出程序自述 --redirect-delay <msec> 等待幾毫秒為JS-重定向(default 200) --replace* <name> <value> 替換名稱,值的頁眉和頁腳(可重復) --stop-slow-scripts 停止運行緩慢的JavaScripts --title <text> 生成的PDF文件的標題(第一個文檔的標題使用,如果沒有指定) --toc* 插入的內容的表中的文件的開頭 --use-xserver* 使用X服務器(一些插件和其他的東西沒有X11可能無法正常工作) --user-style-sheet <url> 指定用戶的樣式表,加載在每一頁中 --username <username> HTTP認證的用戶名 --version 輸出版本信息退出 --zoom <float> 使用這個縮放因子 (default 1) 頁眉和頁腳選項--header-center* <text> (設置在中心位置的頁眉內容) --header-font-name* <name> (default Arial) (設置頁眉的字體名稱)--header-font-size* <size> (設置頁眉的字體大小)--header-html* <url> (添加一個HTML頁眉,后面是網址)--header-left* <text> (左對齊的頁眉文本)--header-line* (顯示一條線在頁眉下)--header-right* <text> (右對齊頁眉文本)--header-spacing* <real> (設置頁眉和內容的距離,默認0)--footer-center* <text> (設置在中心位置的頁腳內容) --footer-font-name* <name> (設置頁腳的字體名稱) --footer-font-size* <size> (設置頁腳的字體大小default 11)--footer-html* <url> (添加一個HTML頁腳,后面是網址)--footer-left* <text> (左對齊的頁腳文本)--footer-line* 顯示一條線在頁腳內容上)--footer-right* <text> (右對齊頁腳文本)--footer-spacing* <real> (設置頁腳和內容的距離)./wkhtmltopdf --footer-right '[page]/[topage]' http://www.baidu.com baidu.pdf./wkhtmltopdf --header-center '報表' --header-line --margin-top 2cm --header-line http://192.168.212.139/oma/ oma.pdf表內容選項中 --toc-depth* <level> Set the depth of the toc (default 3) --toc-disable-back-links* Do not link from section header to toc --toc-disable-links* Do not link from toc to sections --toc-font-name* <name> Set the font used for the toc (default Arial) --toc-header-font-name* <name> The font of the toc header (if unset use --toc-font-name) --toc-header-font-size* <size> The font size of the toc header (default 15) --toc-header-text* <text> The header text of the toc (default Table Of Contents) --toc-l1-font-size* <size> Set the font size on level 1 of the toc (default 12) --toc-l1-indentation* <num> Set indentation on level 1 of the toc (default 0) --toc-l2-font-size* <size> Set the font size on level 2 of the toc (default 10) --toc-l2-indentation* <num> Set indentation on level 2 of the toc (default 20) --toc-l3-font-size* <size> Set the font size on level 3 of the toc (default 8) --toc-l3-indentation* <num> Set indentation on level 3 of the toc (default 40) --toc-l4-font-size* <size> Set the font size on level 4 of the toc (default 6) --toc-l4-indentation* <num> Set indentation on level 4 of the toc (default 60) --toc-l5-font-size* <size> Set the font size on level 5 of the toc (default 4) --toc-l5-indentation* <num> Set indentation on level 5 of the toc (default 80) --toc-l6-font-size* <size> Set the font size on level 6 of the toc (default 2) --toc-l6-indentation* <num> Set indentation on level 6 of the toc (default 100) --toc-l7-font-size* <size> Set the font size on level 7 of the toc (default 0) --toc-l7-indentation* <num> Set indentation on level 7 of the toc (default 120) --toc-no-dots* Do not use dots, in the toc輪廓選項 --dump-outline <file> 轉儲目錄到一個文件 --outline 顯示目錄(文章中h1,h2來定) --outline-depth <level> 設置目錄的深度(默認為4)頁腳和頁眉 * [page] 由當前正在打印的頁的數目代替 * [frompage] 由要打印的第一頁的數量取代 * [topage] 由最后一頁要打印的數量取代 * [webpage] 通過正在打印的頁面的URL替換 * [section] 由當前節的名稱替換 * [subsection] 由當前小節的名稱替換 * [date] 由當前日期系統的本地格式取代 * [time] 由當前時間,系統的本地格式取代
作者:曹元
鏈接:https://juejin.im/post/6856547881873047559
來源:掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
新網址: http://openstd.samr.gov.cn/
法律法規查詢
網址:http://search.chinalaw.gov.cn/search2.html#
除了國家標準、行業標準外,3萬7千余項地方標準也正陸續公開(具體數目在不斷變化)。截至目前面向社會公開地方標準的部分網址,方便大家查詢。初步來看,越是經濟發達的省份,地方標準公開的步伐邁的越大,越是相對落后的地區越封閉。如有錯漏,敬請指正。
1. 北京市地方標準
1657項,可在線查看文本(IE瀏覽器):
http://innerapp.capital-std.com.cn/outerApp/standardSearchAction.do?method=specialSearch
2. 上海市地方標準
776項,可免費下載全文:
http://www.cnsis.org.cn/law/LawQueryServlet
3. 廣東省地方標準
1724項,可在線查看文本(IE瀏覽器):
http://gdstandard.gdqts.gov.cn:8089/gdzj-lsips/modules/details/open.jsp
4. 重慶市地方標準
905項,部分標準可在線瀏覽:
http://113.204.47.237:81/SharePage/bzgkBzjs.htm?code=bzgk
5. 天津市地方標準
745項,可免費下載:
http://60.29.186.229/wenxianpdf/c_gonggao4.asp
6. 山東省地方標準
3221項,可在線閱讀:
http://www.bz100.cn/member/standard/standard!getfreedb.action
7. 江蘇省地方標準
2269項,可在線瀏覽和免費下載:
http://218.94.159.231:8012/zjkms/kms/publish.rkt?type_code=gy
8. 浙江省地方標準
802項,可在線瀏覽和免費下載:
http://db33.sinostd.com/stdlist.aspx
9. 湖北省地方標準
1724項,可在線瀏覽:
http://223.75.53.52:81/finddbSearch
10. 陜西省地方標準
1032項,可在線瀏覽和下載:
http://219.144.196.28/std/db_std.asp
11. 山西省地方標準
1217項地方標準,可下載:
http://bqts.gov.cn/office/show.action?alias=bzhc
12. 河北省地方標準
提高標準的查詢,大部分強制性地方標準可下載,推薦性地方標準只有目錄信息:
http://www.bzsb.info/
13. 河南省地方標準
1591項標準,可下載、可預覽:
http://www.hndb41.com/publish/index.jhtml?q=88&publish.stdno=&publish.name=
14. 湖南地方標準
1909項,可在線瀏覽:
http://db43.hnbzw.com/StdSearch.aspx
15. 江西省地方標準
721項,可在線閱讀和下載:
http://www.jxbz.org.cn/list.aspx?nid=11
16. 安徽省地方標準
2523項,可在線瀏覽和下載:
http://bzxx.ahbz.org.cn/search_list.html?searchtype=2&sclass=3&csname=&egname=&scode=&csdc=&ics=&syear=&eyear=&sdate=&edate=&status=L#
17. 福建省地方標準
1912項,需要登錄才能閱覽:
http://pt.fjbz.org.cn:8060/StandardSearch/StdSearch.aspx
18. 廣西地方標準
1749項,只有目錄、不能閱讀和下載:
http://bs.gxqts.gov.cn:8080/gxwsdt/wsbsdt/PublicSearch/SearchResult.jspx?pageCode=006&pageText=%E5%9C%B0%E6%96%B9%E6%A0%87%E5%87%86%E5%8C%96%E7%AE%A1%E7%90%86%E6%9F%A5%E8%AF%A2
19. 貴州地方標準
1444項(現行有效984項),可在線閱讀和下載:
http://cloud.gzqts.gov.cn/dfbz/index.action
20. 云南省地方標準
943項,可在線閱讀:
http://222.172.223.74:8090/web/guest/index
21. 四川省地方標準
1981項,可在線瀏覽:
http://118.114.77.13/bzwxup/stdsearch.jsp?CnName=&stdNo=&jingque=1&EnName=&TextualName=&orgType=2&Organization=DB51&IcsClass=&CnClass=&StdStatus=1&isForce=0&StdYear=0&nPageSize=10
22. 甘肅省地方標準
2437項,可在線閱讀:
www.gsdfbz.cn
23. 青海地方標準
1613項,只有目錄,不能閱讀和下載:
http://125.72.41.89:8008/home/res/search?keywords=DB&page=
24. 寧夏地方標準
1395項,可以閱讀載:
http://www.nstd.org.cn/
25. 西藏地方標準
115項,可閱覽,可直接下載:
http://www.xzzj.gov.cn/xzzj/bsdt/dfbzfb/list/
26. 黑龍江省地方標準
部分標準提供了文本、可下載:
http://www.hljqts.gov.cn/
27. 吉林省地方標準
1433項標準,可下載文本:
http://221.8.65.189/stdcore/standard/info/findLocalStandard.do
28. 遼寧省地方標準
1438項,只有目錄,沒有在線瀏覽和下載服務:
http://218.60.145.253/ywcx/cx/listAction.do?key=011
29. 海南地方標準
474項,可直接下載:
http://qtsb.hainan.gov.cn/ywdt/dfbz/
30.內蒙地方標準
500余項,可以在線閱讀,訪問時間限制工作日9:00~17:00。
http://www.imisinfo.org.cn/
31.新疆地方標準
1598項,暫時訪問出錯
http://www.xjbz.org.cn/
32. 臺灣地區標準
20740項,可在線瀏覽與付費下載:
http://www.cnsonline.com.tw/
(本文素材來源于網絡)
近碰到個需求,需要把當前頁面生成 pdf,并下載。弄了幾天,自己整理整理,記錄下來,我覺得應該會有人需要 :)
項目源碼地址:https://github.com/linwalker/render-html-to-pdf
我們可以直接在瀏覽器端使用html2canvas,對整個或局部頁面進行“截圖”。但這并不是真的截圖,而是通過遍歷頁面DOM結構,收集所有元素信息及相應樣式,渲染出canvas image。
由于html2canvas只能將它能處理的生成canvas image,因此渲染出來的結果并不是100%與原來一致。但它不需要服務器參與,整個圖片都由客戶端瀏覽器生成,使用很方便。
使用
使用的API也很簡潔,下面代碼可以將某個元素渲染成canvas:
html2canvas(element, { onrendered: function(canvas) { // canvas is the final rendered <canvas> element } });
通過onrendered方法,可以將生成的canvas進行回調,比如插入到頁面中:
html2canvas(element, { onrendered: function(canvas) { document.body.appendChild(canvas); } });
做個小例子(demo1)代碼如下:
這個例子將頁面body中的元素渲染成canvas,并插入到body中。
jsPDF庫可以用于瀏覽器端生成PDF。
使用方法如下:
// 默認a4大小,豎直方向,mm單位的PDF var doc = new jsPDF(); // 添加文本‘Download PDF’ doc.text('Download PDF!', 10, 10); doc.save('a4.pdf');
// 三個參數,第一個方向,第二個尺寸,第三個尺寸格式 var doc = new jsPDF('landscape','pt',[205, 155]) // 將圖片轉化為dataUrl var imageData = ‘data:image/png;base64,iVBORw0KGgo...’; //設置字體大小 doc.setFontSize(20); //10,20這兩參數控制文字距離左邊,與上邊的距離 doc.text('Stone', 10, 20); // 0, 40, 控制文字距離左邊,與上邊的距離 doc.addImage(imageData, 'PNG', 0, 40, 205, 115); doc.save('a4.pdf')
生成pdf需要把轉化的元素添加到jsPDF實例中,也有添加html的功能,但某些元素無法生成在pdf中,因此可以使用html2canvas + jsPDF的方式將頁面轉成pdf。通過html2canvas將遍歷頁面元素,并渲染生成canvas,然后將canvas圖片格式添加到jsPDF實例,生成pdf。
單頁
將demo1的例子修改下:
如果頁面內容根據a4比例轉化后高度超過a4紙高度呢,生成的pdf會怎么樣?會分頁嗎?
你可以試試,驗證一下自己的想法。
jsPDF提供了一個很有用的API, addPage(),我們可以通過 pdf.addPage(),來添加一頁pdf,然后通過 pdf.addImage(...),將圖片賦予這頁pdf來顯示。
那么我們如何確定哪里分頁?
這個問題好回答,我們可以設置一個 pageHeight,超過這個高度的內容放入下一頁pdf。
來捋一下思路,將html頁面內容生成canvas圖片,通過 addImage將第一頁圖片添加到pdf中,超過一頁內容,通過 addPage()添加pdf頁數,然后再通過 addImage將下一頁圖片添加到pdf中。
嗯~,很好!巴特,難道沒有發現問題嗎?
這個方法實現的前提是 — — 我們能根據 pageHeight先將整頁內容生成的canvas圖片分割成對應的小圖片,然后一個蘿卜一個坑,一頁一頁 addImage進去。
What? 想一想我們的canvas是腫么來的,不用拉上去,直接看下面:
html2canvas(document.body, { onrendered:function(canvas) { //it is here we handle the canvas } })
這里的 body就是要生成canvas的元素對象,一個元素生成一個canvas;那么我們需要一頁一頁的canvas,也就是說。。。
你覺得可能嗎? 我覺得不太現實,按這思路要獲取頁面上不同位置的DOM元素,然后通過 htnl2canvas(element,option)來處理,先不說能不能剛好在每個 pageHeight的位置剛好找到一個DOM元素,就算找到了,這樣做累不累。
累的話 :)可以看看下面這種方法。
我提供的思路是我們只生成一個canvas,對就一個,轉化元素就是你要轉成pdf內容的母元素,在這篇demo里就是 body了;其他不變,也是超過一頁內容就 addPage,然后 addImage,只不過這里添加的是同一個canvas。
當然這樣做只會出現多頁重復的pdf,那到底怎么實現正確分頁顯示。其實主要利用了jsPDF的兩點:
雖然每一頁pdf上顯示的圖片是相同的,但我們通過調整圖片的位置,產生了分頁的錯覺。以第二頁為例,將豎直方向上的偏移設置為 -841.89即一張a4紙的高度,又因為超過a4紙高度范圍的圖片不顯示,所以第二頁顯示了圖片豎直方向上[841.89,1682.78]范圍內的內容,這就得到了分頁的效果,以此類推。
還是看代碼吧:
修改imgWidth,并且在addImage時x方向參數設置你要的邊距,具體代碼如下:
作者:linwalkerhttps://segmentfault.com/a/1190000009211079
*請認真填寫需求信息,我們會在24小時內與您取得聯系。