如何實現HTML導出PDF

一、如何使用itext將HTML導出為PDF

itext是一個專門用來處理PDF文件的Java庫，它提供了許多實用的工具以及API，可以通過itext中的API把HTML文件轉換為PDF。以下是通過itext實現HTML導出PDF的代碼示例：


String htmlCode = "<html><head></head><body><h1>Hello World!</h1></body></html>";

ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
Document document = new Document();
PdfWriter.getInstance(document, outputStream);
document.open();

HtmlPipelineContext htmlContext = new HtmlPipelineContext(null);
htmlContext.setTagFactory(Tags.getHtmlTagProcessorFactory());

XMLWorkerHelper worker = XMLWorkerHelper.getInstance();
worker.getDefaultCssResolver(true);

XMLWorkerHelper.getInstance().parseXHtml(pdfWriter, document, new StringReader(htmlCode));

document.close();

首先通過itext初始化一個Document對象，然後創建一個PDFWriter實例，並指定將輸出保存到ByteArrayOutputStream中。接著通過HtmlPipelineContext和TagProcessorFactory將HTML標籤進行處理。最後通過XMLWorkerHelper中的parseXHtml方法將HTML轉換為PDF。

二、HTML導出PDF黑屏

在HTML導出PDF時，無法避免地會遇到黑屏的情況。這可能是因為HTML文檔中使用了一些動態或互動式元素，如JavaScript、表單等，這些元素不能被轉換為PDF格式，從而導致黑屏。

為了解決這個問題，我們需要找出哪些元素會導致黑屏的問題，然後將其移除或替換為PDF支持的方式。

三、HTML導出PDF不分頁

HTML文檔通常是通過瀏覽器進行解析和呈現的，瀏覽器會根據window.innerWidth和window.innerHeight設置的大小自動對HTML頁面進行分頁。但是在PDF中，不會按照瀏覽器自動分頁，而需要手動進行處理。

為了解決這個問題，我們可以通過CSS中的分頁屬性設置來手動分頁。以下是一個簡單的代碼示例：


@media print {
    body {
        page-break-after: always;
    }
}

在上述代碼中，我們通過@media print將CSS樣式應用到列印操作。然後將page-break-after設置為always，告訴瀏覽器在每個頁面結束時自動分頁。

四、HTML導出PDF不能用的標籤

在HTML中有些標籤是不能被PDF格式所支持，如iframe、audio、video等，因此在進行HTML導出PDF時，需要將這些標籤進行移除或替換。以下是一個簡單的代碼示例：


HtmlPipelineContext htmlContext = new HtmlPipelineContext(null);
htmlContext.setTagFactory(Tags.getHtmlTagProcessorFactory());
htmlContext.autoBookmark(false);

CssAppliers cssAppliers = new CssAppliersImpl(new XMLWorkerFontProvider());
HtmlPipeline htmlPipeline = new HtmlPipeline(htmlContext, new PdfWriterPipeline(document, writer));
CssResolver cssResolver = XMLWorkerHelper.getInstance().getDefaultCssResolver(true);
cssResolver.setAllowedMediaTypes(CSSResolver.ALL);

Pipeline pipeline = new CssResolverPipeline(cssResolver, htmlPipeline);
XMLWorker worker = new XMLWorker(pipeline, true);

List irrelevantElements = new ArrayList();
irrelevantElements.add(new WritableDirectElement(""));
htmlContext.setAcceptUnknown(false).autoBookmark(false);

String htmlCode = "你的HTML代碼";
InputStream is = new ByteArrayInputStream(htmlCode.getBytes("UTF-8"));
XMLParser p = new XMLParser(true, worker, Charset.forName("UTF-8"));
p.parse(is, Charset.forName("UTF-8"), cssResolver, null, irrelevantElements);

在以上代碼中，我們可以調用setAcceptUnknown方法使XMLWorker忽略未知標記，從而防止一些標記（如iframe, embed等）引起的拋出異常，而將其視為一個未知標記。因為PDF是不支持這些標記的，所以需要手動去除或替換。

五、HTML導出PDF下劃線靠上

在HTML頁面上有一些元素會被加上下劃線，但是在導出PDF時，排版可能會導致下劃線靠上。這是因為在HTML中，下劃線在文字基線（baseline）下方，而在PDF中，下劃線卻在文字的基線之上。

為了解決這個問題，我們可以通過設置CSS樣式中的text-decoration屬性來解決。以下是一個簡單的代碼示例：


p {
    text-decoration: underline;
    text-underline-position: under;
}

在上述代碼中，我們將text-underline-position屬性設置為under，告訴瀏覽器下劃線應該在文字基線的下方。這樣即使在PDF中，下劃線也能正確地呈現。

六、HTML導出PDF加入邊距就錯位了

HTML頁面在添加了邊距後，可能會導致排版錯位，這在導出PDF時也會出現。因為在HTML頁面中，邊界是由瀏覽器處理的，但是在PDF中，邊界由我們手動進行處理。

為了解決這個問題，我們可以通過設置CSS樣式的margin和padding屬性來控制間距。以下是一個簡單的代碼示例：


p {
    margin: 1cm;
    padding: 0.5cm;
}

在上述代碼中，我們將margin和padding屬性設置為1cm和0.5cm，這樣就能夠在PDF中正確地顯示頁面間距。

七、HTML導出PDF畫布內圖片變形

在HTML頁面中，圖片可以使用CSS設置其大小，但是在導出PDF時，有時會出現畫布內的圖片變形的情況。這是因為PDF對於圖片的處理方式不同於HTML。

為了解決這個問題，我們可以對圖片進行手動縮放，並且需要注意圖片的解析度。以下是一個簡單的代碼示例：


Image image = Image.getInstance("圖片路徑");
float width = image.getWidth();
float height = image.getHeight();
float newWidth = 100; 
float newHeight =(newWidth/width)*height; 

image.scaleAbsolute(newWidth, newHeight);
document.add(image);

在上述代碼中，我們通過Image類獲取圖片的寬度和高度，然後計算新的寬度和高度。接著通過scaleAbsolute方法對圖片進行手動縮放，最後將圖片添加到PDF中。

八、HTML導出PDF能使用外部CSS和JS嗎

在HTML頁面中，可以引用外部CSS和JS來設置樣式或者添加交互效果，但是在導出PDF中，外部CSS和JS可能會失效。這是因為PDF並不支持外部CSS和JS。

儘管外部CSS和JS不能直接用於HTML導出PDF，但是我們仍然可以將這些樣式和代碼嵌入到HTML中，或者使用內部樣式和內部腳本來替代。以下是一個簡單的代碼示例：


// 引入外部CSS文件
<link rel="stylesheet" type="text/css" href="style.css">

// 使用內部樣式
<style>
    p {
        color: red;
    }
</style>

// 引入外部JS文件
<script src="script.js"></script>

// 使用內部腳本
<script>
    alert("Hello world");
</script>

在上述代碼中，我們可以將外部CSS文件引入到HTML文件中，或者使用內部樣式來設置樣式。通過同樣的方式，可以將外部JS文件嵌入到HTML中，或者使用內部腳本來替代。這樣就能夠確保HTML導出PDF能夠正確地顯示樣式和交互效果。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/296104.html