Как включить CSS в сценарий JS при печати HTML?
Я пытаюсь создать серверное приложение Blazor с помощью JS-скрипта, который будет печатать из HTML.
Я пытаюсь программно включить в него изображение, поэтому наличие HTML и последующее выполнение printWindow.document.write("<img src = "${imageBinaryHere}">"); облегчили бы мне задачу.
Код, который у меня есть на данный момент, следующий:
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();
}
У меня есть 2 проблемы, которые возникают у меня:
- Это printStyles.css не включен в окно печати, поэтому просто отображает HTML без каких-либо стилей. Я не уверен, правильно ли я его включаю или в чем здесь проблема?
- Даже если я добавлю, например, встроенный CSS
<body style = "background-color:red;">, он изменится не в документе предварительного просмотра, а на всей странице, например:
Есть идеи, что я делаю не так, я впервые пытаюсь реализовать печать. Имейте в виду, что сервер Blazor выполняет этот скрипт следующим образом:
protected async Task Print()
{
await JsRuntime.InvokeVoidAsync("printCard", imageBinary);
}
Ваш HTML неправильно сформирован. Браузер может попытаться интерпретировать то, что вы хотите, и ошибиться. Добавьте <body> и убедитесь, что </body></html> стоит в конце.
В диалоговом окне предварительного просмотра печати (по крайней мере, в Chrome) нажмите «Настройки» и установите флажок [ ] Background graphics.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я решил это, выполнив следующие действия:
Добавьте HTML-код, который нужно распечатать, в файл HtmlToPrint.razor. Создайте div, а затем внутри него тег body, а затем остальную часть вашего HTML.
Затем добавьте файл HtmlToPrint.razor.css, который будет действовать как ограниченный CSS для этого файла HtmlToPrint.razor.
При добавлении CSS оберните его в @media print {}, чтобы его можно было использовать только для печати.
В файле CSS в классе .body {} добавьте -webkit-print-color-adjust: точный;
В файл HtmlToPrint.razor.cs добавьте функцию для вызова печати.
protected async Task Print() { await JsRuntime.InvokeVoidAsync("{nameOfTheJSFunctionYouAreCalling}"); }В wwwroot добавьте файл /js/print.js и добавьте
window.print = function () { window.print(); window.close(); }В основной CSS-файл вашего приложения (у меня это wwwroot/css/site.css) добавьте следующее:
.print {
display: none;
}
@media print {
.no-print {
display: none;
}
.print {
display: block;
}
}
- На первом этапе в div-оболочку добавьте печать (она должна быть видна при печати) к другим вещам, которые вы хотите исключить (например, боковую навигацию, верхнюю навигацию, основной макет и т. д.), добавьте класс без печати.
Теперь при нажатии кнопки должен открыться предварительный просмотр печати, и все должно быть правильно отформатировано. Пожалуйста, расширьте ответ, если у вас есть другие идеи.
Есть ли в консоли ошибки, связанные с
printStyles.css?