CSS and JS files are not loaded

Question

CSS and JS files are not loaded

VahidN opened this issue a year ago · comments

I'm trying to take an snapshot of this url https://microsoft.github.io/rust-for-dotnet-devs/latest/introduction.html by using the following code which uses V3.0.0 of ChromiumHtmlToPdf:

using (var converter = new Converter())
{
    converter.LogNetworkTraffic = true;
    converter.DoNotDeleteTempDirectory = true;

    converter.ConvertToImage(
     new ConvertUri("https://microsoft.github.io/rust-for-dotnet-devs/latest/introduction.html"),
     "output4.png",
     new PageSettings(PaperFormat.FitPageToContent)
     {
         PrintBackground = true,
     },
     logger: new Console());
}

And it gives me this not fully loaded output:

With this log:

1402-02-31T13:01:20.658 - The paper format 'FitPageToContent' is set, modifying html so that the PDF fits the HTML content
1402-02-31T13:01:20.719 - Opening stream to url 'https://microsoft.github.io/rust-for-dotnet-devs/latest/introduction.html'
1402-02-31T13:01:20.734 - Opened cached stream to url 'https://microsoft.github.io/rust-for-dotnet-devs/latest/introduction.html'
1402-02-31T13:01:21.641 - Writing changed webpage to 'C:\Users\Vahid\AppData\Local\Temp\3a70e3c0-8282-40d1-acde-1695a1b37226\2a18a059-9a68-4a65-9413-dbe7c8481d6c.htm'
1402-02-31T13:01:21.659 - Changed webpage written
1402-02-31T13:01:21.659 - Starting Google Chrome from location 'C:\Program Files\Google\Chrome\Application\chrome.exe' with working directory 'C:\Program Files\Google\Chrome\Application'
1402-02-31T13:01:21.659 - "C:\Program Files\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --hide-scrollbars --mute-audio --disable-background-networking --disable-back
ground-timer-throttling --disable-default-apps --disable-extensions --disable-hang-monitor --disable-prompt-on-repost --disable-sync --disable-translate --metrics-recording-only --no-f
irst-run --disable-crash-reporter --remote-debugging-port="0" --window-size="1366,768"
1402-02-31T13:01:21.659 - Google Chrome process started
1402-02-31T13:01:21.876 - Received Chromium error data: 'DevTools listening on ws://127.0.0.1:50341/devtools/browser/b21d173c-a40d-4867-9192-a7a28f9ebc21'
1402-02-31T13:01:21.986 - Connecting to dev protocol on uri 'ws://127.0.0.1:50341/devtools/browser/b21d173c-a40d-4867-9192-a7a28f9ebc21'
1402-02-31T13:01:21.986 - Creating new websocket connection to url 'ws://127.0.0.1:50341/devtools/browser/b21d173c-a40d-4867-9192-a7a28f9ebc21'
1402-02-31T13:01:22.001 - Opening websocket connection with a timeout of 30 seconds
1402-02-31T13:01:22.047 - Websocket opened
1402-02-31T13:01:22.366 - Creating new websocket connection to url 'ws://127.0.0.1:50341/devtools/page/0533B6EC1B173E886957896EACF59FF4'
1402-02-31T13:01:22.373 - Opening websocket connection with a timeout of 30 seconds
1402-02-31T13:01:22.376 - Websocket opened
1402-02-31T13:01:22.380 - Connected to dev protocol
1402-02-31T13:01:22.380 - Google Chrome started
1402-02-31T13:01:22.381 - Loading file C:\Users\Vahid\AppData\Local\Temp\3a70e3c0-8282-40d1-acde-1695a1b37226\2a18a059-9a68-4a65-9413-dbe7c8481d6c.htm
1402-02-31T13:01:22.387 - Enabling network traffic logging
1402-02-31T13:01:22.422 - Enabling caching
1402-02-31T13:01:22.512 - Request sent with request id '811152FCFE3FB2EC19E096E94D59DC09' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/2a18a059-9a68-4a65-9413-dbe7c8481d6c.htm' with method 'GET' and type 'Document'
1402-02-31T13:01:22.529 - Response received for request id '811152FCFE3FB2EC19E096E94D59DC09' and url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/2a18a059-9a68-4a65-9413-dbe7c8481d6c.htm'
1402-02-31T13:01:22.534 - The 'Page.frameNavigated' event has been fired, waiting for the 'Page.lifecycleEvent' with name 'networkIdle'
1402-02-31T13:01:22.538 - Data received for request id '811152FCFE3FB2EC19E096E94D59DC09' with length '17980'
1402-02-31T13:01:22.539 - Request sent with request id '4764.2' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/css/variables.css' with method 'GET' and type 'Stylesheet'
1402-02-31T13:01:22.539 - Request sent with request id '4764.3' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/css/general.css' with method 'GET' and type 'Stylesheet'
1402-02-31T13:01:22.540 - Request sent with request id '4764.4' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/css/chrome.css' with method 'GET' and type 'Stylesheet'
1402-02-31T13:01:22.542 - Request sent with request id '4764.5' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/FontAwesome/css/font-awesome.css' with method 'GET' and type 'Stylesheet'
1402-02-31T13:01:22.543 - Request sent with request id '4764.6' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/fonts/fonts.css' with method 'GET' and type 'Stylesheet'
1402-02-31T13:01:22.544 - Request sent with request id '4764.7' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/highlight.css' with method 'GET' and type 'Stylesheet'
1402-02-31T13:01:22.544 - Request sent with request id '4764.8' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/tomorrow-night.css' with method'GET' and type 'Stylesheet'
1402-02-31T13:01:22.544 - Request sent with request id '4764.9' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/ayu-highlight.css' with method 'GET' and type 'Stylesheet'
1402-02-31T13:01:22.545 - Request sent with request id '4764.10' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/ferris.css' with method 'GET' and type 'Stylesheet'
1402-02-31T13:01:22.545 - Request sent with request id '4764.11' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/elasticlunr.min.js' with method 'GET' and type 'Script'
1402-02-31T13:01:22.546 - Request sent with request id '4764.12' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/mark.min.js' with method 'GET'and type 'Script'
1402-02-31T13:01:22.546 - Request sent with request id '4764.13' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/searcher.js' with method 'GET'and type 'Script'
1402-02-31T13:01:22.546 - Request sent with request id '4764.14' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/clipboard.min.js' with method 'GET' and type 'Script'
1402-02-31T13:01:22.547 - Request sent with request id '4764.15' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/highlight.js' with method 'GET' and type 'Script'
1402-02-31T13:01:22.547 - Request sent with request id '4764.16' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/book.js' with method 'GET' and type 'Script'
1402-02-31T13:01:22.548 - Request sent with request id '4764.17' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/ferris.js' with method 'GET' and type 'Script'
1402-02-31T13:01:22.555 - Loading finished for request id '811152FCFE3FB2EC19E096E94D59DC09' with encoded data length '17980'
1402-02-31T13:01:22.561 - Request sent with request id '4764.21' for url 'file:///C:/Users/Vahid/AppData/Local/Temp/3a70e3c0-8282-40d1-acde-1695a1b37226/css/print.css' with method 'GET' and type 'Stylesheet'
1402-02-31T13:01:22.564 - Loading failed for request id '4764.2' and type 'Stylesheet' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.569 - Loading failed for request id '4764.3' and type 'Stylesheet' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.570 - Loading failed for request id '4764.4' and type 'Stylesheet' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.572 - Loading failed for request id '4764.5' and type 'Stylesheet' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.573 - Loading failed for request id '4764.6' and type 'Stylesheet' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.575 - Loading failed for request id '4764.7' and type 'Stylesheet' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.576 - Loading failed for request id '4764.8' and type 'Stylesheet' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.577 - Loading failed for request id '4764.9' and type 'Stylesheet' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.577 - Loading failed for request id '4764.10' and type 'Stylesheet' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.579 - Loading failed for request id '4764.11' and type 'Script' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.588 - Loading failed for request id '4764.12' and type 'Script' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.593 - Loading failed for request id '4764.13' and type 'Script' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.606 - Loading failed for request id '4764.14' and type 'Script' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.607 - Loading failed for request id '4764.15' and type 'Script' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.607 - Loading failed for request id '4764.16' and type 'Script' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.608 - Loading failed for request id '4764.17' and type 'Script' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.608 - Loading failed for request id '4764.21' and type 'Stylesheet' with error 'net::ERR_FILE_NOT_FOUND'
1402-02-31T13:01:22.669 - The 'Page.lifecycleEvent' with param name 'DomContentLoaded' has been fired, the dom content is now loaded and parsed, waiting for stylesheets, images and sub frames to finish loading
1402-02-31T13:01:24.406 - The 'Page.lifecycleEvent' event with name 'networkIdle' has been fired, the page is now fully loaded
1402-02-31T13:01:24.406 - Disabling network traffic logging
1402-02-31T13:01:24.406 - File loaded
1402-02-31T13:01:24.406 - Converting to image
1402-02-31T13:01:24.547 - Converted
1402-02-31T13:01:24.563 - Image written to output file 'output4.png'
1402-02-31T13:01:24.563 - Closing Google Chrome browser gracefully
1402-02-31T13:01:24.563 - Disposing websocket connection to url 'ws://127.0.0.1:50341/devtools/page/0533B6EC1B173E886957896EACF59FF4'
1402-02-31T13:01:24.576 - Closing websocket
1402-02-31T13:01:24.580 - Websocket connection disposed
1402-02-31T13:01:24.580 - Disposing websocket connection to url 'ws://127.0.0.1:50341/devtools/browser/b21d173c-a40d-4867-9192-a7a28f9ebc21'
1402-02-31T13:01:24.578 - An error occurred: 'The remote party closed the WebSocket connection without completing the close handshake.'
1402-02-31T13:01:24.581 - Websocket connection disposed
1402-02-31T13:01:24.642 - Google Chrome closed gracefully

Process finished with exit code 0.

As you can see there are lots of ERR_FILE_NOT_FOUND errors here. Did I miss anything? Should I set other parameters?

Kees · Answer 1 · Mon May 22 2023 00:54:31 GMT+0800 (China Standard Time)

The file probably uses relative paths and just can't find the css files because you did not copy them to your local drive.

Vahid Nasiri · Answer 2 · Mon May 22 2023 03:36:50 GMT+0800 (China Standard Time)

you did not copy them to your local drive

It's not a local copy. It's a normal web page (as I mentioned its URL) and it can be opened properly in Chrome or other browsers. This library is supposed to do these loading, downloading and copying files itself automatically.

GitHubRulesOK · Answer 3 · Mon May 22 2023 06:59:40 GMT+0800 (China Standard Time)

There is something odd in the described behaviour as the print to PDF for that single page should not have triggered the sidebar it should just be one page like this

similar for headless screenshot

The correct 104 pages URL should be https://microsoft.github.io/rust-for-dotnet-devs/latest/print.html

However since I mentioned there is a small scalar discrepancy I only get ALL 103 pages :-)

What I cannot yet understand without looking deeper is that when I adjust size for A4 its still 103 pages when normal save as PDF is 104 or 98

For US it should be 109 as default

And for those reasons Sidebar frame is thus not of any value as page number outlines shift about. hence why was it attempting to print the sidebar ??

Vahid Nasiri · Answer 4 · Thu May 25 2023 16:45:19 GMT+0800 (China Standard Time)

PaperFormat.FitPageToContent downloads and injects some CSS to the page locally. That's why there are lots of ERR_FILE_NOT_FOUND errors here.