import {PdfDocument, WaitForType, CssMediaType} from "@ironsoftware/ironpdf";
(async () => {
const htmlWithJs = `<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>C3 Bar Chart</title>
</head>
<body>
<div id='chart' style='width: 950px;'></div>
<script src='https://d3js.org/d3.v4.js'></script>
<!-- Load c3.css -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css' rel='stylesheet'>
<!-- Load d3.js and c3.js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js'></script>
<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function() {
return fn.apply(thisp, arguments);
};
};
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
// Set delay
setTimeout(function() {
window.ironpdf.notifyRender();
}, 1000);
</script>
</body>
</html>`;
// Configure rendering options
const options = {
enableJavaScript: true,
waitFor: {
type: WaitForType.JavaScript,
maxWaitTime: 1000, // 1000 milliseconds delay
},
cssMediaType: CssMediaType.Screen,
};
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlWithJs, { renderOptions: options })
await pdf.saveAs("js-chart.pdf");
})();當使用 JavaScript 與 IronPDF 加載圖表時，必須允許足夠的時間讓 JavaScript 執行。在上述代碼中，我們通過enableJavaScript屬性啟用了 JavaScript 執行。
waitFor屬性用於延遲渲染過程並等待 JavaScript 執行。使用WaitForType.JavaScript的這個特定配置，將等待腳本中的window.ironpdf.notifyRender函數被調用，或直到達到最大等待時間。
此外，CSS 媒體選項將確保 HTML 內容的視圖和佈局符合螢幕設置。
30天試用序號 立即。
15天試用金鑰 立即。
在生产环境中测试
30天完整
24/5 技術支援想將 IronPDF 部署到現實專案中免費使用嗎？
您的試用金鑰應該在郵件中。
試用表格已提交
成功地.
如果不是，請聯繫
support@ironsoftware.com
想將 IronPDF 部署到現實專案中免費使用嗎？
您的試用金鑰應該在郵件中。試用表格已提交
成功地.
如果不是，請聯繫
support@ironsoftware.com
想將 IronPDF 部署到現實專案中免費使用嗎？
您的試用金鑰應該在郵件中。試用表格已提交
成功地.
如果不是，請聯繫
support@ironsoftware.com
想將 IronPDF 部署到現實專案中免費使用嗎？
您的試用金鑰應該在郵件中。試用表格已提交
成功地.
如果不是，請聯繫
support@ironsoftware.com
免費開始
不需要信用卡
在生產環境中測試無浮水印。
在任何需要的地方都能運作。
獲得30天完全功能的產品。
幾分鐘內即可啟動並運行。
試用產品期間完全訪問我們的支援工程團隊
免費開始
不需要信用卡
在生產環境中測試無浮水印。
在任何需要的地方都能運作。
獲得30天完全功能的產品。
幾分鐘內即可啟動並運行。
試用產品期間完全訪問我們的支援工程團隊
