Open PDF from Google Drive in SfPdfViewer

17 Jul 20265 minutes to read

This article shows how to load a PDF stored in Google Drive into the Blazor SfPdfViewer component.

Step 1: Enable the Google Drive API

Create a project in Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For detailed guidance, see the Google Drive documentation.

Step 2: Create a minimal SfPdfViewer sample

Follow the getting started guide to create a basic Blazor application with the SfPdfViewer component.

Step 3: Add required namespaces

  1. Import the required namespaces at the top of the file:
@using Google.Apis.Drive.v3;
@using Google.Apis.Auth.OAuth2;
@using Google.Apis.Services;
@using Google.Apis.Util.Store;
@using System.Threading.Tasks;
@using Syncfusion.Blazor.SfPdfViewer;

Step 4: Authorize, download, and load

The example below authenticates with OAuth 2.0, lists PDF files in the configured folder, downloads the file whose name matches FileName into memory, converts it to a Base64 data URI, and assigns it to DocumentPath.

@page "/"

<SfPdfViewer2 DocumentPath="@DocumentPath"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

@code {
    private string DocumentPath { get; set; }

    private readonly string FolderId = "Your Google Drive Folder ID";
    private readonly string CredentialPath = "Your Path to the OAuth 2.0 Client IDs JSON file";
    private readonly string ApplicationName = "Your Application name";
    private readonly string FileName = "File Name to be loaded into Syncfusion SfPdfViewer";

    private static readonly string[] Scopes = { DriveService.Scope.DriveFile, DriveService.Scope.DriveReadonly };

    protected override async Task OnInitializedAsync()
    {
        UserCredential credential;
        using var stream1 = new FileStream(CredentialPath, FileMode.Open, FileAccess.Read);
        string credPath = "token.json";
        credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(
            GoogleClientSecrets.Load(stream1).Secrets,
            Scopes,
            "user",
            CancellationToken.None,
            new FileDataStore(credPath, true));

        var service = new DriveService(new BaseClientService.Initializer()
        {
            HttpClientInitializer = credential,
            ApplicationName = ApplicationName,
        });

        var listRequest = service.Files.List();
        listRequest.Q = $"mimeType='application/pdf' and '{FolderId}' in parents and trashed=false";
        listRequest.Fields = "files(id, name)";
        var files = await listRequest.ExecuteAsync();

        string fileIdToDownload = files.Files
            .FirstOrDefault(file => file.Name == FileName)?.Id;

        if (!string.IsNullOrEmpty(fileIdToDownload))
        {
            var request = service.Files.Get(fileIdToDownload);
            using (var stream = new MemoryStream())
            {
                await request.DownloadAsync(stream);
                stream.Position = 0;
                DocumentPath = "data:application/pdf;base64," + Convert.ToBase64String(stream.ToArray());
            }
        }
        else
        {
            Console.WriteLine("File not found in Google Drive.");
        }
    }
}

NOTE

  • Replace the placeholders in the code with real values: provide the actual Google Drive folder ID, the application display name, the exact PDF file name to load, and the full path to the OAuth 2.0 Client IDs JSON file.
  • The FolderId is the unique identifier of the Drive folder. For example, for https://drive.google.com/drive/folders/abc123xyz456, the folder ID is abc123xyz456.
  • Install the Google.Apis.Drive.v3 NuGet package in the application to use the shown code.

View the sample on GitHub

See also