PdfViewer component

Blazorise.sln

@@ -155,6 +155,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazorise.Captcha.ReCaptcha
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazorise.Charts.Zoom", "Source\Extensions\Blazorise.Charts.Zoom\Blazorise.Charts.Zoom.csproj", "{045536EC-BD97-409D-BDF7-C148B7C5AAFC}"
 EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazorise.PdfViewer", "Source\Extensions\Blazorise.PdfViewer\Blazorise.PdfViewer.csproj", "{EAB7EC89-900A-4280-B24A-152B9DD2B503}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -405,6 +407,10 @@ Global
 		{045536EC-BD97-409D-BDF7-C148B7C5AAFC}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{045536EC-BD97-409D-BDF7-C148B7C5AAFC}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{045536EC-BD97-409D-BDF7-C148B7C5AAFC}.Release|Any CPU.Build.0 = Release|Any CPU
+		{EAB7EC89-900A-4280-B24A-152B9DD2B503}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{EAB7EC89-900A-4280-B24A-152B9DD2B503}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{EAB7EC89-900A-4280-B24A-152B9DD2B503}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{EAB7EC89-900A-4280-B24A-152B9DD2B503}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -474,6 +480,7 @@ Global
 		{D24EA4EF-0AEC-43B2-BCDC-56229D60C285} = {9731051E-0AA7-411E-A76A-987854F034DA}
 		{2B4FD79A-42E2-4B81-828B-0799E4744ADA} = {9731051E-0AA7-411E-A76A-987854F034DA}
 		{045536EC-BD97-409D-BDF7-C148B7C5AAFC} = {9731051E-0AA7-411E-A76A-987854F034DA}
+		{EAB7EC89-900A-4280-B24A-152B9DD2B503} = {9731051E-0AA7-411E-A76A-987854F034DA}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {205B3EA4-470F-45DA-911E-346AF7D0A9A5}

Demos/Blazorise.Demo/Blazorise.Demo.csproj

@@ -28,6 +28,7 @@
     <ProjectReference Include="..\..\Source\Extensions\Blazorise.Video\Blazorise.Video.csproj" />
     <ProjectReference Include="..\..\Source\Extensions\Blazorise.SignaturePad\Blazorise.SignaturePad.csproj" />
     <ProjectReference Include="..\..\Source\Extensions\Blazorise.FluentValidation\Blazorise.FluentValidation.csproj" />
+    <ProjectReference Include="..\..\Source\Extensions\Blazorise.PdfViewer\Blazorise.PdfViewer.csproj" />
     <ProjectReference Include="..\Apps\TodoApp\TodoApp.csproj" />
   </ItemGroup>
 

Demos/Blazorise.Demo/Components/SideMenu.razor

@@ -290,79 +290,32 @@
                         Extensions
                     </BarDropdownToggle>
                     <BarDropdownMenu>
-                        <BarDropdownItem To="tests/animate">
-                            Animate
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/autocomplete">
-                            Autocomplete
-                        </BarDropdownItem>
+                        <BarDropdownItem To="tests/animate">Animate</BarDropdownItem>
+                        <BarDropdownItem To="tests/autocomplete">Autocomplete</BarDropdownItem>
                         <BarDropdownItem To="tests/captcha">Captcha</BarDropdownItem>
-                        <BarDropdownItem To="tests/charts">
-                            Charts
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/charts/annotations">
-                            Charts Annotations
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/charts/datalabels">
-                            Charts Data Labels
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/charts/zoom">
-                            Charts Zoom
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/cropper">
-                            Cropper
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/dropdownlist">
-                            Dropdown List
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/listview">
-                            List View
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/livecharts">
-                            Live Charts
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/loadingindicator">
-                            Loading Indicator
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/lottie-animation">
-                            Lottie Animation
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/markdown">
-                            Markdown
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/qrcode">
-                            QR Code
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/signaturepad">
-                            SignaturePad
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/repeater">
-                            Repeater
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/richtextedit">
-                            RichTextEdit
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/selectlist">
-                            Select List
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/snackbar">
-                            Snackbar
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/spinkit">
-                            Spin Kit
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/splitter">
-                            Splitter
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/treeview">
-                            TreeView
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/transferlist">
-                            Transfer List
-                        </BarDropdownItem>
-                        <BarDropdownItem To="tests/video">
-                            Video
-                        </BarDropdownItem>
+                        <BarDropdownItem To="tests/charts">Charts</BarDropdownItem>
+                        <BarDropdownItem To="tests/charts/annotations">Charts Annotations</BarDropdownItem>
+                        <BarDropdownItem To="tests/charts/datalabels">Charts Data Labels</BarDropdownItem>
+                        <BarDropdownItem To="tests/charts/zoom">Charts Zoom</BarDropdownItem>
+                        <BarDropdownItem To="tests/cropper">Cropper</BarDropdownItem>
+                        <BarDropdownItem To="tests/dropdownlist">Dropdown List</BarDropdownItem>
+                        <BarDropdownItem To="tests/listview">List View</BarDropdownItem>
+                        <BarDropdownItem To="tests/livecharts">Live Charts</BarDropdownItem>
+                        <BarDropdownItem To="tests/loadingindicator">Loading Indicator</BarDropdownItem>
+                        <BarDropdownItem To="tests/lottie-animation">Lottie Animation</BarDropdownItem>
+                        <BarDropdownItem To="tests/markdown">Markdown</BarDropdownItem>
+                        <BarDropdownItem To="tests/pdfviewer">Pdf Viewer</BarDropdownItem>
+                        <BarDropdownItem To="tests/qrcode">QR Code</BarDropdownItem>
+                        <BarDropdownItem To="tests/repeater">Repeater</BarDropdownItem>
+                        <BarDropdownItem To="tests/richtextedit">RichTextEdit</BarDropdownItem>
+                        <BarDropdownItem To="tests/selectlist">Select List</BarDropdownItem>
+                        <BarDropdownItem To="tests/signaturepad">SignaturePad</BarDropdownItem>
+                        <BarDropdownItem To="tests/snackbar">Snackbar</BarDropdownItem>
+                        <BarDropdownItem To="tests/spinkit">Spin Kit</BarDropdownItem>
+                        <BarDropdownItem To="tests/splitter">Splitter</BarDropdownItem>
+                        <BarDropdownItem To="tests/transferlist">Transfer List</BarDropdownItem>
+                        <BarDropdownItem To="tests/treeview">TreeView</BarDropdownItem>
+                        <BarDropdownItem To="tests/video">Video</BarDropdownItem>
                     </BarDropdownMenu>
                 </BarDropdown>
             </BarItem>

Demos/Blazorise.Demo/Pages/Tests/PdfViewerPage.razor

@@ -0,0 +1,44 @@
+@page "/tests/pdfviewer"
+<Row>
+    <Column>
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>PdfViewer</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <PdfViewerContainer Height="Height.Rem(50)">
+                    <PdfViewerToolbar />
+                    <PdfViewer Source="@source" />
+                </PdfViewerContainer>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
+<Row>
+    <Column>
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>As a standalone PdfViewer</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <Button Color="Color.Primary" Clicked="@(()=>standalonePdfViewerRef.PreviousPage())">Previous page</Button>
+                <Button Color="Color.Primary" Clicked="@(()=>standalonePdfViewerRef.NextPage())">Next page</Button>
+                <Button Color="Color.Secondary" Clicked="@(()=>pageNumber = 5)">Go to Page 5</Button>
+                <Button Color="Color.Secondary" Clicked="@(()=>scale = 1)">Set Scale 1</Button>
+                <Button Color="Color.Secondary" Clicked="@(()=>scale = 2)">Set Scale 2</Button>
+                <Button Color="Color.Dark" Clicked="@(()=>standalonePdfViewerRef.Print())">Print</Button>
+            </CardBody>
+            <CardBody>
+                <Div Height="Height.Rem(50)" Overflow="Overflow.Auto">
+                    <PdfViewer @ref="@standalonePdfViewerRef" Source="@source" @bind-PageNumber="@pageNumber" @bind-Scale="@scale" />
+                </Div>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
+@code {
+    string source = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
+    PdfViewer standalonePdfViewerRef;
+    int pageNumber = 2;
+    double scale = 1;
+}

Demos/Blazorise.Demo/_Imports.razor

@@ -31,4 +31,5 @@
 @using Blazorise.Cropper
 @using Blazorise.Shared.Models
 @using Blazorise.SignaturePad
+@using Blazorise.PdfViewer
 @using TodoApp

Documentation/Blazorise.Docs/Blazorise.Docs.csproj

@@ -35,6 +35,7 @@
     <ProjectReference Include="..\..\Source\Extensions\Blazorise.Cropper\Blazorise.Cropper.csproj" />
     <ProjectReference Include="..\..\Source\Extensions\Blazorise.SignaturePad\Blazorise.SignaturePad.csproj" />
     <ProjectReference Include="..\..\Source\Extensions\Blazorise.Splitter\Blazorise.Splitter.csproj" />
+    <ProjectReference Include="..\..\Source\Extensions\Blazorise.PdfViewer\Blazorise.PdfViewer.csproj" />
     <PackageReference Include="MailKit" Version="4.7.0" />
     <PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />
     <PackageReference Include="MimeKit" Version="4.7.1" />

Documentation/Blazorise.Docs/Layouts/DocsLayout.razor

@@ -251,6 +251,9 @@
                                     <BarDropdownItem To="docs/extensions/lottie-animation">LottieAnimation</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/markdown">Markdown</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/qrcode">QRCode</BarDropdownItem>
+                                    <BarDropdownItem To="docs/extensions/pdfviewer" Flex="Flex.JustifyContent.Between">
+                                        <DocsNewFeatureBadge>PdfViewer</DocsNewFeatureBadge>
+                                    </BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/richtextedit">RichTextEdit</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/selectlist">SelectList</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/sidebar">Sidebar</BarDropdownItem>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/ImportPdfViewerExampleCode.html

@@ -0,0 +1,5 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="atSign">&#64;</span>using Blazorise.PdfViewer
+</pre></div>
+</div>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBasicExampleCode.html

@@ -0,0 +1,5 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">PdfViewer</span> <span class="htmlAttributeName">Source</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+</pre></div>
+</div>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerNugetInstallExampleCode.html

@@ -0,0 +1,5 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+Install-Package Blazorise.PdfViewer
+</pre></div>
+</div>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerPagingExampleCode.html

@@ -0,0 +1,16 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Clicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnPreviousPageClicked</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Prev<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Clicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnNextPageClicked</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Next<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
+
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">PdfViewer</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>pdfViewerRef</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Source</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+</pre></div>
+<div class="csharp"><pre>
+<span class="atSign">&#64;</span>code {
+    PdfViewer pdfViewerRef;
+
+    Task OnPreviousPageClicked() =&gt; pdfViewerRef.PreviousPage();
+    Task OnNextPageClicked() =&gt; pdfViewerRef.NextPage();
+}
+</pre></div>
+</div>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerToolbarExampleCode.html

@@ -0,0 +1,8 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">PdfViewerContainer</span> <span class="htmlAttributeName">Height</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Height.Rem(35)</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">PdfViewerToolbar</span> <span class="htmlTagDelimiter">/&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">PdfViewer</span> <span class="htmlAttributeName">Source</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">PdfViewerContainer</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Examples/ImportPdfViewerExample.snippet

@@ -0,0 +1 @@
+@using Blazorise.PdfViewer

Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Examples/PdfViewerBasicExample.razor

@@ -0,0 +1,3 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<PdfViewer Source="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />

Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Examples/PdfViewerNugetInstallExample.snippet

@@ -0,0 +1 @@
+Install-Package Blazorise.PdfViewer

Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Examples/PdfViewerPagingExample.razor

@@ -0,0 +1,13 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<Button Color="Color.Primary" Clicked="@OnPreviousPageClicked">Prev</Button>
+<Button Color="Color.Primary" Clicked="@OnNextPageClicked">Next</Button>
+
+<PdfViewer @ref="@pdfViewerRef" Source="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
+
+@code {
+    PdfViewer pdfViewerRef;
+
+    Task OnPreviousPageClicked() => pdfViewerRef.PreviousPage();
+    Task OnNextPageClicked() => pdfViewerRef.NextPage();
+}

Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Examples/PdfViewerToolbarExample.razor

@@ -0,0 +1,6 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<PdfViewerContainer Height="Height.Rem(35)">
+    <PdfViewerToolbar />
+    <PdfViewer Source="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
+</PdfViewerContainer>