From 4252a9f9fd619fd5d411aed47a130d1695dfe3fa Mon Sep 17 00:00:00 2001
From: Frans van Dijk <FDijk@weinor.de>
Date: Mon, 4 Nov 2024 16:09:06 +0100
Subject: [PATCH] Added option to specify CSS file(s) to include when printing
 and to disable ScanStyles.

---
 .../Pages/Index.razor                         | 77 ++++++++++++++++++-
 .../Pages/Index.razor.css                     | 26 +++++++
 source/Append.Blazor.Printing/PrintOptions.cs | 12 ++-
 .../PrintOptionsAdapter.cs                    |  5 ++
 4 files changed, 117 insertions(+), 3 deletions(-)
 create mode 100644 samples/Append.Blazor.Printing.Server/Pages/Index.razor.css

diff --git a/samples/Append.Blazor.Printing.Server/Pages/Index.razor b/samples/Append.Blazor.Printing.Server/Pages/Index.razor
index 4e17492..4e10885 100644
--- a/samples/Append.Blazor.Printing.Server/Pages/Index.razor
+++ b/samples/Append.Blazor.Printing.Server/Pages/Index.razor
@@ -4,6 +4,79 @@
 
 <h1>Hello, world!</h1>
 
-<button @onclick="@(()=> PrintingService.Print("docs/sample.pdf"))">
+<button @onclick="@(() => PrintingService.Print("docs/sample.pdf"))">
     Print PDF
-</button>
\ No newline at end of file
+</button>
+
+<hr />
+
+<h2>Print HTML element by ID</h2>
+
+<p>
+    For printing an HTML element by ID there are multiple options.<br />
+    The default option is to scan the current effective styles will be and what is printed will closely match what the user currently sees. However, before and after pseudo-elements aren't included.<br />
+    Alternatively scanning current styles can be disabled and URLs for CSS file(s) can be provided, this enables applying different styles when printing.<br />
+</p>
+
+<hr />
+<div id="print-me">
+    <h3>This section between the horizontal lines will be printed.</h3>
+    <div class="d-none d-print-block">Normally not displayed, <b>only printed</b> when Bootstrap is included.</div>
+    <div class="d-print-none">This is normally displayed but <b>not printed</b> when Bootstrap is included.</div>
+    <div class="demo1 mb-1">This element has an <code>::after</code> pseudo-element. </div>
+    <div class="demo2 mb-1">Element with background colour, with default <code>print-color-adjust</code> setting.</div>
+    <div class="demo2 mb-1 print-colors">Element with background colour, with <code>print-color-adjust</code> set to <code>exact</code>.</div>
+    <div class="demo3 mb-1">
+        Element with different styles set in print media query in scoped CSS, <code>ScanStyles</code> need to be disabled for different style to take effect.
+        Also, this element demonstrates that having <code>ScanStyles</code> enabled can cause issues when an element requires more vertical space when printing.
+        Dependent on the browser window width this text might be wrapped over more lines when being printed, overlapping the element below when <code>ScanStyles</code> is used.
+    </div>
+    <div class="mb-1">Some text which might be overlapped by the above text when <code>ScanStyles</code> is used.</div>
+</div>
+<hr />
+
+<button @onclick="@PrintDefault">
+    Print section default options
+</button>
+<div class="mt-2">
+    <EditForm Model="_model">
+        <div class="mb-1 form-check">
+            <InputCheckbox class="form-check-input" id="cb_bootstrap-css" @bind-Value="_model.IncludeBootstrapCss" />
+            <label class="form-check-label" for="cb_bootstrap-css">Bootstrap CSS URL</label>
+        </div>
+        <div class="mb-1 form-check">
+            <InputCheckbox class="form-check-input" id="cb_appliation-css" @bind-Value="_model.IncludeApplicationCss" />
+            <label class="form-check-label" for="cb_appliation-css">Include application CSS URLs</label>
+        </div>
+        <div class="mb-1 form-check">
+            <InputCheckbox class="form-check-input" id="cb_scan-styles" @bind-Value="_model.ScanStyles" />
+            <label class="form-check-label" for="cb_scan-styles">Enable style scanning</label>
+        </div>
+    </EditForm>
+    <button @onclick="@Print">
+        Print section with selected options.
+    </button>
+</div>
+
+@code
+{
+    private Task PrintDefault() => PrintingService.Print("print-me", PrintType.Html);
+
+    private class DemoModel
+    {
+        public bool IncludeBootstrapCss { get; set; } = true;
+        public bool IncludeApplicationCss { get; set; } = true;
+        public bool ScanStyles { get; set; }
+    }
+
+    private readonly DemoModel _model = new();
+
+    private Task Print()
+    {
+        var options = new PrintOptions { Printable = "print-me", Type = PrintType.Html, ScanStyles = _model.ScanStyles };
+        if (_model.IncludeBootstrapCss) options.CssUrls.Add("css/bootstrap/bootstrap.min.css");
+        if (_model.IncludeApplicationCss) options.CssUrls.AddRange(new[] { "css/site.css", "Append.Blazor.Printing.Server.styles.css" });
+
+        return PrintingService.Print(options);
+    }
+}
diff --git a/samples/Append.Blazor.Printing.Server/Pages/Index.razor.css b/samples/Append.Blazor.Printing.Server/Pages/Index.razor.css
new file mode 100644
index 0000000..fb11f41
--- /dev/null
+++ b/samples/Append.Blazor.Printing.Server/Pages/Index.razor.css
@@ -0,0 +1,26 @@
+.demo1::after {
+    content: "Content of after pseudo-element."
+}
+
+.demo2 {
+    color: white;
+    background-color: orange;
+}
+
+.demo3 {
+    font-weight: bold;
+    text-decoration: underline;
+}
+
+.print-colors {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+}
+
+@media print {
+    .demo3 {
+        font-size: 24px;
+        font-weight: normal;
+        text-decoration: none;
+    }
+}
diff --git a/source/Append.Blazor.Printing/PrintOptions.cs b/source/Append.Blazor.Printing/PrintOptions.cs
index d8ab0b8..a7a34b6 100644
--- a/source/Append.Blazor.Printing/PrintOptions.cs
+++ b/source/Append.Blazor.Printing/PrintOptions.cs
@@ -1,4 +1,6 @@
-namespace Append.Blazor.Printing
+using System.Collections.Generic;
+
+namespace Append.Blazor.Printing
 {
     /// <summary>
     /// Options for a specific print.
@@ -41,5 +43,13 @@ public PrintOptions(string printable, string modalMessage, PrintType printType =
         /// Used when printing PDF documents passed as base64 data.
         /// </summary>
         public bool Base64 { get; set; }
+        /// <summary>
+        /// This allows us to pass one or more css files URLs that should be applied to the html being printed.
+        /// </summary>
+        public List<string> CssUrls { get; } = new();
+        /// <summary>
+        /// When set to <c>false</c>, the library will not process styles applied to the html being printed. Useful when using <see cref="CssUrls"/>.
+        /// </summary>
+        public bool ScanStyles { get; set; } = true;
     }
 }
diff --git a/source/Append.Blazor.Printing/PrintOptionsAdapter.cs b/source/Append.Blazor.Printing/PrintOptionsAdapter.cs
index ea31d79..3f1b02b 100644
--- a/source/Append.Blazor.Printing/PrintOptionsAdapter.cs
+++ b/source/Append.Blazor.Printing/PrintOptionsAdapter.cs
@@ -12,6 +12,8 @@ internal record PrintOptionsAdapter
         public bool ShowModal { get; init; }
         public string ModalMessage { get; init; } = "Retrieving Document...";
         public bool? Base64 { get; set; }
+        public string[] Css { get; set; } = null;
+        public bool ScanStyles { get; set; } = true;
         public string TargetStyles { get; set; } = "['*']";
 
         public PrintOptionsAdapter(PrintOptions options)
@@ -21,6 +23,9 @@ public PrintOptionsAdapter(PrintOptions options)
             ShowModal = options.ShowModal;
             ModalMessage = options.ModalMessage;
             Base64 = options.Base64 == true ? true : null;
+            if (options.CssUrls.Count > 0)
+                Css = options.CssUrls.ToArray();
+            ScanStyles = options.ScanStyles;
         }
     }
 }