Failure when the CSS files are in a subdirectory
I've been unable to use pagedjs-cli for an html file whose stylesheets are in a subdirectory. My particular case is a Hugo website but I'm joining a more minimal example below.
The html below can be printed to PDF if I remove the line about CSS (the CSS file does exist).
When I keep the line about CSS,
-
pagedjs-cli test.html
keeps hanging indefinitely at "loading". - with
pagedjs-cli test.html -d
, looking at the console, the error message is
/css/test.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/css/test.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/home/maelle/.nvm/versions/node/v13.13.0/lib/node_modules/pagedjs/dist/paged.polyfill.js:30170 Uncaught (in promise) ProgressEvent
preview @ /home/maelle/.nvm/versions/node/v13.13.0/lib/node_modules/pagedjs/dist/paged.polyfill.js:30170
There's most definitely a path problem: do I need to pass arguments differently or is it something that has to be solved on your side?
File tree
├── css
│ └── test.css
└── test.html
HTML
<!DOCTYPE html>
<html dir="ltr" lang="en-GB">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link href="/css/test.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<table>
<tr class="items-header">
<th id="lbl-item-code">Code</th>
<th id="lbl-item-description">Description</th>
<th id="lbl-item-owner">Owner</th>
<th id="lbl-item-vat-percentage" class="text-right">VAT %</th>
<th id="lbl-item-vat" class="text-right">VAT</th>
<th id="lbl-item-price" class="text-right">Price (EUR)</th>
</tr>
<tr class="items-data">
<td id="item-code">ABC123</td>
<td id="item-description">Butter</td>
<td id="item-owner">John Doe</td>
<td id="item-vat-percentage" class="text-right">0%</td>
<td id="item-vat" class="text-right">EUR 0.00</td>
<td id="item-price" class="text-right">EUR 4.55</td>
</tr>
<tr class="items-data">
<td id="item-code2">ABC124</td>
<td id="item-description2">Paper sheets</td>
<td id="item-owner2">Jane Doe</td>
<td id="item-vat-percentage2" class="text-right">0%</td>
<td id="item-vat2" class="text-right">EUR 0.00</td>
<td id="item-price2" class="text-right">EUR 2.00</td>
</tr>
</table>
</header>
</body>
</html>
CSS
@page {
size: A4;
@bottom-left-corner {
margin-left: 6em;
content: "Test footer";
font-size: 7.75pt;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
color: rgb(0, 61, 120);
white-space: pre;
}
}
body {
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
font-size: 12pt;
}
(Yes that's the example from #14, with a different file structure)