feat(PdfViewer): add UseGoogleDocs parameter (#454)

* feat: 增加 UseGoogleDocs 方法

* chore: bump version 9.0.1

Author: ArgoZhang

src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj

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

src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor

@@ -2,4 +2,4 @@
 @inherits BootstrapModuleComponentBase
 @attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.PdfViewer/PdfViewer.razor.js", JSObjectReference = true, AutoInvokeDispose = false)]
 
-<div @attributes="AdditionalAttributes" id="@Id" data-bb-url="@Url" class="@ClassString" style="@StyleString"></div>
+<div @attributes="AdditionalAttributes" id="@Id" data-bb-google-docs="@UseGoogleDocsString" class="@ClassString" style="@StyleString"></div>

src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.cs

@@ -35,6 +35,12 @@ public partial class PdfViewer
     [Parameter]
     public Func<Task>? NotSupportCallback { get; set; }
 
+    /// <summary>
+    /// Gets or sets whether to use Google Docs for PDF rendering. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool UseGoogleDocs { get; set; } = false;
+
     private string? ClassString => CssBuilder.Default("bb-pdf-viewer-container")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -44,6 +50,9 @@ public partial class PdfViewer
         .Build();
 
     private string? _url;
+    private bool _useGoogleDocs;
+
+    private string? UseGoogleDocsString => UseGoogleDocs ? "true" : null;
 
     /// <summary>
     /// <inheritdoc/>
@@ -57,11 +66,25 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender)
         {
             _url = Url;
+            _useGoogleDocs = UseGoogleDocs;
+            return;
         }
 
+        var rerender = false;
         if (_url != Url)
         {
             _url = Url;
+            rerender = true;
+        }
+
+        if (_useGoogleDocs != UseGoogleDocs)
+        {
+            _useGoogleDocs = UseGoogleDocs;
+            rerender = true;
+        }
+
+        if (rerender)
+        {
             await InvokeVoidAsync("loadPdf", Id, _url);
         }
     }
@@ -73,7 +96,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
     {
         LoadedCallaback = nameof(TriggerOnLoaded),
-        NotSupportCallback = nameof(TriggerNotSupportCallback)
+        NotSupportCallback = nameof(TriggerNotSupportCallback),
+        Url
     });
 
     /// <summary>

src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js

@@ -8,8 +8,7 @@ export async function init(id, invoke, options) {
     const pdfViewer = { el, invoke, options };
     Data.set(id, pdfViewer);
 
-    const url = el.getAttribute('data-bb-url');
-    await loadPdf(id, url);
+    await loadPdf(id, options.url);
 }
 
 export async function loadPdf(id, url) {
@@ -21,6 +20,9 @@ export async function loadPdf(id, url) {
         return;
     }
 
+    delete pdfViewer.frame;
+    el.innerHTML = '';
+
     if (url) {
         const { frame } = pdfViewer;
         const viewer = frame || createFrame(el);
@@ -29,12 +31,13 @@ export async function loadPdf(id, url) {
                 invoke.invokeMethodAsync(options.loadedCallaback);
             };
         }
+
+        const useGoogleDocs = el.getAttribute('data-bb-google-docs') === 'true';
+        if (useGoogleDocs) {
+            url = `http://docs.google.com/viewer?url=${url}`
+        }
         viewer.src = url;
     }
-    else {
-        delete pdfViewer.frame;
-        el.innerHTML = '';
-    }
 }
 
 const createFrame = el => {