Open PDF from Box cloud storage in Vue

28 Feb 20268 minutes to read

Follow these steps to load a PDF from Box cloud storage using the server-backed PDF Viewer.

Step 1: Set up a Box developer account and create a Box application

Create a developer account and Box application in the Box Developer Console. Note the Client ID and Client Secret. Use OAuth 2.0 to authenticate the application.

Step 2: Create a PDF Viewer sample in Vue

Start by following the PDF Viewer getting started guide for Vue to create a simple PDF Viewer sample. This provides the basic setup for the PDF Viewer component.

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. Refer to this link for instructions on how to create a web service project.

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

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

using Box.V2;
using Box.V2.Auth;
using Box.V2.Config;
using Box.V2.Models;
  1. Add the following private fields and constructor parameters to the PdfViewerController class. In the constructor, assign configuration values to the corresponding fields.
private IConfiguration _configuration;
public readonly string _accessToken;
public readonly string _clientID;
public readonly string _clientSecret;
public readonly string _folderID;

public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
{
  _hostingEnvironment = hostingEnvironment;
  _cache = cache;
  _configuration = configuration;
  _accessToken = _configuration.GetValue<string>("AccessToken");
  _clientID = _configuration.GetValue<string>("ClientID");
  _clientSecret = _configuration.GetValue<string>("ClientSecret");
  _folderID = _configuration.GetValue<string>("FolderID");
}
  1. Modify the Load() method to load PDF files from Box cloud storage.
[HttpPost("Load")]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
[Route("[controller]/Load")]
// Post action for loading the PDF document
public async Task<IActionResult> Load([FromBody] Dictionary<string, string> jsonObject)
{
  // Initialize the PDF viewer object with the 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"];

      // Initialize the Box API client with the authentication credentials
      var auth = new OAuthSession(_accessToken, "YOUR_REFRESH_TOKEN", 3600, "bearer");
      var config = new BoxConfigBuilder(_clientID, _clientSecret, new Uri("http://boxsdk")).Build();
      var client = new BoxClient(config, auth);

      // Download the file from Box storage
      var items = await client.FoldersManager.GetFolderItemsAsync(_folderID, 1000, autoPaginate: true);
      var files = items.Entries.Where(i => i.Type == "file");

      // Filter the files based on the object name
      var matchingFile = files.FirstOrDefault(file => file.Name == objectName);

      // Fetch the file from Box storage by its name
      var fileStream = await client.FilesManager.DownloadAsync(matchingFile.Id);
      stream = new MemoryStream();
      await fileStream.CopyToAsync(stream);

      // Reset the position to the beginning of the stream
      stream.Position = 0;
    }
    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, and add the following lines below the existing "AllowedHosts" configuration.
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "AccessToken": "Your_Box_Storage_Access_Token",
  "FolderID": "Your_Folder_ID",
  "ClientID": "Your_Box_Storage_ClientID",
  "ClientSecret": "Your_Box_Storage_ClientSecret"
}

NOTE

Replace the placeholders with the actual Box values: Access Token, Folder ID, Client ID, and Client Secret.

Step 4: Configure the Vue 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 Box cloud storage. Ensure the document name exists in the Box 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 "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 "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 Box.V2.Core NuGet package must be installed in the web service project to use the Box SDK.

NOTE

Replace PDF_Succinctly.pdf with the actual document name to load from Box cloud storage. Ensure the specified document name exists in the configured Box folder and is passed to the documentPath property of the PDF Viewer component.

View sample in GitHub