{"action":"created","issue":{"url":"https://api.github.com/repos/jsreport/jsreport-chrome-pdf/issues/15","repository_url":"https://api.github.com/repos/jsreport/jsreport-chrome-pdf","labels_url":"https://api.github.com/repos/jsreport/jsreport-chrome-pdf/issues/15/labels{/name}","comments_url":"https://api.github.com/repos/jsreport/jsreport-chrome-pdf/issues/15/comments","events_url":"https://api.github.com/repos/jsreport/jsreport-chrome-pdf/issues/15/events","html_url":"https://github.com/jsreport/jsreport-chrome-pdf/issues/15","id":342346696,"node_id":"MDU6SXNzdWUzNDIzNDY2OTY=","number":15,"title":"Embedded CSS in HTML headers and footer is ignored","user":{"login":"orobert91","id":6403705,"node_id":"MDQ6VXNlcjY0MDM3MDU=","avatar_url":"https://avatars3.githubusercontent.com/u/6403705?v=4","gravatar_id":"","url":"https://api.github.com/users/orobert91","html_url":"https://github.com/orobert91","followers_url":"https://api.github.com/users/orobert91/followers","following_url":"https://api.github.com/users/orobert91/following{/other_user}","gists_url":"https://api.github.com/users/orobert91/gists{/gist_id}","starred_url":"https://api.github.com/users/orobert91/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/orobert91/subscriptions","organizations_url":"https://api.github.com/users/orobert91/orgs","repos_url":"https://api.github.com/users/orobert91/repos","events_url":"https://api.github.com/users/orobert91/events{/privacy}","received_events_url":"https://api.github.com/users/orobert91/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-07-18T14:12:38Z","updated_at":"2018-07-19T14:44:35Z","closed_at":null,"author_association":"NONE","body":"I am trying to switch from PhantomPDF to Chrome in .NET and having some issues. I used to pass HTML / embedded CSS to headers and footers to Phantom and it worked perfectly. In Chrome embedded CSS is ignored. The documentation is not clear about what is exactly supported as header/footer content.\r\n\r\nHere is my HTML header (this is Razor syntax, but you will understand what I want to achieve here):\r\n\r\n```\r\n<html>\r\n<head>\r\n    @Html.EmbedCss(\"css/documents/page-headers/report-page-header.css\", hostingEnvironment)\r\n</head>\r\n<body>\r\n    <div class=\"page-header\">\r\n        <img class=\"logo\" src=\"data:image/png;base64, @Html.EmbedBase64(\"img/company-logo.png\", hostingEnvironment)\" />\r\n        <table class=\"details\">\r\n            <tr>\r\n                <td>@Localizer[\"GeneratedOn\"]:&nbsp;</td>\r\n                <td>@Model.GeneratedOn.ToString(\"G\")</td>\r\n            </tr>\r\n            <tr>\r\n                <td>@Localizer[\"GeneratedBy\"]:&nbsp;</td>\r\n                <td>@Model.GeneratedBy?.ToDisplayString() (@Model.GeneratedBy?.Username)</td>\r\n            </tr>\r\n        </table>\r\n        <div class=\"title\">\r\n            @Model.Name\r\n        </div>\r\n    </div>\r\n</body>\r\n</html>\r\n```\r\n\r\nHere the PhantomPDF rendering result:\r\n\r\n[commandes_dachat_avec_items_2018_07_18_10_10_08.pdf](https://github.com/jsreport/jsreport-chrome-pdf/files/2206110/commandes_dachat_avec_items_2018_07_18_10_10_08.pdf)\r\n\r\nHere the Chrome rendering result with the same code:\r\n\r\n[commandes_dachat_avec_items_2018_07_18_09_43_03.pdf](https://github.com/jsreport/jsreport-chrome-pdf/files/2206111/commandes_dachat_avec_items_2018_07_18_09_43_03.pdf)"},"comment":{"url":"https://api.github.com/repos/jsreport/jsreport-chrome-pdf/issues/comments/406301706","html_url":"https://github.com/jsreport/jsreport-chrome-pdf/issues/15#issuecomment-406301706","issue_url":"https://api.github.com/repos/jsreport/jsreport-chrome-pdf/issues/15","id":406301706,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNjMwMTcwNg==","user":{"login":"orobert91","id":6403705,"node_id":"MDQ6VXNlcjY0MDM3MDU=","avatar_url":"https://avatars3.githubusercontent.com/u/6403705?v=4","gravatar_id":"","url":"https://api.github.com/users/orobert91","html_url":"https://github.com/orobert91","followers_url":"https://api.github.com/users/orobert91/followers","following_url":"https://api.github.com/users/orobert91/following{/other_user}","gists_url":"https://api.github.com/users/orobert91/gists{/gist_id}","starred_url":"https://api.github.com/users/orobert91/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/orobert91/subscriptions","organizations_url":"https://api.github.com/users/orobert91/orgs","repos_url":"https://api.github.com/users/orobert91/repos","events_url":"https://api.github.com/users/orobert91/events{/privacy}","received_events_url":"https://api.github.com/users/orobert91/received_events","type":"User","site_admin":false},"created_at":"2018-07-19T14:44:35Z","updated_at":"2018-07-19T14:44:35Z","author_association":"NONE","body":"Yes color works, but other basic HTML styles do not, such as body font-size, float, etc:\r\n\r\n```\r\n<html>\r\n<head>\r\n    <style>\r\n        body {\r\n            font-family: \"Arial\";\r\n            font-size: 7px;\r\n            font-weight: normal;\r\n        }\r\n\r\n        .page-header {\r\n            color: blue;\r\n        }\r\n\r\n        .left {\r\n            float: left;\r\n        }\r\n\r\n        .right {\r\n            float: right;\r\n        }\r\n    </style>\r\n</head>\r\n<body>\r\n    <div class=\"page-header\">\r\n        <div class=\"left\">Left</div>\r\n        <div class=\"right\">Right</div>\r\n    </div>\r\n</body>\r\n</html>\r\n```\r\n\r\nChrome rendering is useless if we can't put basic stuff in the header. Basic as in more complex than a single line of text but enough to have things like a logo at the left, a title and some info on the right. Unless there is a workaround, I will have to postpone my switch to headless Chrome until Pupeteer fix their stuff."}}
{"actor":{"display_login":"orobert91"}}