ColdFusion の機能強化された PDF 2.0

Adobe ColdFusion(2023 リリース)には、新しい PDF エンジン 2.0 が導入されています。

有効にする方法

ColdFusion Administrator/データとサービス/PDF サービスで、新しいエンジンのオプションがデフォルトで選択されています。

PDF 2.0 について

PDF エンジン 2.0 だけで、任意の HTML を完全な標準 PDF に変換することができます。HTML5、CSS3 および JavaScript をサポートしています。通常は、HTML から PDF へのサーバーサイド変換に使用されます。電子配布用の動的なデータドリブン型ドキュメント(レポート、請求書、フォーム、データシートなど)から、印刷および電子出版用の複雑な高画質 PDF(カタログ、マーケティング資料、技術ドキュメント、ジャーナルなど)までを対象としています。

この新しいエンジンは、デフォルトで、Windows、Linux、Mac および Solaris のすべてのプラットフォームで使用できます。

注意:
  1. 多数の PDF ファイルを変換する場合は、jetty.lax ファイルで –Xmx1024m を使用して、メモリ設定を 1024 MB に増やすことをお勧めします。
  2. web.xml ファイルの変更点 - 最後に言及されている 4 つの設定(下記)は、エンジン 1.0 にのみ適用され、新しいエンジン 2.0 には適用されません。

        maxPDFConversionForService, startScanPort, endScanPort, maxMemoryUsage

HTML5

追加の前処理やクリーンアップを行わずに、HTML5 を PDF ドキュメントに変換できます。このエンジンでは、すべての HTML5 要素をサポートしています。

<cfhtmltopdf destination=&quot;canvas.pdf&quot; overwrite=&quot;yes&quot;>
<!DOCTYPE html>
<html lang=&quot;en&quot;>
<head>
<meta charset=&quot;utf-8&quot;>
<title>Filling Color inside a Rectangle on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById(&quot;myCanvas&quot;);
var context = canvas.getContext(&quot;2d&quot;);
context.rect(50, 50, 200, 100);
context.fillStyle = &quot;#FB8B89&quot;;
context.fill();
context.lineWidth = 5;
context.strokeStyle = &quot;black&quot;;
context.stroke();
};
</script>
</head>
<body>
<canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;200&quot;></canvas>
</body>
</html>
</cfhtmltopdf>
<cfhtmltopdf destination=&quot;canvas.pdf&quot; overwrite=&quot;yes&quot;> <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot;> <title>Filling Color inside a Rectangle on the Canvas</title> <style> canvas { border: 1px solid #000; } </style> <script> window.onload = function() { var canvas = document.getElementById(&quot;myCanvas&quot;); var context = canvas.getContext(&quot;2d&quot;); context.rect(50, 50, 200, 100); context.fillStyle = &quot;#FB8B89&quot;; context.fill(); context.lineWidth = 5; context.strokeStyle = &quot;black&quot;; context.stroke(); }; </script> </head> <body> <canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;200&quot;></canvas> </body> </html> </cfhtmltopdf>
<cfhtmltopdf destination=&quot;canvas.pdf&quot; overwrite=&quot;yes&quot;>
 <!DOCTYPE html>
<html lang=&quot;en&quot;>
<head>
<meta charset=&quot;utf-8&quot;>
<title>Filling Color inside a Rectangle on the Canvas</title>
<style>
canvas {
border: 1px solid #000;  
}
</style>
<script>
  window.onload = function() {
    var canvas = document.getElementById(&quot;myCanvas&quot;);
    var context = canvas.getContext(&quot;2d&quot;);
    context.rect(50, 50, 200, 100); 
    context.fillStyle = &quot;#FB8B89&quot;;
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = &quot;black&quot;;
    context.stroke();
  };
</script>
</head>
<body>
  <canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;200&quot;></canvas>
</body>
</html>
</cfhtmltopdf>

出力

CSS3

計算、メディアクエリ、ボックスシャドウ、テキストシャドウおよびフィルターを使用できます。要素の変形、回転および拡大/縮小を行って、HTML と CSS の組み合わせを PDF に変換できます。このエンジンでは、領域、欄外要素、グリッドおよびフレキシブルボックスレイアウトをサポートしています。

<cfhtmltopdf destination=&quot;CSS3_Flexbox.pdf&quot; overwrite=&quot;yes&quot;>
<!DOCTYPE html>
<html lang=&quot;en&quot;>
<head>
<meta charset=&quot;utf-8&quot;>
<title>Example of Controlling Flow inside Flex Container along Main Axis</title>
<style>
.flex-container {
width: 80%;
min-height: 300px;
margin: 0 auto;
font-size: 32px;
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
border: 1px solid #666;
}
.flex-container div {
padding: 10px;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.item1 {
background: #e84d51;
}
.item2 {
background: #7ed636;
}
.item3 {
background: #2f97ff;
}
</style>
</head>
<body>
<div class=&quot;flex-container&quot;>
<div class=&quot;item1&quot;>Item 1</div>
<div class=&quot;item2&quot;>Item 2</div>
<div class=&quot;item3&quot;>Item 3</div>
</div>
</body>
</html>
</cfhtmltopdf>
<cfhtmltopdf destination=&quot;CSS3_Flexbox.pdf&quot; overwrite=&quot;yes&quot;> <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot;> <title>Example of Controlling Flow inside Flex Container along Main Axis</title> <style> .flex-container { width: 80%; min-height: 300px; margin: 0 auto; font-size: 32px; display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; border: 1px solid #666; } .flex-container div { padding: 10px; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .item1 { background: #e84d51; } .item2 { background: #7ed636; } .item3 { background: #2f97ff; } </style> </head> <body> <div class=&quot;flex-container&quot;> <div class=&quot;item1&quot;>Item 1</div> <div class=&quot;item2&quot;>Item 2</div> <div class=&quot;item3&quot;>Item 3</div> </div> </body> </html> </cfhtmltopdf>
<cfhtmltopdf destination=&quot;CSS3_Flexbox.pdf&quot; overwrite=&quot;yes&quot;> 
<!DOCTYPE html>
<html lang=&quot;en&quot;>
<head>
<meta charset=&quot;utf-8&quot;>
<title>Example of Controlling Flow inside Flex Container along Main Axis</title>
<style>
.flex-container {
    width: 80%;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    display: -webkit-flex;
    -webkit-flex-direction: row-reverse;
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid #666;
}
.flex-container div {
    padding: 10px;
    -webkit-flex: 1; 
    -ms-flex: 1;
    flex: 1; 
}
.item1 {
    background: #e84d51;
}
.item2 {
    background: #7ed636;
}
.item3 {
    background: #2f97ff;
}
</style>
</head>
<body>
<div class=&quot;flex-container&quot;>
<div class=&quot;item1&quot;>Item 1</div>
<div class=&quot;item2&quot;>Item 2</div>
<div class=&quot;item3&quot;>Item 3</div>
</div>

</body>
</html>
</cfhtmltopdf>

出力

JavaScript

JavaScript ベースのレイアウトを PDF に移行できます。さらに、HTML5 Canvas、Highcharts およびその他の JavaScript ライブラリも標準でサポートされています。

<cfhtmltopdf destination=”js.pdf” overwrite=&quot;yes&quot;>
<!DOCTYPE html>
<html>
<head>
<link rel = &quot;stylesheet&quot; href = &quot;http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css&quot; />
<script src = &quot;http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js&quot;></script> </head> <body>
<div id = &quot;map&quot; style = &quot;width: 900px; height: 580px&quot;></div>
<script>
// マップオプションを作成
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
} // マップオブジェクトを作成
var map = new L.map('map', mapOptions); // レイヤーオブジェクトを作成
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'); // レイヤーをマップに追加
map.addLayer(layer);
</script>
</body>
</html>
</cfhtmltopdf>
<cfhtmltopdf destination=”js.pdf” overwrite=&quot;yes&quot;> <!DOCTYPE html> <html> <head> <link rel = &quot;stylesheet&quot; href = &quot;http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css&quot; /> <script src = &quot;http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js&quot;></script> </head> <body> <div id = &quot;map&quot; style = &quot;width: 900px; height: 580px&quot;></div> <script> // マップオプションを作成 var mapOptions = { center: [17.385044, 78.486671], zoom: 10 } // マップオブジェクトを作成 var map = new L.map('map', mapOptions); // レイヤーオブジェクトを作成 var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'); // レイヤーをマップに追加 map.addLayer(layer); </script> </body> </html> </cfhtmltopdf>
<cfhtmltopdf destination=”js.pdf” overwrite=&quot;yes&quot;>
    <!DOCTYPE html>
    <html>
       <head>
        <link rel = &quot;stylesheet&quot; href = &quot;http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css&quot; />
        <script src = &quot;http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js&quot;></script>   </head>   <body>
        <div id = &quot;map&quot; style = &quot;width: 900px; height: 580px&quot;></div>
        <script>
            // マップオプションを作成
            var mapOptions = {
               center: [17.385044, 78.486671],
               zoom: 10
            }        // マップオブジェクトを作成
            var map = new L.map('map', mapOptions);        // レイヤーオブジェクトを作成
            var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');        // レイヤーをマップに追加
            map.addLayer(layer);
         </script>
       </body>
    </html>
    </cfhtmltopdf>

出力

PDF/A への準拠

PDF 2.0 では、PDF/A-1a または PDF/A-3a 準拠のファイルおよびその他の PDF/A サブ形式のファイルの作成をサポートしています。

PDF/A は、ドキュメントの長期的なアーカイブを目的とする一連の ISO 標準規格(「ISO 19005」)です。これらの標準規格の目的は、外観を再現すると共に、ドキュメントの構造を内包できるようにすることです。ドキュメントの表示に必要なすべての情報は、同じ方法で常にファイルに埋め込まれています。外部リソースへの依存は許可されていません。PDF/A-1a および PDF/A-3a では、出力 PDF ドキュメントがタグ付けされる必要もあるので、アクセシビリティの高いドキュメントが提供されます。

PDF 2.0 では、これらの要件にできる限り適合することが保証されます。

サポートされている PDF/A 準拠レベルは、PDF/A-1a、PDF/A-1b、PDF/A-2a、PDF/A-2b、PDF/A-2u、PDF/A-3a、PDF/A-3b および PDF/A-3u です。

準拠は、下記のように、cfhtmltopdf タグに属性として追加することができます。

<cfhtmltopdf source=&quot;input.html&quot; destination=&quot;pdfa3u.pdf&quot; conformance=&quot;PDFA3u&quot; overwrite=&quot;yes&quot;>
</cfhtmltopdf>
<cfhtmltopdf source=&quot;input.html&quot; destination=&quot;pdfa3u.pdf&quot; conformance=&quot;PDFA3u&quot; overwrite=&quot;yes&quot;> </cfhtmltopdf>
<cfhtmltopdf source=&quot;input.html&quot; destination=&quot;pdfa3u.pdf&quot; conformance=&quot;PDFA3u&quot; overwrite=&quot;yes&quot;>
</cfhtmltopdf>

ヘッダーとフッターの機能強化

PDF 2.0 では、ヘッダーとフッターで HTML コンテンツがサポートされています。

これまでは静的テキストのみでしたが、任意の HTML 要素を使用して素晴らしい現代的なヘッダーとフッターを作成できるようになりました。

<cfhtmltopdf>
何らかの HTML コンテンツ
<cfhtmltopdfitem type=&quot;header&quot;>
<html>
<table
width=&quot;100%&quot;
style=&quot;font-size: 12px; font-family: Tahoma, sans-serif&quot; >
<tr>
<td valign=&quot;top&quot; align=&quot;left&quot; width=&quot;50%&quot;>
<img border=&quot;0&quot; height=&quot;88&quot;
src=https://www.google.co.uk/logos/doodles/2022/seasonal-holidays-2022-
6753651837109831.4-law.gif />
</td>
<td valign=&quot;center&quot; align=&quot;left&quot; height=&quot;50%&quot; width=&quot;50%&quot;>
<h1>Header</h1>
</td>
</tr>
</table>
<table
width=&quot;100%&quot;
style=&quot;border-bottom: 1px;
font-size: 10px;
font-family: Tahoma, sans-serif; cellspacing=5&quot; >
<tr>
<td valign=&quot;middle&quot; align=&quot;center&quot; width=&quot;10%&quot;>
<strong>Sl No.
</strong>
</td>
<td valign=&quot;middle&quot; align=&quot;left&quot; width=&quot;36%&quot;>
<strong>Column1</strong>
</td>
<td valign=&quot;middle&quot; align=&quot;right&quot; width=&quot;10%&quot;>
<strong>Column2</strong>
</td>
<td valign=&quot;middle&quot; align=&quot;right&quot; width=&quot;12%&quot;>
<strong>Column3</strong>
</td>
</tr>
</table>
</html>
</cfhtmltopdfitem>
<cfhtmltopdfitem type=&quot;pagebreak&quot;>
</cfhtmltopdfitem>
<cfhtmltopdfitem type=&quot;footer&quot;>
<p>footer</p>
</cfhtmltopdfitem>
</cfhtmltopdf>
<cfhtmltopdf> 何らかの HTML コンテンツ <cfhtmltopdfitem type=&quot;header&quot;> <html> <table width=&quot;100%&quot; style=&quot;font-size: 12px; font-family: Tahoma, sans-serif&quot; > <tr> <td valign=&quot;top&quot; align=&quot;left&quot; width=&quot;50%&quot;> <img border=&quot;0&quot; height=&quot;88&quot; src=https://www.google.co.uk/logos/doodles/2022/seasonal-holidays-2022- 6753651837109831.4-law.gif /> </td> <td valign=&quot;center&quot; align=&quot;left&quot; height=&quot;50%&quot; width=&quot;50%&quot;> <h1>Header</h1> </td> </tr> </table> <table width=&quot;100%&quot; style=&quot;border-bottom: 1px; font-size: 10px; font-family: Tahoma, sans-serif; cellspacing=5&quot; > <tr> <td valign=&quot;middle&quot; align=&quot;center&quot; width=&quot;10%&quot;> <strong>Sl No. </strong> </td> <td valign=&quot;middle&quot; align=&quot;left&quot; width=&quot;36%&quot;> <strong>Column1</strong> </td> <td valign=&quot;middle&quot; align=&quot;right&quot; width=&quot;10%&quot;> <strong>Column2</strong> </td> <td valign=&quot;middle&quot; align=&quot;right&quot; width=&quot;12%&quot;> <strong>Column3</strong> </td> </tr> </table> </html> </cfhtmltopdfitem> <cfhtmltopdfitem type=&quot;pagebreak&quot;> </cfhtmltopdfitem> <cfhtmltopdfitem type=&quot;footer&quot;> <p>footer</p> </cfhtmltopdfitem> </cfhtmltopdf>
<cfhtmltopdf> 
    何らかの HTML コンテンツ
    <cfhtmltopdfitem type=&quot;header&quot;> 
    <html>
        <table 
            width=&quot;100%&quot; 
            style=&quot;font-size: 12px; font-family: Tahoma, sans-serif&quot; > 
            <tr> 
                <td valign=&quot;top&quot; align=&quot;left&quot; width=&quot;50%&quot;> 
                    <img border=&quot;0&quot; height=&quot;88&quot; 
                    src=https://www.google.co.uk/logos/doodles/2022/seasonal-holidays-2022-
    6753651837109831.4-law.gif  /> 
                </td> 
                <td valign=&quot;center&quot; align=&quot;left&quot; height=&quot;50%&quot; width=&quot;50%&quot;> 
                    <h1>Header</h1> 
                </td> 
            </tr> 
        </table> 
        <table 
            width=&quot;100%&quot; 
            style=&quot;border-bottom: 1px; 
                font-size: 10px; 
                font-family: Tahoma, sans-serif; cellspacing=5&quot; >
            <tr> 
                <td valign=&quot;middle&quot; align=&quot;center&quot; width=&quot;10%&quot;> 
                    <strong>Sl No. 
                 
                </strong> 
                </td> 
                <td valign=&quot;middle&quot; align=&quot;left&quot; width=&quot;36%&quot;> 
                    <strong>Column1</strong> 
                </td> 
                <td valign=&quot;middle&quot; align=&quot;right&quot; width=&quot;10%&quot;> 
                    <strong>Column2</strong> 
                </td> 
                <td valign=&quot;middle&quot; align=&quot;right&quot; width=&quot;12%&quot;> 
                    <strong>Column3</strong> 
                </td> 
            </tr> 
        </table> 
    </html>
    </cfhtmltopdfitem> 
    <cfhtmltopdfitem type=&quot;pagebreak&quot;>
    </cfhtmltopdfitem>
    <cfhtmltopdfitem type=&quot;footer&quot;>
    <p>footer</p>
    </cfhtmltopdfitem> 
</cfhtmltopdf>  

出力

ヘルプをすばやく簡単に入手

新規ユーザーの場合