Xamarin.Forms PDF 뷰어를 사용하여 PDF 페이지를 썸네일로 보기
이 블로그에서는 SyncfusionXamarin PDF Viewer 구성 요소를 사용하여 이 작업을 수행하는 방법을 살펴보겠습니다.
Xamarin 앱 만들기 및 종속성 추가
먼저 새Xamarin app를 생성하고 그 안에 SyncfusionXamarin.Forms PDF Viewer 및 ListView(썸네일 이미지를 표시하기 위해) NuGet 패키지를 설치합니다.
축소판 보기 만들기
그런 다음 Xamarin.Forms ListView를 자식으로 추가하여 ThumbnailView.xaml 파일에서 콘텐츠 보기를 만듭니다.
다음 코드 예제를 참조하십시오.
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
xmlns:local="clr-namespace:PdfViewerThumbnail"
x:Class="PdfViewerThumbnail.Views.ThumbnailView">
<ContentView.Resources>
<ResourceDictionary>
<local:ImageSourceConverter x:Key="ImageSourceConverter"/>
<DataTemplate x:Key="itemTemplate">
<ViewCell >
<ViewCell.View>
<Grid x:Name="grid" RowSpacing="10" ColumnSpacing="10" Margin="10,10,10,10">
<Image Source="{Binding ImageSource, Converter={StaticResource ImageSourceConverter}}" Aspect="Fill"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ResourceDictionary>
</ContentView.Resources>
<syncfusion:SfListView x:Name="listView"
x:FieldModifier="public"
Margin="10"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
RowSpacing="10"
ColumnSpacing="10"
ItemTapped="listView_ItemTapped"
ItemSize="150"
LoadMoreOption="Auto"
LoadMoreCommand="{Binding LoadMoreItemsCommand}"
LoadMoreCommandParameter="{Binding Source={x:Reference Name=listView}}"
LoadMorePosition="Bottom"
ItemTemplate="{StaticResource itemTemplate}"
Orientation="Horizontal"
ItemsSource="{Binding ImageCollection}" >
<syncfusion:SfListView.LoadMoreTemplate>
<DataTemplate>
<Grid IsVisible="{Binding IsBusy, Source={x:Reference Name=listView}}" >
<syncfusion:LoadMoreIndicator WidthRequest="50" HeightRequest="50" Color="White" IsRunning="True" VerticalOptions="CenterAndExpand"/>
</Grid>
</DataTemplate>
</syncfusion:SfListView.LoadMoreTemplate>
</syncfusion:SfListView>
</ContentView>
ImageSourceConverter 클래스는 byte[]로 얻은 썸네일 이미지를 Stream 개체로 변환하는 데 도움이 됩니다.
다음 코드 예제를 참조하십시오.
/// <summary>
/// Represents the image conversion methods for the thumbnail view.
/// </summary>
public class ImageSourceConverter: IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
var image = value as byte[];
if (image == null)
return null;
return ImageSource.FromStream(() => new MemoryStream(image));
}
public object ConvertBack(object value, Type targetType,
object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
콘텐츠 페이지 생성, PDF 뷰어 및 썸네일 보기 추가
다음으로 기본 콘텐츠 페이지(예: PdfViewerView.xaml )를 만듭니다. Syncfusion Xamarin.Forms PDF 뷰어 구성 요소를 추가하여 PDF 문서 및 생성된 축소판 보기를 기본 콘텐츠 페이지의 자식 요소로 표시합니다.
다음 코드 예제를 참조하십시오.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PdfViewerThumbnail.PdfViewerView"
xmlns:syncfusion="clr-namespace:Syncfusion.SfPdfViewer.XForms;assembly=Syncfusion.SfPdfViewer.XForms"
xmlns:local="clr-namespace:PdfViewerThumbnail"
xmlns:views="clr-namespace:PdfViewerThumbnail.Views">
<ContentPage.BindingContext>
<local:PdfViewerThumbnailViewModel></local:PdfViewerThumbnailViewModel>
</ContentPage.BindingContext>
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="{Static GridLength.Star}" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="MainContent" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="AppBar" BackgroundColor="#1777D6" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" x:Name="thumbnail" Text="Thumbnail View" Margin="5,0,0,0" TextColor="White" FontSize="Medium" VerticalOptions="Center"></Label>
</Grid>
<Grid Grid.Row="1" x:Name="PdfViewerGrid">
<syncfusion:SfPdfViewer x:Name="pdfViewerControl" PageNumber="{Binding PageNumber}" InputFileStream="{Binding PdfDocumentStream}" />
</Grid>
<Grid Grid.Row="2" x:Name="PageThumbnailsGrid" HorizontalOptions="FillAndExpand" BackgroundColor="#1777D6">
<views:ThumbnailView x:Name="pageThumbnails"></views:ThumbnailView>
</Grid>
</Grid>
</Grid>
</ContentPage>
썸네일용 이미지 내보내기 및 요청 시 로드
이제 ExportAsImage 또는 ExportAsImageAsync 방법을 사용하여 PDF 문서 페이지를 이미지로 내보낼 수 있습니다.
채워진 이미지를 주문형으로 로드하려면 Xamarin.Forms ListView 구성 요소의 LoadMoreCommand 메서드를 사용합니다.
PDF 문서가 로드되면 처음에는 몇 페이지만 내보내고 섬네일 보기에 추가됩니다. 그런 다음 LoadMoreCommand 실행 방법을 사용하여 썸네일의 축소판 페이지가 주문형으로 추가됩니다.
다음 코드 논리를 구현하여 pdfViewerControl_DocumentLoaded 이벤트 처리기에서 이미지를 내보냅니다.
private void pdfViewerControl_DocumentLoaded(object sender, EventArgs args)
{
int initialThumbnailsCount = 8;
// PdfViewerControl object that helps to navigate to the selected page index.
pageThumbnails.PdfViewerControl = this.pdfViewerControl;
// Export PDF pages as images and add them to the thumbnail view.
var pageCount = pdfViewerControl.PageCount > initialThumbnailsCount ? initialThumbnailsCount :
pdfViewerControl.PageCount;
(BindingContext as PdfViewerThumbnailViewModel).AddThumbnailImages(pageThumbnails.listView, 0, pageCount - 1);
}
요청 시 더 많은 썸네일 항목을 로드하려면 실행 메서드(예: LoadMoreItems )를 보기 모델 클래스 PdfViewerThumbnailViewModel의 LoadMoreCommand에 바인딩합니다. 그런 다음 다음 비즈니스 로직을 구현합니다.
PdfViewerThumbnailViewModel.cs
/// <summary>
/// Constructor of the view model class.
/// </summary>
public PdfViewerThumbnailViewModel()
{
LoadMoreItemsCommand = new Command<object>(LoadMoreItems);
//Accessing the PDF document added as embedded resource as stream.
m_pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerThumbnail.Assets.GIS Succinctly.pdf");
}
/// <summary>
/// Load more items to the thumbnail view on demand.
/// </summary>
/// <param name="obj">List view</param>
internal void LoadMoreItems(object obj)
{
var startPageIndex = this.ThumbnailImages.Count;
if (startPageIndex == this.PdfViewer.PageCount)
{
return;
}
int endPageIndex = startPageIndex + loadMoreItemsCount;
endPageIndex = endPageIndex > this.PdfViewer.PageCount - 1 ? this.PdfViewer.PageCount - 1 : endPageIndex - 1;
AddThumbnailImages(obj as SfListView, startPageIndex, endPageIndex);
}
/// <summary>
/// Export PDF pages as images and add them to the thumbnail view.
/// </summary>
/// <param name="listView">list view object</param>
/// <param name="startPageIndex">start page index of the document</param>
/// <param name="endPageIndex">end page index of the document</param>
internal async void AddThumbnailImages(SfListView listView, int startPageIndex, int endPageIndex)
{
if (!listView.IsBusy)
{
listView.IsBusy = true;
Stream[] imageStreamList = null;
imageStreamList = await PdfViewer?.ExportAsImageAsync(startPageIndex, endPageIndex, 0.3f);
foreach (Stream imageStream in imageStreamList)
{
imageStream.Position = 0;
byte[] bytes = ReadBytes(imageStream);
this.ThumbnailImages.Add(new ThumbnailModel(bytes));
}
listView.IsBusy = false;
}
}
/// <summary>
/// Convert image stream to byte array.
/// </summary>
/// <param name="imageStream">image stream</param>
/// <returns>image byte array</returns>
internal byte[] ReadBytes(Stream imageStream)
{
byte[] buffer = new byte[16 * 1024];
using (MemoryStream ms = new MemoryStream())
{
int read;
while ((read = imageStream.Read(buffer, 0, buffer.Length)) > 0)
{
ms.Write(buffer, 0, read);
}
return ms.ToArray();
}
}
ThumbnailModel.cs
모델 클래스 ThumbnailModel을 만들어 각 썸네일 이미지의 속성을 유지합니다.
public class ThumbnailModel: INotifyPropertyChanged
{
private byte[] _imageSource;
public byte[] ImageSource
{
get
{
return _imageSource;
}
set
{
_imageSource = value;
this.RaisedOnPropertyChanged("ImageSource");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public ThumbnailModel(byte[] imageSource)
{
ImageSource = imageSource;
}
public void RaisedOnPropertyChanged(string _PropertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
}
}
}
탐색할 썸네일 이미지 선택
썸네일 이미지를 선택하면 PDF 뷰어에서 해당 페이지로 이동해야 합니다. 이는 ListView의 선택된 항목 인덱스를 PDF 뷰어의 PageNumber 속성에 할당하여 수행할 수 있습니다.
다음 코드 논리를 구현하여 ThumbnailView partial 클래스의 listView_ItemTapped 이벤트 처리기에서 선택한 미리 보기 이미지로 이동합니다.
private void listView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e)
{
ThumbnailModel thumbnailModel = e.ItemData as ThumbnailModel;
//Selected page index of the thumbnail view.
int pageIndex = (BindingContext as PdfViewerThumbnailViewModel).ThumbnailImages.IndexOf(thumbnailModel);
//Bindable property of PdfViewerControl's PageNumber.
(BindingContext as PdfViewerThumbnailViewModel).PageNumber = pageIndex + 1;
}
GitHub 참조
view PDF pages as thumbnails using our Xamarin.Forms PDF Viewer 구성 요소에 대한 예제 응용 프로그램을 확인하십시오.
이 예제 앱을 실행하면 다음 스크린샷과 같은 출력이 제공됩니다.
Xamarin.Forms PDF 뷰어 구성 요소를 사용하여 PDF 페이지를 축소판으로 보기
결론
읽어 주셔서 감사합니다! SyncfusionXamarin.Forms PDF Viewer 구성 요소를 사용하여 PDF 페이지를 축소판으로 보는 방법을 살펴보았습니다. 이렇게 하면 PDF 페이지를 쉽게 탐색할 수 있습니다. 이 블로그 게시물에 제공된 단계를 시도하고 아래 댓글 섹션에서 피드백을 공유하십시오.
코드 예제와 함께 다른 기능을 탐색하려면 당사Xamarin.Forms PDF Viewer documentation를 확인하십시오.
기존 고객의 경우 License and Downloads page for Essential Studio에서 새 버전을 다운로드할 수 있습니다. 아직 고객이 아닌 경우 30일free trial을 사용해 이러한 기능을 확인할 수 있습니다.
궁금한 사항은 support forum , support portal 또는 feedback portal 을 통해 문의할 수 있습니다. 기꺼이 도와드리겠습니다!
관련 블로그
Reference
이 문제에 관하여(Xamarin.Forms PDF 뷰어를 사용하여 PDF 페이지를 썸네일로 보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/syncfusion/view-pdf-pages-as-thumbnails-using-xamarinforms-pdf-viewer-5emc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
