Syncfusion AI Assistant

How can I help you?

Open PDF from OneDrive

28 Feb 20268 minutes to read

Follow these steps to load a PDF from OneDrive using the server-backed PDF Viewer.

Step 1: Create a Microsoft Graph API application

Create a Microsoft Graph API application and obtain the application ID and tenant ID. Follow this guide

Step 2: Create a simple PDF Viewer sample in Vue

Start by following the steps in this guide to create a simple PDF Viewer sample in Vue. This establishes a basic PDF Viewer component and its dependencies.

Step 3: Modify the PdfViewerController.cs file in the web service project

  1. Create a web service project in .NET Core 3.0 or above. For background on the PDF Viewer web service pattern

  2. Open the PdfViewerController.cs file in the web service project.

  3. Import the required namespaces at the top of the file:

using System.IO;
using Microsoft.Graph;
using Microsoft.Identity.Client;
using Helpers;
  1. Add the following private fields and constructor parameters to PdfViewerController. In the constructor, assign values from configuration to the corresponding fields.
private IConfiguration _configuration;
public readonly string folderName;
public readonly string applicationId;
public readonly string tenantId;

public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
{
  _hostingEnvironment = hostingEnvironment;
  _cache = cache;
  _configuration = configuration;
  folderName = _configuration.GetValue<string>("FolderName");
  tenantId = _configuration.GetValue<string>("TenantId");
  applicationId = _configuration.GetValue<string>("ApplicationId");
}
  1. Modify the Load() method to load the PDF files from One Drive.
[HttpPost("Load")]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
[Route("[controller]/Load")]
//Post action for Loading the PDF documents 

public async Task<IActionResult> Load([FromBody] Dictionary<string, string> jsonObject)
{
  // Initialize the PDF viewer object with memory cache object
  PdfRenderer pdfviewer = new PdfRenderer(_cache);
  MemoryStream stream = new MemoryStream();
  object jsonResult = new object();
  if (jsonObject != null && jsonObject.ContainsKey("document"))
  {
    if (bool.Parse(jsonObject["isFileName"]))
    {
      string objectName = jsonObject["document"];
      var config = LoadAppSettings();
      var client = GetAuthenticatedGraphClient(config);

      var request = client.Me.Drive.Root.Children.Request();
      string folderIdToSearch = string.Empty;
      var results = await request.GetAsync();

      var folder = results.FirstOrDefault(f => f.Name == folderName && f.Folder != null);
      if (folder != null)
      {
        // Save the matching folderId
        folderIdToSearch = folder.Id;
      }

      var folderRequest = client.Me.Drive.Items[folderIdToSearch].Children.Request();
      var folderContents = await folderRequest.GetAsync();

      string fileIdToDownload = string.Empty;
      var file = folderContents.FirstOrDefault(f => f.File != null && f.Name == objectName);
      if (file != null)
      {
        // Save the matching fileId
        fileIdToDownload = file.Id;
      }

      string fileIds = fileIdToDownload;
      var fileRequest = client.Me.Drive.Items[fileIdToDownload].Content.Request();

      using (var streamResponse = await fileRequest.GetAsync())
      {
        if (streamResponse != null)
        {
          streamResponse.Seek(0, SeekOrigin.Begin);
          await streamResponse.CopyToAsync(stream);
        }
      }
    }
    else
    {
      byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
       stream = new MemoryStream(bytes);
    }
  }
  jsonResult = pdfviewer.Load(stream, jsonObject);
  return Content(JsonConvert.SerializeObject(jsonResult));
}
  1. Open the appsettings.json file in the web service project, Add the following lines below the existing "AllowedHosts" configuration
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "TenantId": "Your_Tenant_ID",
  "applApplicationIdicationId": "Your_Application_ID",
  "FolderName": "Your_Folder_Name_To_Access_The_Files_In_Onedrive"
}

NOTE

Replace the placeholders with the actual values: Tenant ID, Application ID, and OneDrive folder name.

Step 4: Configure the PDF Viewer component

Set the serviceUrl to the web service endpoint (replace the localhost URL with the server URL). Set documentPath to the PDF file name to load from OneDrive. Ensure the document name exists in the OneDrive folder.

<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
import { provide } from "vue";

import {
  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
  ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';

// Replace the "localhost:44396" with the actual URL of the server
const serviceUrl = "https://localhost:44396/pdfviewer";
const documentPath = "PDF_Succinctly.pdf";

provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
  Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]);

</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
    </ejs-pdfviewer>
  </div>
</template>

<script>
import {
  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
  ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data() {
    return {
      // Replace the "localhost:44396" with the actual URL of the server
      serviceUrl: "https://localhost:44396/pdfviewer",
      documentPath: "PDF_Succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
      Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

NOTE

The following NuGet packages are required to use the previous code example

  • Microsoft.Identity.Client
  • Microsoft.Graph
  • Microsoft.Extensions.Configuration
  • Microsoft.Extensions.Configuration.FileExtensions
  • Microsoft.Extensions.Configuration.Json

Install these packages using the NuGet Package Manager in Visual Studio or Visual Studio Code.

View sample in GitHub