feat(PdfReader): add IsShow parameter (#837)

* refactor: 增加 download 功能

* chore: bump version 10.0.18

* refactor: 重构代码

* refactor: 精简代码

* refactor: 调整样式名称

* feat(PdfReader): add IsShow parameter

* chore: bump version 10.0.19

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.17</Version>
+    <Version>10.0.19</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -111,7 +111,7 @@
             </div>
             <div class="bb-view-pdf-dialog-item">
                 <div class="bb-view-pdf-dialog-label">@Localizer["DocumentFileSize"]</div>
-                <div class="bb-view-pdf-dialog-filesize"></div>
+                <div class="bb-view-pdf-dialog-file-size"></div>
             </div>
             <div class="divider">
                 <div class="divider-mask"></div>
@@ -168,7 +168,7 @@
             </div>
             <div class="bb-view-pdf-dialog-item">
                 <div class="bb-view-pdf-dialog-label">@Localizer["DocumentFastWebView"]</div>
-                <div class="bb-view-pdf-dialog-webview">No</div>
+                <div class="bb-view-pdf-dialog-view">No</div>
             </div>
             <div class="bb-view-pdf-dialog-close">
                 <button type="button" class="btn btn-primary btn-close-doc">

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs

@@ -134,10 +134,17 @@ public partial class PdfReader
     [Parameter]
     public Func<Task<Stream?>>? OnGetStreamAsync { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示组件 默认 true 显示
+    /// </summary>
+    [Parameter]
+    public bool IsShow { get; set; } = true;
+
     [Inject, NotNull]
     private IStringLocalizer<PdfReader>? Localizer { get; set; }
 
     private string? ClassString => CssBuilder.Default("bb-pdf-reader")
+        .AddClass("show", IsShow)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
@@ -242,11 +249,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 stream = await OnGetStreamAsync();
             }
 
-            await SetPdfStream(stream);
+            await InvokeSetDataAsync(stream);
         }
     }
 
-    private async Task SetPdfStream(Stream? stream)
+    private async Task InvokeSetDataAsync(Stream? stream)
     {
         if (stream == null || stream == Stream.Null)
         {

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js

@@ -50,7 +50,7 @@ export async function setData(id, data) {
 
     const { options } = pdf;
     options.url = null;
-    options.data = data;;
+    options.data = data;
     await loadPdf(pdf);
 }
 
@@ -202,7 +202,7 @@ const loadMetadata = (el, pdfViewer, metadata) => {
         filename.textContent = docTitle.textContent;
     }
 
-    const filesize = el.querySelector('.bb-view-pdf-dialog-filesize');
+    const filesize = el.querySelector('.bb-view-pdf-dialog-file-size');
     filesize.textContent = getFilesize(metadata);
 
     const title = el.querySelector('.bb-view-pdf-dialog-title');
@@ -232,7 +232,7 @@ const loadMetadata = (el, pdfViewer, metadata) => {
         size.textContent = `${(viewport.width / 72).toFixed(2)} * ${(viewport.height / 72).toFixed(2)} in (portrait)`;
     });
 
-    const webview = el.querySelector('.bb-view-pdf-dialog-webview');
+    const webview = el.querySelector('.bb-view-pdf-dialog-view');
 }
 
 function parsePdfDate(pdfDateString) {
@@ -528,12 +528,19 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
     });
     EventHandler.on(toolbar, "click", ".bb-view-download", e => {
         if (options.url) {
+            let fileName = "download.pdf";
             const docTitle = el.querySelector('.bb-view-subject');
-            const anchorElement = document.createElement('a');
-            anchorElement.href = options.url;
-            anchorElement.download = docTitle.textContent;
-            anchorElement.click();
-            anchorElement.remove();
+            if (docTitle) {
+                fileName = docTitle.textContent;
+            }
+            downloadPdf(options.url, fileName);
+        }
+        else if (options.data) {
+            const blob = new Blob([options.data], { type: 'application/pdf' });
+            const url = window.URL.createObjectURL(blob);
+            let fileName = "download.pdf";
+            downloadPdf(url, fileName);
+            window.URL.revokeObjectURL(url);
         }
     });
 
@@ -563,6 +570,15 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
     });
 }
 
+const downloadPdf = (url, filename) => {
+    const anchorElement = document.createElement('a');
+    anchorElement.href = url;
+    anchorElement.download = filename;
+    document.body.appendChild(anchorElement);
+    anchorElement.click();
+    anchorElement.remove();
+}
+
 const removeToolbarEventHandlers = el => {
     if (el) {
         const towPagesOneView = el.querySelector(".dropdown-item-pages");

src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_reader.css

@@ -8,6 +8,11 @@
     height: calc(var(--bb-pdf-view-height) + var(--bb-pdf-toolbar-height));
 }
 
+    .bb-pdf-reader:not(.show) {
+        overflow: hidden;
+        height: 0;
+    }
+
 .bb-view-progress {
     position: absolute;
     top: 0;