Open PDF file from Google Cloud Storage

12 Jan 20243 minutes to read

To load a PDF file from Google Cloud Storage in a SfPdfViewer, you can follow the steps below

Step 1 Create a Service Account

Open the Google Cloud Console. Navigate to IAM & Admin > Service accounts. Click Create Service Account.` Enter a name, assign roles (e.g., Storage Object Admin), and create a key in JSON format. Download the key file securely. Utilize the downloaded key file in your applications or services for authentication and access to the Google Cloud Storage bucket. For additional details, refer to the official documentation.

Step 2: Create a Simple SfPdfViewer Sample in blazor

Start by following the steps provided in this link to create a simple SfPdfViewer sample in blazor. This will give you a basic setup of the SfPdfViewer component.

Step 3: Include the following namespaces in the Index.razor file.

  1. Import the required namespaces at the top of the file:
@using Google.Cloud.Storage.V1;
@using Google.Apis.Auth.OAuth2;
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons

Step 4: Add the below code example to

@page "/"

<SfButton @onclick="OnClick">Save file to google cloud storage</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath"
              @ref="@viewer"
              Height="100%"
              Width="100%">
</SfPdfViewer2>


@code {
    private string DocumentPath { get; set; }
    private SfPdfViewer2 viewer;
    private readonly string keyFilePath = @"path/to/service-account-key.json";
    private readonly string bucketName = "YourBucketName";
    private readonly string fileName = "FileName.pdf";
    private StorageClient _storageClient;

    public async void OnClick(MouseEventArgs args)
    {
        byte[] data = await viewer.GetDocumentAsync();
        string result = Path.GetFileNameWithoutExtension(fileName);
        string FileName = result + "_downloaded.pdf";
        // Load the service account credentials from the key file.
        var credentials = GoogleCredential.FromFile(keyFilePath);
        // Create a storage client with Application Default Credentials
        _storageClient = StorageClient.Create(credentials);
        // Upload the document to Google Cloud Storage
        using (var memoryStream = new MemoryStream(data))
        {
            _storageClient.UploadObject(bucketName, result + "_downloaded.pdf", null, memoryStream);
        }
    }
}

NOTE

Replace Your Bucket name from Google Cloud Storage with the actual name of your Google Cloud Storage bucket and File Name to be Loaded into Syncfusion SfPdfViewer with the actual file name you want to load from the cloud bucket

NOTE

Replace path/to/service-account-key.json with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename.

NOTE

The Google.Cloud.Storage.V1 NuGet package must be installed in your application to use the previous code example.

View sample in GitHub