嘍,今天是一篇HTML to PDF速食指南。
Java 轉(zhuǎn)換 HTML 到PDF有許多類庫,今天我們介紹一下第三方免費的類庫OpenPDF。
OpenPDF是免費的Java類庫 ,遵從LGPL 和 MPL協(xié)議,所以基本上能夠可以隨意使用。OpenPDF是基于iTEXT的,目前來說也是維護(hù)的比較好的Java操作PDF的開源軟件。
話不多說,且看所需要的依賴,
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.13.1</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-core</artifactId>
<version>1.0.6</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-pdfbox</artifactId>
<version>1.0.6</version>
</dependency>
jsoup可以將html文件轉(zhuǎn)換成輸入流等,也可以遍歷html的DOM節(jié)點,提取元素及樣式等。
本篇示例將以下html文件轉(zhuǎn)換成pdf
<html>
<head>
<style>
.center_div {
border: 1px solid #404e94;
margin-left: auto;
margin-right: auto;
background-color: #f6d0ed;
text-align: left;
padding: 8px;
}
table {
width: 100%;
border: 1px solid black;
}
th, td {
border: 1px solid black;
}
body,html,input{font-family:"msyh";}
</style>
</head>
<body>
<div class="center_div">
<h1>Hello java North!</h1>
<div>
<p>convert html to pdf.</p>
</div>
<div>
<table>
<thead>
<th>ROLE</th>
<th>NAME</th>
<th>TITLE</th>
</thead>
<tbody>
<tr>
<td>MARKSMAN</td>
<td>ASHE</td>
<td>THE FROST ARCHER</td>
</tr>
<tr>
<td>MAGES</td>
<td>ANNIE</td>
<td>THE DARK CHILD</td>
</tr>
<tr>
<td>射手</td>
<td>凱塔琳</td>
<td>皮城女警</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
以上html用瀏覽器打開如下,亂碼是因為中文字體不識別,下面轉(zhuǎn)換的時候會加載對應(yīng)的字體來進(jìn)行轉(zhuǎn)換。
使用Java轉(zhuǎn)換HTML到PDF代碼如下:
public class HtmlToPDFOpenSource {
public static void main(String[] args) throws IOException {
HtmlToPDFOpenSource htmlToPDFOpenSource = new HtmlToPDFOpenSource();
htmlToPDFOpenSource.generatePdfByOpenhtmltopdf();
}
private void generatePdfByOpenhtmltopdf() throws IOException {
File inputHtml = new File("E:\\javaNorth\\java-study-note\\javaOpenSource\\src\\main\\resources\\test.html");
//加載html文件
Document document = Jsoup.parse(inputHtml, "UTF-8");
document.outputSettings().syntax(Document.OutputSettings.Syntax.html);
//引入資源目錄,可以單獨引入css,圖片文件等
String baseUri = FileSystems.getDefault()
.getPath("javaOpenSource\\src\\main\\resources")
.toUri().toString();
try (OutputStream os = new FileOutputStream("javaOpenSource\\src\\main\\resources\\testOpenLeagueoflegends1.pdf")) {
PdfRendererBuilder builder = new PdfRendererBuilder();
builder.withUri("javaOpenSource\\src\\main\\resources\\testOpenLeagueoflegends1.pdf");
builder.toStream(os);
builder.withW3cDocument(new W3CDom().fromJsoup(document), baseUri);
//引入指定字體,注意字體名需要和css樣式中指定的字體名相同
builder.useFont(new File("javaOpenSource\\src\\main\\resources\\fonts\\msyh.ttf"),"msyh",1,BaseRendererBuilder.FontStyle.NORMAL, true);
builder.run();
}
}
}
使用Java代碼轉(zhuǎn)換成PDF如下(示例中使用了微軟雅黑中文字體):
上述html文件中增加如下外部樣式:
<link href="style.css" rel="stylesheet">
并在resources目錄下添加style.css文件,重新生成PDF文件如下。
本片介紹了使用OpenPDF將html文件轉(zhuǎn)換成PDF文件。同時也使用了自定義字體,外部樣式。但是以下幾點需要格外注意。
全部示例在此:https://github.com/javatechnorth/java-study-note/tree/master/javaOpenSource/src/main/java/pdf
文章來源:Java技術(shù)指北
近碰到個需求,需要把當(dāng)前頁面生成 pdf,并下載。弄了幾天,自己整理整理,記錄下來,我覺得應(yīng)該會有人需要 :)
項目源碼地址:https://github.com/linwalker/render-html-to-pdf
我們可以直接在瀏覽器端使用html2canvas,對整個或局部頁面進(jìn)行“截圖”。但這并不是真的截圖,而是通過遍歷頁面DOM結(jié)構(gòu),收集所有元素信息及相應(yīng)樣式,渲染出canvas image。
由于html2canvas只能將它能處理的生成canvas image,因此渲染出來的結(jié)果并不是100%與原來一致。但它不需要服務(wù)器參與,整個圖片都由客戶端瀏覽器生成,使用很方便。
使用
使用的API也很簡潔,下面代碼可以將某個元素渲染成canvas:
html2canvas(element, { onrendered: function(canvas) { // canvas is the final rendered <canvas> element } });
通過onrendered方法,可以將生成的canvas進(jìn)行回調(diào),比如插入到頁面中:
html2canvas(element, { onrendered: function(canvas) { document.body.appendChild(canvas); } });
做個小例子(demo1)代碼如下:
這個例子將頁面body中的元素渲染成canvas,并插入到body中。
jsPDF庫可以用于瀏覽器端生成PDF。
使用方法如下:
// 默認(rèn)a4大小,豎直方向,mm單位的PDF var doc = new jsPDF(); // 添加文本‘Download PDF’ doc.text('Download PDF!', 10, 10); doc.save('a4.pdf');
// 三個參數(shù),第一個方向,第二個尺寸,第三個尺寸格式 var doc = new jsPDF('landscape','pt',[205, 155]) // 將圖片轉(zhuǎn)化為dataUrl var imageData = ‘data:image/png;base64,iVBORw0KGgo...’; //設(shè)置字體大小 doc.setFontSize(20); //10,20這兩參數(shù)控制文字距離左邊,與上邊的距離 doc.text('Stone', 10, 20); // 0, 40, 控制文字距離左邊,與上邊的距離 doc.addImage(imageData, 'PNG', 0, 40, 205, 115); doc.save('a4.pdf')
生成pdf需要把轉(zhuǎn)化的元素添加到j(luò)sPDF實例中,也有添加html的功能,但某些元素?zé)o法生成在pdf中,因此可以使用html2canvas + jsPDF的方式將頁面轉(zhuǎn)成pdf。通過html2canvas將遍歷頁面元素,并渲染生成canvas,然后將canvas圖片格式添加到j(luò)sPDF實例,生成pdf。
單頁
將demo1的例子修改下:
如果頁面內(nèi)容根據(jù)a4比例轉(zhuǎn)化后高度超過a4紙高度呢,生成的pdf會怎么樣?會分頁嗎?
你可以試試,驗證一下自己的想法。
jsPDF提供了一個很有用的API, addPage(),我們可以通過 pdf.addPage(),來添加一頁pdf,然后通過 pdf.addImage(...),將圖片賦予這頁pdf來顯示。
那么我們?nèi)绾未_定哪里分頁?
這個問題好回答,我們可以設(shè)置一個 pageHeight,超過這個高度的內(nèi)容放入下一頁pdf。
來捋一下思路,將html頁面內(nèi)容生成canvas圖片,通過 addImage將第一頁圖片添加到pdf中,超過一頁內(nèi)容,通過 addPage()添加pdf頁數(shù),然后再通過 addImage將下一頁圖片添加到pdf中。
嗯~,很好!巴特,難道沒有發(fā)現(xiàn)問題嗎?
這個方法實現(xiàn)的前提是 — — 我們能根據(jù) pageHeight先將整頁內(nèi)容生成的canvas圖片分割成對應(yīng)的小圖片,然后一個蘿卜一個坑,一頁一頁 addImage進(jìn)去。
What? 想一想我們的canvas是腫么來的,不用拉上去,直接看下面:
html2canvas(document.body, { onrendered:function(canvas) { //it is here we handle the canvas } })
這里的 body就是要生成canvas的元素對象,一個元素生成一個canvas;那么我們需要一頁一頁的canvas,也就是說。。。
你覺得可能嗎? 我覺得不太現(xiàn)實,按這思路要獲取頁面上不同位置的DOM元素,然后通過 htnl2canvas(element,option)來處理,先不說能不能剛好在每個 pageHeight的位置剛好找到一個DOM元素,就算找到了,這樣做累不累。
累的話 :)可以看看下面這種方法。
我提供的思路是我們只生成一個canvas,對就一個,轉(zhuǎn)化元素就是你要轉(zhuǎn)成pdf內(nèi)容的母元素,在這篇demo里就是 body了;其他不變,也是超過一頁內(nèi)容就 addPage,然后 addImage,只不過這里添加的是同一個canvas。
當(dāng)然這樣做只會出現(xiàn)多頁重復(fù)的pdf,那到底怎么實現(xiàn)正確分頁顯示。其實主要利用了jsPDF的兩點:
雖然每一頁pdf上顯示的圖片是相同的,但我們通過調(diào)整圖片的位置,產(chǎn)生了分頁的錯覺。以第二頁為例,將豎直方向上的偏移設(shè)置為 -841.89即一張a4紙的高度,又因為超過a4紙高度范圍的圖片不顯示,所以第二頁顯示了圖片豎直方向上[841.89,1682.78]范圍內(nèi)的內(nèi)容,這就得到了分頁的效果,以此類推。
還是看代碼吧:
修改imgWidth,并且在addImage時x方向參數(shù)設(shè)置你要的邊距,具體代碼如下:
作者:linwalkerhttps://segmentfault.com/a/1190000009211079
.NET的SelectPdf Html到Pdf轉(zhuǎn)換器-社區(qū)版是.NET的SelectPdf庫中提供的功能強(qiáng)大的html到pdf轉(zhuǎn)換器的免費版本。
轉(zhuǎn)換器提供了許多強(qiáng)大的選項(將任何網(wǎng)頁轉(zhuǎn)換為pdf,將任何html字符串轉(zhuǎn)換為pdf,html5 / css3 / javascript支持,頁眉和頁腳支持等),唯一的限制是它最多可以生成pdf文檔。5頁長。
.NET的免費HTML至Pdf轉(zhuǎn)換器–社區(qū)版功能:最多生成5頁pdf文檔,將任何網(wǎng)頁轉(zhuǎn)換為pdf,將任何原始html字符串轉(zhuǎn)換為pdf,設(shè)置pdf頁面設(shè)置(頁面大小,頁面方向,頁面邊距) ,在轉(zhuǎn)換過程中調(diào)整內(nèi)容大小以適合pdf頁面,設(shè)置pdf文檔屬性,設(shè)置pdf查看器首選項,設(shè)置pdf安全性(密碼,權(quán)限),設(shè)置轉(zhuǎn)換延遲和網(wǎng)頁導(dǎo)航超時,自定義頁眉和頁腳,在頁眉中支持html和頁腳,自動和手動分頁符,在每個頁面上重復(fù)html表頭,支持@media類型屏幕和打印,支持內(nèi)部和外部鏈接,基于html元素自動生成書簽,支持HTTP標(biāo)頭,支持HTTP cookie,支持需要身份驗證的網(wǎng)頁,支持代理服務(wù)器,啟用/禁用javascript,修改顏色空間,多線程支持,HTML5 / CSS3支持,Web字體支持等等。
1、nuget 引用
Install-Package Select.HtmlToPdf
2、方法
using SelectPdf;
using System.Collections.Specialized;
using System.IO;
using System.Web;
namespace BQoolCommon.Helpers.File
{
public class WebToPdf
{
public WebToPdf()
{
//SelectPdf.GlobalProperties.LicenseKey = "your-license-key";
}
/// <summary>
/// 將 Html 轉(zhuǎn)成 PDF,並儲存成檔案
/// </summary>
/// <param name="html">html</param>
/// <param name="fileName">絕對路徑</param>
public void SaveToFileByHtml(string html, string fileName)
{
var doc = SetPdfDocument(html);
doc.Save(fileName);
}
/// <summary>
/// 傳入 Url 轉(zhuǎn)成 PDF,並儲存成檔案
/// </summary>
/// <param name="url">url</param>
/// <param name="fileName">絕對路徑</param>
/// <param name="httpCookies">Cookies</param>
public void SaveToFileByUrl(string url, string fileName, NameValueCollection httpCookies)
{
var doc = SetPdfDocument(url, httpCookies);
doc.Save(fileName);
}
/// <summary>
/// 將 Html 轉(zhuǎn)成 PDF,並輸出成 byte[] 格式
/// </summary>
/// <param name="html">html</param>
/// <returns></returns>
public byte[] GetFileByteByHtml(string html)
{
var doc = SetPdfDocument(html);
return doc.Save();
}
/// <summary>
/// 傳入 Url 轉(zhuǎn)成 PDF,並輸出成 byte[] 格式
/// </summary>
/// <param name="url">url</param>
/// <param name="httpCookies">Cookies</param>
/// <returns></returns>
public byte[] GetFileByteByUrl(string url, NameValueCollection httpCookies)
{
var doc = SetPdfDocument(url, httpCookies);
return doc.Save();
}
/// <summary>
/// 將 Html 轉(zhuǎn)成 PDF,並輸出成 Stream 格式
/// </summary>
/// <param name="html">html</param>
/// <returns></returns>
public Stream GetFileStreamByHtml(string html)
{
var doc = SetPdfDocument(html);
var pdfStream = new MemoryStream();
doc.Save(pdfStream);
pdfStream.Position = 0;
return pdfStream;
}
/// <summary>
/// 傳入 Url 轉(zhuǎn)成 PDF,並輸出成 Stream 格式
/// </summary>
/// <param name="html">html</param>
/// <returns></returns>
public Stream GetFileStreamByUrl(string url, NameValueCollection httpCookies)
{
var doc = SetPdfDocument(url, httpCookies);
var pdfStream = new MemoryStream();
doc.Save(pdfStream);
pdfStream.Position = 0;
return pdfStream;
}
private PdfDocument SetPdfDocument(string html)
{
var converter = new HtmlToPdf();
converter.Options.WebPageWidth = 1200;
html = HttpUtility.HtmlDecode(html);
return converter.ConvertHtmlString(html);
}
private PdfDocument SetPdfDocument(string url, NameValueCollection httpCookies)
{
var converter = new HtmlToPdf();
converter.Options.WebPageWidth = 1200;
if (httpCookies != && httpCookies.Count != 0)
{
converter.Options.HttpCookies.Add(httpCookies);
}
return converter.ConvertUrl(url);
}
}
}
3、調(diào)用
/// <summary>
/// 下載pdf
/// </summary>
public void Downpdf(string data)
{
var stream = new BQoolCommon.Helpers.File.WebToPdf().GetFileStreamByHtml(Gethtml(data));
Response.Clear();
//二進(jìn)制流數(shù)據(jù)(如常見的文件下載)
Response.ContentType = "application/octet-stream";
//通知瀏覽器下載文件而不是打開
Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode("Profit and Loss Statement.pdf", System.Text.Encoding.UTF8));
var bytes = StreamToBytes(stream);
Response.BinaryWrite(bytes);
Response.Flush();
stream.Close();
stream.Dispose();
Response.End();
}
那么如何獲取指定頁面的html 呢 傳入對應(yīng)的model 獲得指定動態(tài)的html
private string Gethtml(string data)
{
string str = "";
str = this.ControllerContext.RenderViewToString("ProfitDetails", data);
return str;
}
using BQoolCommon.Helpers.Format;
using Newtonsoft.Json;
using OrdersManager.Models.ViewModel.Report;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace OrdersManager.Web.Infrastructure
{
public static class HelperExtensions
{
public static string RenderViewToString(this ControllerContext context, string viewName, string data)
{
if (string.IsOrEmpty(viewName))
viewName = context.RouteData.GetRequiredString("action");
context.Controller.ViewData.Model = JsonConvert.DeserializeObject<ProfitDetailsmodel>(StringTools.Base64Decode(StringTools.Base64Decode(data)));
using (var sw = new StringWriter())
{
ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(context, viewName);
var viewContext = new ViewContext(context,
viewResult.View,
context.Controller.ViewData,
context.Controller.TempData,
sw);
try
{
viewResult.View.Render(viewContext, sw);
}
catch (Exception ex)
{
throw;
}
return sw.GetStringBuilder().ToString();
}
}
}
}
https://www.nuget.org/packages/Select.HtmlToPdf/
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。