I'm trying to create a Blazor Server application with JS script which will print from HTML.
I'm trying to programatically include an image within it so having HTML and then executing printWindow.document.write("<img src="${imageBinaryHere}">"); would make it simpler for me.
The code that I have for now is following:
window.printCard = function (imageBinaryHere) { var printWindow = window.open('', '_blank'); printWindow.document.open(); printWindow.document.write('<!DOCTYPE html><html> A bunch of HTML going here including <link href="{serverUrl}/css/printStyles.css" rel="stylesheet" /></html>') printWindow.document.write(`<img src="${imageBinaryHere}">`); printWindow.document.close(); printWindow.print(); printWindow.close();}I have 2 issues that are occurring for me:
- Is that printStyles.css is not included in the print window, therefore just rendering HTML without any styling. I'm not sure if I'm including it properly or what's the problem here?
- Even if I add inline css for example
<body style="background-color:red;">it doesn't change it on the print preview document, but rather on the whole page like this:![enter image description here]()
Any ideas on what I'm doing wrong, this is the first time I'm trying to implement printing. Keep in mind this is Blazor server executing this script like this:
protected async Task Print(){ await JsRuntime.InvokeVoidAsync("printCard", imageBinary);}