!3596 feat(#I65E62): add PDF Reader components

* Done
* Update docs.json
* Add  PDF Reader components / 添加 PDF阅读器 PDF Reader 组件

src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj

@@ -18,18 +18,19 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="BootstrapBlazor.BaiduSpeech" Version="7.0.0" />
-    <PackageReference Include="BootstrapBlazor.BarCode" Version="7.0.0" />
-    <PackageReference Include="BootstrapBlazor.Bluetooth" Version="7.0.1" />
-    <PackageReference Include="BootstrapBlazor.Chart" Version="7.0.0" />
-    <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="7.0.0" />
-    <PackageReference Include="BootstrapBlazor.FontAwesome" Version="7.0.1" />
-    <PackageReference Include="BootstrapBlazor.Markdown" Version="7.0.0" />
-    <PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="7.0.1" />
-    <PackageReference Include="BootstrapBlazor.SignaturePad" Version="7.0.1" />
-    <PackageReference Include="BootstrapBlazor.SummerNote" Version="7.0.0" />
-    <PackageReference Include="BootstrapBlazor.TableExport" Version="7.1.1" />
-    <PackageReference Include="BootstrapBlazor.Topology" Version="7.0.0" />
+    <PackageReference Include="BootstrapBlazor.BaiduSpeech" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.BarCode" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.Bluetooth" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.Chart" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.FontAwesome" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.Markdown" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.PdfReader" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.SignaturePad" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.SummerNote" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.TableExport" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.Topology" Version="7.*" />
   </ItemGroup>
 
   <ItemGroup>

src/BootstrapBlazor.Shared/Extensions/MenusLocalizerExtensions.cs

@@ -580,6 +580,12 @@ internal static class MenusLocalizerExtensions
                     IsNew = true,
                     Text = Localizer["Bluetooth"],
                     Url = "bluetooths"
+                },
+                new()
+                {
+                    IsNew = true,
+                    Text = Localizer["PdfReader"],
+                    Url = "PdfReaders"
                 }
             };
             AddBadge(item);

src/BootstrapBlazor.Shared/Locales/en.json

@@ -1560,7 +1560,8 @@
     "OnScreenKeyboardText": "OnScreenKeyboard",
     "NotificationText": "Notification",
     "SignaturePadText": "SignaturePad",
-    "BluetoothText": "Bluetooth & Printer"
+    "BluetoothText": "Bluetooth & Printer",
+    "PdfReaderText": "PDF Reader"
   },
   "BootstrapBlazor.Shared.Pages.Breakpoints": {
     "Heading": "Breakpoints",
@@ -4366,7 +4367,8 @@
     "OnScreenKeyboard": "OnScreenKeyboard",
     "RibbonTab": "RibbonTab",
     "PulseButton": "PulseButton",
-    "Bluetooth": "Bluetooth & Printer"
+    "Bluetooth": "Bluetooth & Printer",
+    "PdfReader": "PDF Reader"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesHeader": {
     "H1": "Header grouping function",
@@ -5355,7 +5357,7 @@
     "P4": "Install the</code> components of <code>BootstrapBlazor.Bluetooth using <a href='https://www.nuget.org/packages?q-BootstrapBlazor.Bluetooth' target'_blank'>nuget.org</a>",
     "Tips": "ServiceUUID, Default <code>0xff00</code><br/>Common Printers ServiceUUID:<br/><code>0000ff00-0000-1000-8000-00805f9b34fb</code><br/><code>e7810a71-73ae-499d-8c15-faa9aef0c3f2</code><br/><code>0000fee7-0000-1000-8000-00805f9b34fb</code><br/>Set up component services UUID : <code>printer.Opt.ServiceUuid=?</code>"
   },
-    "BootstrapBlazor.Shared.Samples.FileIcons": {
+  "BootstrapBlazor.Shared.Samples.FileIcons": {
     "Title": "File Icon",
     "Intro": "The icon show the file extension",
     "BaseUsageTitle": "Base Usage",
@@ -5369,5 +5371,20 @@
     "ExtensionAttr": "The extension of file",
     "IconColorAttr": "The backgound color for badge of extension",
     "BackgroundTemplateAttr": "The template for custom the backgroup file"
+  },
+  "BootstrapBlazor.Shared.Samples.PdfReaders": {
+    "Title": "PDF Reader",
+    "BaseUsageText": "Basic usage",
+    "BaseUsageIntro": "Use PdfFile parameter displays pdf file from local server, or PdfStream parameter use file stream for rendering",
+    "Tips": "Embedded mode is preferred, if not supported, fall back to Pdf.js mode",
+    "BaseUsageText2": "Using streaming mode,can be read remote files by cross-domain",
+    "BaseUsageIntro2": " ",
+    "Tips2": "Cross-domain best experience: EnableStreamingMode=true , ForcePDFJS=true",
+    "BaseUsageText3": "Force use Pdf.js browser.",
+    "BaseUsageIntro3": "Can be use advanced parameters",
+    "P1": "Precautions",
+    "P2": "This component relies on <a href='https://www.nuget.org/packages?q-BootstrapBlazor.PdfReader' target'_blank'><code>BootstrapBlazor.PdfReader</code></a>, which needs to reference its component package when using this component",
+    "P3": "Nuget package installation",
+    "P4": "Install the</code> components of <code>BootstrapBlazor.PdfReader using <a href='https://www.nuget.org/packages?q-BootstrapBlazor.PdfReader' target'_blank'>nuget.org</a>"
   }
 }

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -1560,7 +1560,8 @@
     "NotificationsText": "浏览器通知 Notification",
     "OnScreenKeyboardText": "屏幕键盘 OnScreenKeyboard",
     "SignaturePadText": "手写签名 SignaturePad",
-    "BluetoothText": "蓝牙和打印 Bluetooth & Printer"
+    "BluetoothText": "蓝牙和打印 Bluetooth & Printer",
+    "PdfReaderText": "PDF阅读器 PDF Reader"
   },
   "BootstrapBlazor.Shared.Pages.Breakpoints": {
     "Heading": "断点",
@@ -4369,7 +4370,8 @@
     "OnScreenKeyboard": "屏幕键盘 OnScreenKeyboard",
     "RibbonTab": "选项卡菜单 RibbonTab",
     "PulseButton": "心跳按钮 PulseButton",
-    "Bluetooth": "蓝牙和打印 Bluetooth & Printer"
+    "Bluetooth": "蓝牙和打印 Bluetooth & Printer",
+    "PdfReader": "PDF阅读器 PDF Reader"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesHeader": {
     "H1": "表头分组功能",
@@ -5360,7 +5362,7 @@
     "P4": "使用 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.Bluetooth' target='_blank'>nuget.org</a> 进行 <code>BootstrapBlazor.Bluetooth</code> 组件的安装",
     "Tips": "服务UUID/ServiceUUID, 默认0xff00<br/>常见打印机ServiceUUID:<br/><code>0000ff00-0000-1000-8000-00805f9b34fb</code><br/><code>e7810a71-73ae-499d-8c15-faa9aef0c3f2</code><br/><code>0000fee7-0000-1000-8000-00805f9b34fb</code><br/>设置组件服务UUID : <code>printer.Opt.ServiceUuid=?</code>"
   },
-    "BootstrapBlazor.Shared.Samples.FileIcons": {
+  "BootstrapBlazor.Shared.Samples.FileIcons": {
     "Title": "File Icon 文件图标",
     "Intro": "通过文件扩展名自定义显示图标",
     "BaseUsageTitle": "基本用法",
@@ -5374,5 +5376,20 @@
     "ExtensionAttr": "文件扩展名",
     "IconColorAttr": "扩展名标签背景色",
     "BackgroundTemplateAttr": "自定义背景图模板"
+  },
+  "BootstrapBlazor.Shared.Samples.PdfReaders": {
+    "Title": "PDF Reader PDF阅读器",
+    "BaseUsageText": "基础用法",
+    "BaseUsageIntro": "PdfFile 参数显示本服务器pdf文件,或 PdfStream 参数指定用于渲染的文件流",
+    "Tips": "优先嵌入模式,不支持则回落倒Pdf.js模式",
+    "BaseUsageText2": "使用流化模式,可跨域读取文件",
+    "BaseUsageIntro2": " ",
+    "Tips2": "跨域最佳体验: EnableStreamingMode=true , ForcePDFJS=true",
+    "BaseUsageText3": "强制使用Pdf.js浏览器.",
+    "BaseUsageIntro3": "可用高级参数定义默认行为",
+    "P1": "注意事项",
+    "P2": "本组件依赖于 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.PdfReader' target='_blank'><code>BootstrapBlazor.PdfReader</code></a>，使用本组件时需要引用其组件包",
+    "P3": "Nuget 包安装",
+    "P4": "使用 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.PdfReader' target='_blank'>nuget.org</a> 进行 <code>BootstrapBlazor.PdfReader</code> 组件的安装"
   }
 }

src/BootstrapBlazor.Shared/Pages/Coms.razor

@@ -97,6 +97,7 @@
             <ComponentCard Text="@Localizer["ListViewText"]" Image="ListView.png" Url="listviews"></ComponentCard>
             <ComponentCard Text="@Localizer["LocatorText"]" Image="Locator.jpg" Url="locators"></ComponentCard>
             <ComponentCard Text="@Localizer["ImageViewerText"]" Image="Image.png" Url="imageviewers"></ComponentCard>
+            <ComponentCard Text="@Localizer["PdfReaderText"]" Image="PdfReader.jpg" Url="PdfReaders"></ComponentCard>
             <ComponentCard Text="@Localizer["PrintText"]" Image="Print.jpg" Url="prints"></ComponentCard>
             <ComponentCard Text="@Localizer["QRCodeText"]" Image="QRCode.png" Url="qrcodes"></ComponentCard>
             <ComponentCard Text="@Localizer["RecognizerText"]" Image="Recognizer.png" Url="recognizers"></ComponentCard>

src/BootstrapBlazor.Shared/Samples/PdfReaders.razor

@@ -0,0 +1,74 @@
+@page "/PdfReaders"
+@namespace BootstrapBlazor.Shared.Samples
+@inject IStringLocalizer<PdfReaders> Localizer
+
+<h3>@Localizer["Title"]</h3>
+
+<p><b>@Localizer["P1"] ：</b></p>
+
+<p>@((MarkupString)Localizer["P2"].Value)</p>
+
+<p><b>@Localizer["P3"]</b></p>
+
+<p>@((MarkupString)Localizer["P4"].Value)</p>
+
+<div class="code-label">.NET CLI</div>
+<Pre class="no-highlight">dotnet add package BootstrapBlazor.PdfReader</Pre>
+
+<div class="code-label">PackageReference</div>
+<Pre class="no-highlight">&lt;PackageReference Include="BootstrapBlazor.PdfReader" /&gt;</Pre>
+
+<div class="code-label">Package Manager</div>
+<Pre class="no-highlight">Install-Package BootstrapBlazor.PdfReader</Pre>
+
+<Tips>
+    <p>@((MarkupString)Localizer["Tips"].Value)</p>
+</Tips>
+
+<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Nomal">
+    <PdfReader PdfFile=@PdfFile Height=500/> 
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["BaseUsageText2"]" Introduction="@Localizer["BaseUsageIntro2"]" Name="Nomal">
+    <h6></h6>
+    <div class="row g-3">
+        <div class="col-12">
+            <BootstrapInputGroup>
+                <BootstrapInput @bind-Value="@UrlBaseStream" />
+                <BootstrapInput @bind-Value="@PdfFileStream" />
+                <Button Color="Color.Primary" OnClick="Apply">Go!</Button>
+            </BootstrapInputGroup>
+        </div>
+    </div>
+    <PdfReader @ref="pdfReader" UrlBase="@UrlBaseStream" PdfFile="@PdfFileStream" EnableStreamingMode="true" Height=500/>
+    <br/>
+    <Tips>
+        <p>@((MarkupString)Localizer["Tips2"].Value)</p>
+    </Tips> 
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["BaseUsageText3"]" Introduction="@Localizer["BaseUsageIntro3"]" Name="Nomal">
+    <div class="row g-3">
+        <div class="col-5">
+            <BootstrapInputGroup>
+                <BootstrapInput @bind-Value="@Search" />
+                <Button Icon="fa-solid fa-magnifying-glass" OnClick="Apply5"></Button>
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-7">
+            <BootstrapInputGroup>
+                <BootstrapInput @bind-Value="@PdfFile" DisplayText="PDF" ShowLabel="true" />
+                <Checkbox @bind-Value="ForcePDFJS" DisplayText="PDF.js" ShowAfterLabel="true" />
+                <Button Color="Color.Primary" OnClick="Apply5">GO</Button>
+            </BootstrapInputGroup>
+        </div>
+    </div>
+    <PdfReader @ref="pdfReader2"
+               PdfFile="@PdfFile"
+               ForcePDFJS=@ForcePDFJS
+               Page=@Page
+               Search=@Search
+               Height=500 />
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Samples/PdfReaders.razor.cs

@@ -0,0 +1,143 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components;
+using BootstrapBlazor.Shared.Common;
+
+namespace BootstrapBlazor.Shared.Samples;
+
+/// <summary>
+/// 
+/// </summary>
+public partial class PdfReaders
+{
+    PdfReader? pdfReader;
+    PdfReader? pdfReader2;
+
+    private string Search { get; set; } = "Performance";
+    private int Page { get; set; } = 3;
+    private bool ForcePDFJS { get; set; } = true;
+
+    private string PdfFile = "/_content/BootstrapBlazor.Shared/sample.pdf";
+    private string UrlBaseStream = "https://blazor.app1.es/_content/DemoShared/";
+    private string PdfFileStream = "sample.pdf";
+    
+
+    private async Task Apply()
+    {
+        await pdfReader!.Refresh();
+    } 
+    private async Task Apply5()
+    {
+        await pdfReader2!.Refresh();
+    } 
+
+    /// <summary>
+    /// 获得属性方法
+    /// </summary>
+    /// <returns></returns>
+    protected IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+    {
+        // TODO: 移动到数据库中
+        new AttributeItem() {
+            Name = "PdfStream",
+            Description = "用于渲染的文件流,为空则用URL参数读取文件",
+            Type = "Stream?",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new AttributeItem() {
+            Name = "PdfFile",
+            Description = "PDF文件路径(Url或相对路径)",
+            Type = "string?",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new AttributeItem() {
+            Name = "OnInfo",
+            Description = "信息回调",
+            Type = "Func<string, Task>??",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new AttributeItem() {
+            Name = "OnError",
+            Description = "错误回调",
+            Type = "Func<string, Task>??",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new AttributeItem() {
+            Name = "EnableStreamingMode",
+            Description = "使用流化模式,可跨域读取文件",
+            Type = "bool",
+            ValueList = "-",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "UrlBase",
+            Description = "PDF文件基础路径, (使用流化模式才需要设置)",
+            Type = "string?",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new AttributeItem() {
+            Name = "Height",
+            Description = "高度",
+            Type = "int?",
+            ValueList = "-",
+            DefaultValue = "700"
+        },
+        new AttributeItem() {
+            Name = "ForceIframe",
+            Description = "强制使用 Iframe",
+            Type = "bool",
+            ValueList = "-",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "ForcePDFJS",
+            Description = "强制使用 PDF.js",
+            Type = "bool",
+            ValueList = "-",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "PDFJS_URL",
+            Description = "PDF.js 浏览器页面路径",
+            Type = "string",
+            ValueList = "-",
+            DefaultValue = "内置"
+        },
+        new AttributeItem() {
+            Name = "Page",
+            Description = "指定页码,如果浏览器支持，将加载PDF并自动滚动到第n页 (PDF.js 专有)",
+            Type = "int",
+            ValueList = "-",
+            DefaultValue = "1"
+        },
+        new AttributeItem() {
+            Name = "Search",
+            Description = "查询字符串 (PDF.js 专有)",
+            Type = "string?",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new AttributeItem() {
+            Name = "View",
+            Description = "视图模式 (PDF.js 专有)",
+            Type = "string?",
+            ValueList = "-",
+            DefaultValue = "FitV"
+        },
+        new AttributeItem() {
+            Name = "Pagemode",
+            Description = "页面模式 (PDF.js 专有)",
+            Type = "string?",
+            ValueList = "-",
+            DefaultValue = "thumbs"
+        },
+    };    
+
+}

src/BootstrapBlazor.Shared/docs.json

@@ -76,7 +76,8 @@
     "pulsebuttons": "PulseButtons",
     "select-trees": "SelectTrees",
     "bluetooths": "Bluetooths",
-    "ribbontabs": "RibbonTabs"
+    "ribbontabs": "RibbonTabs",
+    "pdfreaders": "PdfReaders"
   },
   "video": {
     "autorefresh": "BV1ap4y1x7Qn?p=8",