Skip to content

Commit f8eee46

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3749 doc(#I6A3GT): update pdfreader demos
* reformat code * update pdfreader demos
1 parent da541e3 commit f8eee46

7 files changed

Lines changed: 261 additions & 182 deletions

File tree

‎src/BootstrapBlazor.Shared/Demos/PdfReader/PdfReaderAdvanced.razor‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
@using System.ComponentModel;
2+
@inject IStringLocalizer<PdfReaderAdvanced> Localizer
3+
4+
<div>
5+
<div class="row mb-3">
6+
<div class="col-12">
7+
<BootstrapInputGroup>
8+
<Button Color="Color.Primary" OnClick="ApplyZoom">@Localizer["PdfReaderAdvancedViewMode"]</Button>
9+
<Button Color="Color.Primary" OnClick="ApplyPagemode">@Localizer["PdfReaderAdvancedPageMode"]</Button>
10+
<Button Color="Color.Primary" OnClick="ApplyPagePrevious">@Localizer["PdfReaderAdvancedPagePrevious"]</Button>
11+
<Button Color="Color.Primary" OnClick="ApplyPageNext">@Localizer["PdfReaderAdvancedPageNext"]</Button>
12+
<BootstrapInput @bind-Value="@Page" />
13+
<Button OnClick="ApplyPage">@Localizer["PdfReaderAdvancedGoToPage"]</Button>
14+
</BootstrapInputGroup>
15+
</div>
16+
</div>
17+
<div class="row mb-3">
18+
<div class="col-12">
19+
<BootstrapInputGroup>
20+
<BootstrapInputGroupLabel @bind-Value="@Search" />
21+
<BootstrapInput @bind-Value="@Search" />
22+
<Button Icon="fa-solid fa-magnifying-glass" OnClick="ApplySearch"></Button>
23+
</BootstrapInputGroup>
24+
</div>
25+
</div>
26+
<div class="row mb-3">
27+
<div class="col-12">
28+
<BootstrapInputGroup>
29+
<BootstrapInputGroupLabel @bind-Value="@Filename" />
30+
<BootstrapInput @bind-Value="@Filename" />
31+
<Button Color="Color.Primary" OnClick="ApplySearch">@Localizer["PdfReaderAdvancedRefreshPage"]</Button>
32+
</BootstrapInputGroup>
33+
</div>
34+
</div>
35+
<div class="row mb-3 form-inline">
36+
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
37+
<Switch @bind-Value="@StreamMode" ShowLabel="true" />
38+
</div>
39+
</div>
40+
41+
<PdfReader @ref="PdfReader"
42+
Filename="@(StreamMode?FilenameStream:Filename)"
43+
StreamMode="StreamMode"
44+
Page=@Page
45+
Zoom=@Zoom
46+
Pagemode=@Pagemode
47+
Search=@Search
48+
Width="80%"
49+
Height="500px" />
50+
</div>
51+
52+
@code {
53+
[NotNull]
54+
PdfReader? PdfReader { get; set; }
55+
56+
[DisplayName("流模式")]
57+
private bool StreamMode { get; set; }
58+
59+
private EnumZoomMode Zoom { get; set; } = EnumZoomMode.Auto;
60+
61+
private EnumPageMode Pagemode { get; set; } = EnumPageMode.Thumbs;
62+
63+
[DisplayName("文件相对路径或者URL")]
64+
private string Filename { get; set; } = "/samples/sample.pdf";
65+
66+
private string FilenameStream { get; set; } = "https://blazor.app1.es/_content/DemoShared/samples/sample2.pdf";
67+
68+
[DisplayName("搜索")]
69+
private string? Search { get; set; } = "Performance";
70+
71+
private int Page { get; set; } = 3;
72+
73+
private bool ForcePDFJS { get; set; } = true;
74+
75+
private async Task ApplyZoom()
76+
{
77+
Zoom = Zoom switch
78+
{
79+
EnumZoomMode.Auto => EnumZoomMode.PageFit,
80+
EnumZoomMode.PageFit => EnumZoomMode.PageWidth,
81+
EnumZoomMode.PageWidth => EnumZoomMode.PageHeight,
82+
EnumZoomMode.PageHeight => EnumZoomMode.Zoom75,
83+
EnumZoomMode.Zoom75 => EnumZoomMode.Zoom50,
84+
EnumZoomMode.Zoom50 => EnumZoomMode.Zoom25,
85+
_ => EnumZoomMode.Auto
86+
};
87+
await PdfReader.Refresh();
88+
}
89+
90+
private async Task ApplyPagemode()
91+
{
92+
Pagemode = Pagemode switch
93+
{
94+
EnumPageMode.Thumbs => EnumPageMode.Outline,
95+
EnumPageMode.Outline => EnumPageMode.Attachments,
96+
EnumPageMode.Attachments => EnumPageMode.Layers,
97+
EnumPageMode.Layers => EnumPageMode.None,
98+
_ => EnumPageMode.Thumbs
99+
};
100+
await PdfReader.Refresh(Search, Page, Pagemode, Zoom);
101+
}
102+
103+
private async Task ApplyPage()
104+
{
105+
Search = null;
106+
await PdfReader.Refresh(Search, Page, Pagemode, Zoom);
107+
}
108+
109+
private async Task ApplyPagePrevious()
110+
{
111+
Page--;
112+
Search = null;
113+
await PdfReader.Refresh(Search, Page, Pagemode, Zoom);
114+
}
115+
116+
private async Task ApplyPageNext()
117+
{
118+
Page++;
119+
Search = null;
120+
await PdfReader.Refresh(Search, Page, Pagemode, Zoom);
121+
}
122+
123+
private async Task ApplySearch()
124+
{
125+
await PdfReader.Refresh(Search, Page, Pagemode, Zoom);
126+
}
127+
}

‎src/BootstrapBlazor.Shared/Demos/PdfReader/PdfReaderNomal.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@using System.ComponentModel;
2+
3+
<PdfReader Filename=@Filename Height="500px" />
4+
5+
@code {
6+
[DisplayName("the file in the wwwroot relative path or url")]
7+
private string Filename { get; set; } = "/samples/sample.pdf";
8+
}

‎src/BootstrapBlazor.Shared/Demos/PdfReader/PdfReaderStreamMode.razor‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div>
2+
<div class="row g-3">
3+
<div class="col-12">
4+
<BootstrapInputGroup>
5+
<BootstrapInput @bind-Value="@FilenameStream" />
6+
<Button Color="Color.Primary" OnClick="Apply">Go!</Button>
7+
</BootstrapInputGroup>
8+
</div>
9+
</div>
10+
<PdfReader @ref="PdfReader" Filename="@FilenameStream" StreamMode="true" Height="500px" />
11+
</div>
12+
13+
@code {
14+
[NotNull]
15+
PdfReader? PdfReader { get; set; }
16+
17+
private string FilenameStream { get; set; } = "https://blazor.app1.es/_content/DemoShared/samples/sample2.pdf";
18+
19+
private async Task Apply()
20+
{
21+
await PdfReader!.Refresh();
22+
}
23+
}

‎src/BootstrapBlazor.Shared/Locales/en.json‎

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5860,12 +5860,44 @@
58605860
},
58615861
"BootstrapBlazor.Shared.Samples.PdfReaders": {
58625862
"Title": "PDF Reader",
5863-
"BaseUsageText": "Basic usage",
5864-
"BaseUsageIntro": "Use Filename parameter displays pdf file from local server, or Stream parameter use file stream for rendering",
5865-
"BaseUsageText2": "Stream mode",
5866-
"BaseUsageIntro2": "read remote files by cross-domain",
5867-
"BaseUsageText3": "Advanced parameters",
5868-
"BaseUsageIntro3": "Can be use advanced parameters"
5863+
"PdfReaderNomalText": "Basic usage",
5864+
"PdfReaderNomalIntro": "Use Filename parameter displays pdf file from local server, or Stream parameter use file stream for rendering",
5865+
"PdfReaderStreamModeText": "Stream mode",
5866+
"PdfReaderStreamModeIntro": "read remote files by cross-domain",
5867+
"PdfReaderAdvancedText": "Advanced parameters",
5868+
"PdfReaderAdvancedIntro": "Can be use advanced parameters",
5869+
"PdfReaderIssue": "Destructive update reference link: remove pdfoobject",
5870+
"AttributesPdfReaderFilename": "PDF file path (Url or relative path)",
5871+
"AttributesPdfReaderStreamMode": "Use stream mode to read files across domains",
5872+
"AttributesPdfReaderWidth": "Width unit (px/%)",
5873+
"AttributesPdfReaderHeight": "High unit (px/%)",
5874+
"AttributesPdfReaderStyleString": "Component appearance Css Style",
5875+
"AttributesPdfReaderPage": "Page",
5876+
"AttributesPdfReaderPagemode": "Page mode",
5877+
"AttributesPdfReaderZoom": "Zoom mode",
5878+
"AttributesPdfReaderSearch": "Query String",
5879+
"AttributesPdfReaderRefresh": "Refresh Components",
5880+
"AttributesPdfReaderNavigateToPage": "Jump to the specified page number",
5881+
"AttributesPdfReaderRefreshPage": "Refresh and jump to page number",
5882+
"AttributesPdfReaderRefreshComponent": "Refresh component (query keyword, page number, page mode, zoom mode)",
5883+
"AttributesPdfReaderStream": "The file stream used for rendering. If it is empty, the URL parameter is used to read the file",
5884+
"AttributesPdfReaderViewerBase": "Browser page path",
5885+
"AttributesPdfReaderViewerBaseDefaultValue": "built-in",
5886+
"AttributesPdfReaderNavpanes": "Show Navigation Pane",
5887+
"AttributesPdfReaderToolbar": "Show Toolbar",
5888+
"AttributesPdfReaderStatusbar": "show the status bar",
5889+
"AttributesPdfReaderDebug": "Display debugging information"
5890+
},
5891+
"BootstrapBlazor.Shared.Demos.PdfReader.PdfReaderAdvanced": {
5892+
"PdfReaderAdvancedViewMode": "ViewMode",
5893+
"PdfReaderAdvancedPageMode": "PageMode",
5894+
"PdfReaderAdvancedPagePrevious": "PagePrevious",
5895+
"PdfReaderAdvancedPageNext": "PageNext",
5896+
"PdfReaderAdvancedGoToPage": "GoTo",
5897+
"PdfReaderAdvancedRefreshPage": "RefreshPage",
5898+
"PdfReaderAdvancedStreamModeLabel": "StreamMode",
5899+
"PdfReaderAdvancedFilenameLabel": "The file in the wwwroot relative path or url",
5900+
"PdfReaderAdvancedSearchLabel": "Search"
58695901
},
58705902
"BootstrapBlazor.Shared.Samples.VideoPlayers": {
58715903
"Title": "VideoPlayer",

‎src/BootstrapBlazor.Shared/Locales/zh.json‎

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5876,12 +5876,44 @@
58765876
},
58775877
"BootstrapBlazor.Shared.Samples.PdfReaders": {
58785878
"Title": "PDF Reader PDF阅读器",
5879-
"BaseUsageText": "基础用法",
5880-
"BaseUsageIntro": "Filename 参数显示本服务器pdf文件,或 Stream 参数指定用于渲染的文件流",
5881-
"BaseUsageText2": "流模式",
5882-
"BaseUsageIntro2": "可跨域读取文件",
5883-
"BaseUsageText3": "高级参数",
5884-
"BaseUsageIntro3": " "
5879+
"PdfReaderNomalText": "基础用法",
5880+
"PdfReaderNomalIntro": "Filename 参数显示本服务器pdf文件,或 Stream 参数指定用于渲染的文件流",
5881+
"PdfReaderStreamModeText": "流模式",
5882+
"PdfReaderStreamModeIntro": "可跨域读取文件",
5883+
"PdfReaderAdvancedText": "高级参数",
5884+
"PdfReaderAdvancedIntro": "可以使用高级参数",
5885+
"PdfReaderIssue": "破坏性更新参考链接: 移除pdfobject",
5886+
"AttributesPdfReaderFilename": "PDF文件路径(Url或相对路径)",
5887+
"AttributesPdfReaderStreamMode": "使用流化模式,可跨域读取文件",
5888+
"AttributesPdfReaderWidth": "宽 单位(px/%)",
5889+
"AttributesPdfReaderHeight": "高 单位(px/%)",
5890+
"AttributesPdfReaderStyleString": "组件外观 Css Style",
5891+
"AttributesPdfReaderPage": "页码",
5892+
"AttributesPdfReaderPagemode": "页面模式",
5893+
"AttributesPdfReaderZoom": "缩放模式",
5894+
"AttributesPdfReaderSearch": "查询字符串",
5895+
"AttributesPdfReaderRefresh": "刷新组件",
5896+
"AttributesPdfReaderNavigateToPage": "跳转到指定页码",
5897+
"AttributesPdfReaderRefreshPage": "刷新并跳转页码",
5898+
"AttributesPdfReaderRefreshComponent": "刷新组件(查询关键字,页码,页面模式,缩放模式)",
5899+
"AttributesPdfReaderStream": "用于渲染的文件流,为空则用URL参数读取文件",
5900+
"AttributesPdfReaderViewerBase": "浏览器页面路径",
5901+
"AttributesPdfReaderViewerBaseDefaultValue": "内置",
5902+
"AttributesPdfReaderNavpanes": "显示导航窗格",
5903+
"AttributesPdfReaderToolbar": "显示工具栏",
5904+
"AttributesPdfReaderStatusbar": "显示状态栏",
5905+
"AttributesPdfReaderDebug": "显示调试信息"
5906+
},
5907+
"BootstrapBlazor.Shared.Demos.PdfReader.PdfReaderAdvanced": {
5908+
"PdfReaderAdvancedViewMode": "视图模式",
5909+
"PdfReaderAdvancedPagemode": "页面模式",
5910+
"PdfReaderAdvancedPagePrevious": "页码-",
5911+
"PdfReaderAdvancedPageNext": "页码+",
5912+
"PdfReaderAdvancedGoToPage": "跳转",
5913+
"PdfReaderAdvancedRefreshPage": "刷新",
5914+
"PdfReaderAdvancedStreamModeLabel": "流模式",
5915+
"PdfReaderAdvancedFilenameLabel": "文件相对路径或者URL",
5916+
"PdfReaderAdvancedSearchLabel": "搜索"
58855917
},
58865918
"BootstrapBlazor.Shared.Samples.VideoPlayers": {
58875919
"Title": "VideoPlayer 视频播放器",

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

Lines changed: 4 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -6,71 +6,12 @@
66

77
<PackageTips Name="BootstrapBlazor.PdfReader" />
88

9-
<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Nomal">
10-
<PdfReader Filename=@Filename Height="500px" />
11-
</DemoBlock>
9+
<DemoBlock Title="@Localizer["PdfReaderNomalText"]" Introduction="@Localizer["PdfReaderNomalIntro"]" Name="Nomal" Demo="typeof(Demos.PdfReader.PdfReaderNomal)" />
1210

13-
<DemoBlock Title="@Localizer["BaseUsageText2"]" Introduction="@Localizer["BaseUsageIntro2"]" Name="Nomal">
14-
<h6></h6>
15-
<div class="row g-3">
16-
<div class="col-12">
17-
<BootstrapInputGroup>
18-
<BootstrapInput @bind-Value="@FilenameStream" />
19-
<Button Color="Color.Primary" OnClick="Apply">Go!</Button>
20-
</BootstrapInputGroup>
21-
</div>
22-
</div>
23-
<PdfReader @ref="PdfReader" Filename="@FilenameStream" StreamMode="true" Height="500px" />
24-
</DemoBlock>
11+
<DemoBlock Title="@Localizer["PdfReaderStreamModeText"]" Introduction="@Localizer["PdfReaderStreamModeIntro"]" Name="StreamMode" Demo="typeof(Demos.PdfReader.PdfReaderStreamMode)" />
2512

26-
<DemoBlock Title="@Localizer["BaseUsageText3"]" Introduction="@Localizer["BaseUsageIntro3"]" Name="Nomal">
27-
<div class="row mb-3">
28-
<div class="col-12">
29-
<BootstrapInputGroup>
30-
<Button Color="Color.Primary" OnClick="ApplyZoom">视图模式</Button>
31-
<Button Color="Color.Primary" OnClick="ApplyPagemode">页面模式</Button>
32-
<Button Color="Color.Primary" OnClick="ApplyPagePrevious">页码-</Button>
33-
<Button Color="Color.Primary" OnClick="ApplyPageNext">页码+</Button>
34-
<BootstrapInput @bind-Value="@Page" />
35-
<Button OnClick="ApplyPage">跳转</Button>
36-
</BootstrapInputGroup>
37-
</div>
38-
</div>
39-
<div class="row mb-3">
40-
<div class="col-12">
41-
<BootstrapInputGroup>
42-
<BootstrapInputGroupLabel @bind-Value="@Search" />
43-
<BootstrapInput @bind-Value="@Search" />
44-
<Button Icon="fa-solid fa-magnifying-glass" OnClick="ApplySearch"></Button>
45-
</BootstrapInputGroup>
46-
</div>
47-
</div>
48-
<div class="row mb-3">
49-
<div class="col-12">
50-
<BootstrapInputGroup>
51-
<BootstrapInputGroupLabel @bind-Value="@Filename" />
52-
<BootstrapInput @bind-Value="@Filename" />
53-
<Button Color="Color.Primary" OnClick="ApplySearch">刷新</Button>
54-
</BootstrapInputGroup>
55-
</div>
56-
</div>
57-
<div class="row mb-3 form-inline">
58-
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
59-
<Switch @bind-Value="@StreamMode" ShowLabel="true" />
60-
</div>
61-
</div>
62-
63-
<PdfReader @ref="PdfReader2"
64-
Filename="@(StreamMode?FilenameStream:Filename)"
65-
StreamMode="StreamMode"
66-
Page=@Page
67-
Zoom=@Zoom
68-
Pagemode=@Pagemode
69-
Search=@Search
70-
Width="80%"
71-
Height="500px"/>
72-
</DemoBlock>
13+
<DemoBlock Title="@Localizer["PdfReaderAdvancedText"]" Introduction="@Localizer["PdfReaderAdvancedIntro"]" Name="Advanced" Demo="typeof(Demos.PdfReader.PdfReaderAdvanced)" />
7314

7415
<AttributeTable Items="@GetAttributes()" />
7516

76-
<a href="https://gitee.com/LongbowEnterprise/BootstrapBlazor/issues/I66LXV">破坏性更新参考链接: 移除pdfobject</a>
17+
<a href="https://gitee.com/LongbowEnterprise/BootstrapBlazor/issues/I66LXV">@Localizer["PdfReaderIssue"]</a>

0 commit comments

Comments
 (0)