I have following HTML file which has links to JS and CSS to different directory. I was wondering if I can convert this html file into PDF/PNG or image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style>body{background-color:white;}</style>
<script src="1_prisma_files/htmlwidgets-1.5.3/htmlwidgets.js"></script>
<script src="1_prisma_files/viz-1.8.2/viz.js"></script>
<link href="1_prisma_files/DiagrammeR-styles-0.2/styles.css" rel="stylesheet" />
<script src="1_prisma_files/grViz-binding-1.0.6.1/grViz.js"></script>
<title>grViz</title>
</head>
<body>
<div id="htmlwidget_container">
<div id="htmlwidget-b4466e525d8315b0e078" style="width:960px;height:500px;" class="grViz html-widget"></div>
<script>
HTMLWidgets.addPostRenderHandler(function() {
var theDiv = document.getElementById("node1");
theDiv.innerHTML += "<text text-anchor='middle' style='transform: rotate(-90deg);' x='437' y='19' font-family='Helvetica,sans-Serif' font-size='14.00'>Identification</text>";
var theDiv = document.getElementById("node2");
theDiv.innerHTML += "<text text-anchor='middle' style='transform: rotate(-90deg);' x='255' y='19' font-family='Helvetica,sans-Serif' font-size='14.00'>Screening</text>";
var theDiv = document.getElementById("node3");
theDiv.innerHTML += "<text text-anchor='middle' style='transform: rotate(-90deg);' x='40' y='19' font-family='Helvetica,sans-Serif' font-size='14.00'>Included</text>";
});
</script>
</div>
<script type="application/json" data-for="htmlwidget-b4466e525d8315b0e078">{"x":{"diagram":"digraph TD {\n \n graph[splines=ortho, layout=neato, tooltip = \"Click the boxes for further information\", outputorder=edgesfirst]\n \n node [shape = box]\n identification [color = LightSteelBlue2, label=\"\", style = \"filled,rounded\", pos=\"-1.4,7!\", width = 0.4, height = 1.5, tooltip = \"NA\"];\n screening [color = LightSteelBlue2, label=\"\", style = \"filled,rounded\", pos=\"-1.4,4.5!\", width = 0.4, height = 2.5, tooltip = \"NA\"];\n included [color = LightSteelBlue2, label=\"\", style = \"filled,rounded\", pos=\"-1.4,1.5!\", width = 0.4, height = 1.1, tooltip = \"NA\"];\n\n \n node [shape = box,\n fontsize = 12,\n fontname = Helvetica,\n color = Goldenrod1]\n 3 [label = \"Identification of new studies via databases\", style = \"rounded,filled\", width = 7.5, height = 0.5, pos=\"3.5,8.25!\", tooltip = \"Blue screening box\"]\n \n node [shape = box,\n fontname = Helvetica,\n color = Black]\n 4 [label = \"Records identified from databases:\n (n = 1,963)\n\", width = 3.5, height = 0.5, height = 0.5, pos=\"1.5,7!\", tooltip = \"Blue included box\"]\n \n node [shape = box,\n fontname = Helvetica,\n color = Black]\n 5 [label = \"Records removed before screening:\nDuplicate records (n = 3)\", width = 3.5, height = 0.5, pos=\"5.5,7!\", tooltip = \"Duplicate records\"]\n \n node [shape = box,\n fontname = Helvetica,\n color = Black]\n 6 [label = \"Records screened\n(n = 17)\", width = 3.5, height = 0.5, height = 0.5, pos=\"1.5,5.5!\", tooltip = \"Records screened \"]\n \n node [shape = box,\n fontname = Helvetica,\n color = Black]\n 7 [label = \"Records excluded\n(n = 5)\", width = 3.5, height = 0.5, pos=\"5.5,5.5!\", tooltip = \"Records excluded \"]\n \n node [shape = box,\n fontname = Helvetica,\n color = Black]\n 8 [label = \"Reports sought for retrieval\n(n = 5)\", width = 3.5, height = 0.5, height = 0.5, pos=\"1.5,4.5!\", tooltip = \"Reports sought for retrieval\"]\n \n node [shape = box,\n fontname = Helvetica,\n color = Black]\n 9 [label = \"Reports not retrieved\n(n = 2)\", width = 3.5, height = 0.5, pos=\"5.5,4.5!\", tooltip = \"Reports not retrieved\"]\n \n node [shape = box,\n fontname = Helvetica,\n color = Black]\n 10 [label = \"Reports assessed for eligibility\n(n = 3)\", width = 3.5, height = 0.5, pos=\"1.5,3.5!\", tooltip = \"NA\"]\n \n node [shape = box,\n fontname = Helvetica,\n color = Black, \n fillcolor = White,\n style = filled]\n 11 [label = \"Reports excluded\n (n = 1)\", width = 3.5, height = 0.5, pos=\"5.5,3.5!\", tooltip = \"NA\"]\n \n node [shape = box,\n fontname = Helvetica,\n color = Black, fillcolor = \"\", style = solid]\n 12 [label = \"New studies included in review\n(n = 2)\n\", width = 3.5, height = 0.5, pos=\"1.5,1.5!\", tooltip = \"NA\"]\n \n \n \n node [shape = square, width = 0, color=White]\n\n \n \n \n \n node [shape = square, width = 0, style=invis]\n C [label = \"\", width = 3.5, height = 0.5, pos=\"5.5,3.5!\", tooltip = \"\"]\n \n subgraph cluster1 {\n edge [style = invis]\n 3->4; 3->5;\n \n edge [color = Black, \n arrowhead = normal, \n arrowtail = none, \n style = filled]\n 4->5;\n 4->6; 6->7;\n 6->8; 8->9;\n 8->10; 10->C;\n 10->12;\n edge [style = invis]\n 5->7;\n 7->9;\n 9->11;\n \n }\n \n \n \n \n\n\n{rank = same; 3} \n {rank = same; 4; 5} \n {rank = same; 6; 7} \n {rank = same; 8; 9} \n {rank = same; 10; 11} \n {rank = same; 12} \n \n }\n ","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-b4466e525d8315b0e078">{"viewer":{"width":450,"height":350,"padding":15,"fill":true},"browser":{"width":960,"height":500,"padding":40,"fill":false}}</script>
</body>
</html>I have tried so many libraires openhtmltopdf , Wkhtmltopdf ,etc but they all either didnt work or generated empty file. I found one R library webshot2, which renders the html internally to chrome browser and take the screenshot. But I am looking for better approach.
