Skip to content

Commit 6ecdd4e

Browse files
ArgoZhangArgoZhang
authored
doc(EmbedPDF): add Theme parameter (#7511)
* chore: 更新 PdfReader 资源文件键值 * chore: 增加 EmbedPDF 组件链接 * doc: 更新 url 源 * doc: 更新 Pdf 文件名 * doc: 更新示例 * doc: 更新节点 * doc: 增加主题模式示例 * doc: 更新注释 * chore: update version to lastest
1 parent 4fb2a02 commit 6ecdd4e

7 files changed

Lines changed: 119 additions & 59 deletions

File tree

‎src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<PackageReference Include="BootstrapBlazor.Dom2Image" Version="10.0.1" />
3939
<PackageReference Include="BootstrapBlazor.DriverJs" Version="10.0.1" />
4040
<PackageReference Include="BootstrapBlazor.ElementIcon" Version="10.0.0" />
41-
<PackageReference Include="BootstrapBlazor.EmbedPDF" Version="10.0.0-beta01" />
41+
<PackageReference Include="BootstrapBlazor.EmbedPDF" Version="10.0.0-beta02" />
4242
<PackageReference Include="BootstrapBlazor.FileViewer" Version="10.0.0" />
4343
<PackageReference Include="BootstrapBlazor.FluentSystemIcon" Version="10.0.0" />
4444
<PackageReference Include="BootstrapBlazor.FontAwesome" Version="10.0.0" />

‎src/BootstrapBlazor.Server/Components/Samples/EmbedPdfs.razor‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,51 @@
11
@page "/embed-pdf"
22
@inject IStringLocalizer<EmbedPdfs> Localizer
33

4-
@* <h3>@Localizer["PdfTitle"]</h3>
5-
<h3>@Localizer["PdfDescription"]</h3>
4+
<h3>@Localizer["PdfTitle"]</h3>
5+
<h4>@Localizer["PdfDescription"]</h4>
66

77
<PackageTips Name="BootstrapBlazor.EmbedPDF" />
8-
*@
8+
99
<DemoBlock Title="@Localizer["PdfReaderNormalText"]" Introduction="@Localizer["PdfReaderNormalIntro"]" Name="Normal">
10-
<div class="" style="border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); overflow: hidden;">
11-
<EmbedPDF></EmbedPDF>
12-
</div>
10+
<section ignore style="--bb-input-group-label-width: 176px;">
11+
<p class="code-label">适用场景：</p>
12+
<ul class="ul-demo">
13+
<li>企业内部文档管理系统：需要在线审阅、批注合同或报告。</li>
14+
<li>在线教学平台：学生可以在电子教材上做笔记和划重点。</li>
15+
<li>SaaS产品：为客户提供专业的PDF文档预览和轻量级编辑功能。</li>
16+
</ul>
17+
<div class="row form-inline g-3">
18+
<div class="col-12 col-sm-6">
19+
<BootstrapInputGroup>
20+
<BootstrapInputGroupLabel>TabBarMode</BootstrapInputGroupLabel>
21+
<Select @bind-Value="_tabBarMode"></Select>
22+
</BootstrapInputGroup>
23+
</div>
24+
<div class="col-12 col-sm-6">
25+
<BootstrapInputGroup>
26+
<BootstrapInputGroupLabel>Theme</BootstrapInputGroupLabel>
27+
<Select @bind-Value="_theme"></Select>
28+
</BootstrapInputGroup>
29+
</div>
30+
<div class="col-12 col-sm-6">
31+
<BootstrapInputGroup>
32+
<BootstrapInputGroupLabel>EnableThumbnails</BootstrapInputGroupLabel>
33+
<Switch @bind-Value="_enableThumbnails"></Switch>
34+
</BootstrapInputGroup>
35+
</div>
36+
<div class="col-12 col-sm-6">
37+
<BootstrapInputGroup>
38+
<BootstrapInputGroupLabel>ShowPrint</BootstrapInputGroupLabel>
39+
<Switch @bind-Value="_showPrint"></Switch>
40+
</BootstrapInputGroup>
41+
</div>
42+
<div class="col-12">
43+
<Button Color="Color.Primary" OnClick="@(() => _url = "./samples/sample.pdf")" class="me-2">sample-Url</Button>
44+
<Button Color="Color.Primary" OnClick="@(() => _url = "./samples/ebook.pdf")" class="me-2">ebook-Url</Button>
45+
<Button Color="Color.Danger" OnClick="GetSampleStream" class="me-2">Sample-Stream</Button>
46+
<Button Color="Color.Danger" OnClick="GetTestStream">Sample2-Stream</Button>
47+
</div>
48+
</div>
49+
</section>
50+
<EmbedPDF Url="@_url" ViewHeight="600px" TabBarMode="_tabBarMode" Theme="_theme"></EmbedPDF>
1351
</DemoBlock>

‎src/BootstrapBlazor.Server/Components/Samples/EmbedPdfs.razor.cs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ public partial class EmbedPdfs
2020
private bool _showPrint = true;
2121
private bool _enableThumbnails = true;
2222
private bool _showDownload = true;
23-
private bool _showToolbar = true;
23+
private EmbedPDFTabBarMode _tabBarMode = EmbedPDFTabBarMode.Always;
24+
private EmbedPDFTheme _theme = EmbedPDFTheme.System;
2425
private bool _showFileName = true;
2526
private string _url = "./samples/sample.pdf";
2627
private string _streamFileName = "";

‎src/BootstrapBlazor.Server/Components/Samples/PdfReaders.razor‎

Lines changed: 51 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,61 @@
22
@inject IStringLocalizer<PdfReaders> Localizer
33

44
<h3>@Localizer["PdfTitle"]</h3>
5-
<h3>@Localizer["PdfDescription"]</h3>
5+
<h4>@Localizer["PdfDescription"]</h4>
66

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

99
<DemoBlock Title="@Localizer["PdfReaderNormalText"]" Introduction="@Localizer["PdfReaderNormalIntro"]" Name="Normal">
10-
<p>@((MarkupString)Localizer["PdfReaderFAIconDesc"].Value)</p>
11-
<Pre>&lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css"]" /&gt;</Pre>
12-
<ul class="ul-demo">
13-
<li>@((MarkupString)Localizer["PdfReaderSetPdfStreamDesc"].Value)</li>
14-
<li>@((MarkupString)Localizer["PdfReaderDownloadFileNameDesc"].Value)</li>
15-
</ul>
16-
<section ignore class="row form-inline g-3" style="--bb-input-group-label-width: 176px;">
17-
<div class="col-12 col-sm-6">
18-
<BootstrapInputGroup>
19-
<BootstrapInputGroupLabel>ShowToolbar</BootstrapInputGroupLabel>
20-
<Switch @bind-Value="_showToolbar"></Switch>
21-
</BootstrapInputGroup>
22-
</div>
23-
<div class="col-12 col-sm-6">
24-
<BootstrapInputGroup>
25-
<BootstrapInputGroupLabel>ShowFileName</BootstrapInputGroupLabel>
26-
<Switch @bind-Value="_showFileName"></Switch>
27-
</BootstrapInputGroup>
28-
</div>
29-
<div class="col-12 col-sm-6">
30-
<BootstrapInputGroup>
31-
<BootstrapInputGroupLabel>ShowDownload</BootstrapInputGroupLabel>
32-
<Switch @bind-Value="_showDownload"></Switch>
33-
</BootstrapInputGroup>
34-
</div>
35-
<div class="col-12 col-sm-6">
36-
<BootstrapInputGroup>
37-
<BootstrapInputGroupLabel>EnableThumbnails</BootstrapInputGroupLabel>
38-
<Switch @bind-Value="_enableThumbnails"></Switch>
39-
</BootstrapInputGroup>
40-
</div>
41-
<div class="col-12 col-sm-6">
42-
<BootstrapInputGroup>
43-
<BootstrapInputGroupLabel>ShowPrint</BootstrapInputGroupLabel>
44-
<Switch @bind-Value="_showPrint"></Switch>
45-
</BootstrapInputGroup>
46-
</div>
47-
<div class="col-12 col-sm-6">
48-
<BootstrapInputGroup>
49-
<BootstrapInputGroupLabel>ShowTwoPagesOneView</BootstrapInputGroupLabel>
50-
<Switch @bind-Value="_showTwoPagesOneView"></Switch>
51-
</BootstrapInputGroup>
52-
</div>
53-
<div class="col-12">
54-
<Button Color="Color.Primary" OnClick="@(() => _url = "./samples/sample.pdf")" class="me-2">Sample-Url</Button>
55-
<Button Color="Color.Primary" OnClick="@(() => _url = "./samples/sample2.pdf")" class="me-2">Sample2-Url</Button>
56-
<Button Color="Color.Danger" OnClick="GetSampleStream" class="me-2">Sample-Stream</Button>
57-
<Button Color="Color.Danger" OnClick="GetTestStream">Sample2-Stream</Button>
10+
<section ignore style="--bb-input-group-label-width: 176px;">
11+
<p>@((MarkupString)Localizer["PdfReaderFAIconDesc"].Value)</p>
12+
<Pre>&lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css"]" /&gt;</Pre>
13+
<ul class="ul-demo">
14+
<li>@((MarkupString)Localizer["PdfReaderSetPdfStreamDesc"].Value)</li>
15+
<li>@((MarkupString)Localizer["PdfReaderDownloadFileNameDesc"].Value)</li>
16+
</ul>
17+
<div class="row form-inline g-3">
18+
<div class="col-12 col-sm-6">
19+
<BootstrapInputGroup>
20+
<BootstrapInputGroupLabel>ShowToolbar</BootstrapInputGroupLabel>
21+
<Switch @bind-Value="_showToolbar"></Switch>
22+
</BootstrapInputGroup>
23+
</div>
24+
<div class="col-12 col-sm-6">
25+
<BootstrapInputGroup>
26+
<BootstrapInputGroupLabel>ShowFileName</BootstrapInputGroupLabel>
27+
<Switch @bind-Value="_showFileName"></Switch>
28+
</BootstrapInputGroup>
29+
</div>
30+
<div class="col-12 col-sm-6">
31+
<BootstrapInputGroup>
32+
<BootstrapInputGroupLabel>ShowDownload</BootstrapInputGroupLabel>
33+
<Switch @bind-Value="_showDownload"></Switch>
34+
</BootstrapInputGroup>
35+
</div>
36+
<div class="col-12 col-sm-6">
37+
<BootstrapInputGroup>
38+
<BootstrapInputGroupLabel>EnableThumbnails</BootstrapInputGroupLabel>
39+
<Switch @bind-Value="_enableThumbnails"></Switch>
40+
</BootstrapInputGroup>
41+
</div>
42+
<div class="col-12 col-sm-6">
43+
<BootstrapInputGroup>
44+
<BootstrapInputGroupLabel>ShowPrint</BootstrapInputGroupLabel>
45+
<Switch @bind-Value="_showPrint"></Switch>
46+
</BootstrapInputGroup>
47+
</div>
48+
<div class="col-12 col-sm-6">
49+
<BootstrapInputGroup>
50+
<BootstrapInputGroupLabel>ShowTwoPagesOneView</BootstrapInputGroupLabel>
51+
<Switch @bind-Value="_showTwoPagesOneView"></Switch>
52+
</BootstrapInputGroup>
53+
</div>
54+
<div class="col-12">
55+
<Button Color="Color.Primary" OnClick="@(() => _url = "./samples/sample.pdf")" class="me-2">sample-Url</Button>
56+
<Button Color="Color.Primary" OnClick="@(() => _url = "./samples/ebook.pdf")" class="me-2">ebook-Url</Button>
57+
<Button Color="Color.Danger" OnClick="GetSampleStream" class="me-2">Sample-Stream</Button>
58+
<Button Color="Color.Danger" OnClick="GetTestStream">Sample2-Stream</Button>
59+
</div>
5860
</div>
5961
</section>
6062
<PdfReader Url="@_url" EnableThumbnails="_enableThumbnails"

‎src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -799,6 +799,11 @@ void AddData(DemoMenuItem item)
799799
Url = "office-viewer"
800800
},
801801
new()
802+
{
803+
Text = Localizer["EmbedPdf"],
804+
Url = "embed-pdf"
805+
},
806+
new()
802807
{
803808
Text = Localizer["PdfReader"],
804809
Url = "pdf-reader"

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4677,6 +4677,7 @@
46774677
"RibbonTab": "RibbonTab",
46784678
"PulseButton": "PulseButton",
46794679
"Bluetooth": "IBluetooth",
4680+
"EmbedPdf": "Embed PDF",
46804681
"PdfReader": "PDF Reader",
46814682
"PdfViewer": "PDF Viewer",
46824683
"VideoPlayer": "VideoPlayer",
@@ -5970,7 +5971,7 @@
59705971
},
59715972
"BootstrapBlazor.Server.Components.Samples.PdfReaders": {
59725973
"PdfTitle": "PDF Reader",
5973-
"PdfIntro": "Embed and display PDF documents directly in web pages without relying on a PDF reader installed locally by the user.",
5974+
"PdfDescription": "Embed and display PDF documents directly in web pages without relying on a PDF reader installed locally by the user.",
59745975
"PdfReaderNormalText": "Basic usage",
59755976
"PdfReaderNormalIntro": "Set the PDF file address using the <code>Url</code> parameter, or specify the file stream to be rendered using the <code>OnGetStreamAsync</code> parameter.",
59765977
"PdfReaderFAIconDesc": "The <code>PdfReader</code> component icon depends on the <code>BootstrapBlazor.FontAwesome</code> package. You need to reference the following styles; otherwise, the toolbar icon will not display.",
@@ -6025,6 +6026,12 @@
60256026
"PdfViewerToastSuccessfulContent": "PDF document loaded successfully.",
60266027
"PdfViewerToastNotSupportContent": "The browser does not support inline viewing of PDF files."
60276028
},
6029+
"BootstrapBlazor.Server.Components.Samples.EmbedPdfs": {
6030+
"PdfTitle": "EmbedPDF PDF",
6031+
"PdfDescription": "EmbedPDF is an open-source JavaScript PDF reader based on PDFium, which renders directly in the browser without requiring backend support.",
6032+
"PdfReaderNormalText": "Basic usage",
6033+
"PdfReaderNormalIntro": "Set the PDF file address using the <code>Url</code> parameter."
6034+
},
60286035
"BootstrapBlazor.Server.Components.Samples.VideoPlayers": {
60296036
"VideoPlayersTitle": "VideoPlayer",
60306037
"VideoPlayersNormalTitle": "Basic usage",

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4677,6 +4677,7 @@
46774677
"RibbonTab": "选项卡菜单 RibbonTab",
46784678
"PulseButton": "心跳按钮 PulseButton",
46794679
"Bluetooth": "蓝牙服务 IBluetoothService",
4680+
"EmbedPdf": "PDF阅读器 Embed PDF",
46804681
"PdfReader": "PDF阅读器 PDF Reader",
46814682
"PdfViewer": "PDF阅读器 PDF Viewer",
46824683
"VideoPlayer": "视频播放器 VideoPlayer",
@@ -5970,7 +5971,7 @@
59705971
},
59715972
"BootstrapBlazor.Server.Components.Samples.PdfReaders": {
59725973
"PdfTitle": "PDF Reader PDF 文档阅读器",
5973-
"PdfIntro": "在网页中直接嵌入和显示 PDF 文档，无需依赖用户本地安装的 PDF 阅读器",
5974+
"PdfDescription": "在网页中直接嵌入和显示 PDF 文档，无需依赖用户本地安装的 PDF 阅读器",
59745975
"PdfReaderNormalText": "基础用法",
59755976
"PdfReaderNormalIntro": "通过 <code>Url</code> 参数设置 pdf 文件地址，或者使用 <code>OnGetStreamAsync</code> 参数指定用于渲染的文件流",
59765977
"PdfReaderFAIconDesc": "<code>PdfReader</code> 组件图标依赖 <code>BootstrapBlazor.FontAwesome</code> 包，需要引用如下样式，否则工具栏图标无法显示",
@@ -6025,6 +6026,12 @@
60256026
"PdfViewerToastSuccessfulContent": "PDF 文档加载成功",
60266027
"PdfViewerToastNotSupportContent": "当前浏览器不支持 Pdf 文档预览功能"
60276028
},
6029+
"BootstrapBlazor.Server.Components.Samples.EmbedPdfs": {
6030+
"PdfTitle": "EmbedPDF PDF 文档阅读器",
6031+
"PdfDescription": "EmbedPDF 是一个开源的 JavaScript PDF 阅读器，基于 PDFium，在浏览器端直接渲染，无需后端支持",
6032+
"PdfReaderNormalText": "基础用法",
6033+
"PdfReaderNormalIntro": "通过 <code>Url</code> 参数设置 pdf 文件地址"
6034+
},
60286035
"BootstrapBlazor.Server.Components.Samples.VideoPlayers": {
60296036
"VideoPlayersTitle": "VideoPlayer 视频播放器",
60306037
"VideoPlayersNormalTitle": "基础用法",

0 commit comments

Comments
 (0)