How to Create & Work with PDF Portfolios

By Apryse | 2023 Oct 13

7 min

Introduction

The ability to work with PDF Portfolios within the WebViewer was added in Apryse 10.4, which was released in mid-September 2023. In this short article we will look at what a Portfolio is, how to create one using Apryse, and how to view one within the Apryse WebViewer. We will also see why viewing these files can be disappointing in some other tools.

In this article we will:

Discuss what a PDF Portfolio is, why it is useful, and why it is not just a single large PDF.
Learn why not all PDF viewers are good at showing PDF Portfolios.
See how easy it is to create a new PDF Portfolio within the Apryse WebViewer.

What is a Portfolio?

PDF collections are defined within section 8.2.4 of the PDF 1.7 specification and were released as a feature known as PDF packages, (also known as PDF portfolios) within Adobe Acrobat in June 2008.They are also known as "portable collections" in the ISO 32000-2:2020 specification.

If you want to read more about PDF Portfolios then you can find a great article here.

Regardless of what they are called, this feature allows users to combine multiple files and formats into a single, cohesive PDF document. This made it easier to manage and present a collection of related documents or multimedia files in a more organized and visually appealing manner. Since then, PDF portfolios have been used within the legal system to bundle court documents together, by professionals to showcase their work, during the process of bidding for contracts, and in many other scenarios.

From the recipient’s point of view, they have a single PDF, but when they open it within a suitable viewer, they can see the many sub-documents within the PDF. These might be images or Word documents or Excel files, or other PDFs. In fact, the Portfolio can contain almost any kind of file. An important feature of Portfolios is that the documents within the Portfolio still exist as the original documents – they have not been converted into PDFs. This means they retain all their content and characteristics – they can still be downloaded and edited as required.

The big problem, though, is that not all PDF viewers support PDF Portfolios.

Before we look at viewing a PDF Portfolio, let’s look at the original way that the Apryse SDK provided to create them.

Creating a PDF Portfolio using the Apryse SDK.

The ability for the Apryse SDK to create PDF Portfolios on a server has been available for more than ten years. Furthermore, the code for doing this is included in the samples that can be downloaded from the Apryse website for multiple programming languages and for Linux, Windows and macOS.

As a very quick overview, a file can be added to a PDF Portfolio using the following code taken from the sample.

static void AddPackage(PDFDoc doc, string file, string desc)  
{ 
  NameTree files = NameTree.Create(doc, "EmbeddedFiles"); 
  FileSpec fs = FileSpec.Create(doc, file, true); 
  byte[] file1_name = System.Text.Encoding.UTF8.GetBytes(file); 
  files.Put(file1_name, fs.GetSDFObj()); 
  fs.GetSDFObj().PutText("Desc", desc); 
  Obj collection = doc.GetRoot().FindObj("Collection"); 
  if (collection == null) collection = doc.GetRoot().PutDict("Collection");
  // You could here manipulate any entry in the Collection dictionary.  
  // For example, the following line sets the tile mode for initial view mode 
  // Please refer to section '2.3.5 Collections' in PDF Reference for details. 
  collection.PutName("View", "T"); 
}

We will walk through the steps of creating a PDF Portfolio using an alternative method a little later in this article, but for now, let’s imagine we have used this code to create a PDF Portfolio that relates to a building development. It will include site maps, CAD drawings, an Excel spreadsheet and text and which has a beautifully crafted cover page. We then send the PDF Portfolio to someone that we want to impress.

PDF Portfolio Display Discrepancies in Various Viewers

If you take our Portfolio and open it in Chrome, then all that can be seen is the cover page. You have a single rather large file (as it contains many embedded documents) that contains nothing useful. That would be very disappointing.

Figure 1 - How a Portfolio PDF looks disappointing if viewed in the default Chrome viewer. Only the cover page is available.

In fact, this is an issue with all PDFium-based tools – they simply do not support Portfolios. As a result, the PDF Portfolio that we spent lots of thought creating, is just considered to be a single page, and the real content is not available.

Enhanced PDF Portfolio Display in Apryse WebViewer

At first sight, a similar result occurs with the Apryse WebViewer (here shown running within the Angular viewer sample, which can be downloaded from here, but there is also an online demo).

Figure 2 - The initial view of the same Portfolio in the Apryse WebViewer.

However, new in release 10.4, is an extra menu item for any file that is a Portfolio. To enable this feature, WebViewer must use fullAPI:true and the following code must be run:

instance.UI.enableFeatures([instance.UI.Feature.Portfolio]);

Clicking on this shows the names of the files that are included.

Figure 3 - the PDF Portfolio option. Click on this to see the embedded files.

Double clicking on any of these documents will cause it to appear in a new tab, whether it is a PDF, an Office document or an image.

Figure 4 - One of the embedded files, shown successfully within WebViewer. The same file content is not visible when the PDF is viewed in Chrome.

Right clicking on one of the embedded documents in the Portfolio shows the options that are available – we have already seen that it can be opened, but we can also rename, download or delete it. That is awesome. For example, an embedded Word document can be downloaded and edited within Word, although with the Apryse WebViewer’s ability to edit documents directly within the browser, there may not be much need for that!

Figure 5 - The options open for working with the embedded files.

We have already seen that we can create a Portfolio using the Apryse SDK working on the server. A new feature in WebViewer 10.4 is the ability to create a Portfolio directly within the browser. Documentation can be found here.

Figure 6 - The option to create a new PDF Portfolio directly within the browser.

Click on the Create PDF Portfolio menu item, and you will then be shown a dialog that allows you to upload files to the browser.

Figure 7- The dialog that allows files to be added to the PDF Portfolio.

Let’s add five files that relate to an imaginary building development. These include a Word document, an Excel spreadsheet, two PDFs and an image

Figure 8 - An example of five different files that will be embedded into the PDF Portfolio.

While there is the option to add further files, or to remove any of the existing ones, for now let’s just click on Create.

The portfolio will be created with a default name of ‘Document 1’ and with a default cover page. In a moment we will see how we can change this, but for now let’s just look at what has been created. – a single file that contains other files embedded within it.

Figure 9 - The initial view of the new PDF Portfolio, showing the default cover page.

Downloading and Renaming a Portfolio

At the moment the Portfolio file exists only in the browser. Open the top left menu and click on Download.

Figure 10 - The Download menu option.

Once downloaded, you can rename the file to whatever you prefer. In my case I renamed it as ProjectPortfolio.pdf

Figure 11 - The newly created PDF Portfolio after renaming.

Adding a Custom Cover Page to a PDF Portfolio

Open the Portfolio file in WebViewer again. We have the files embedded, but we still want to replace the cover page.

We can do this by clicking on the Thumbnails option for the cover page. Then clicking on the on the three dots that show more options. Now click on Replace.

Figure 12 - How to replace the default cover page for the PDF Portfolio.

This will allow you to choose a file or a URL (for example for an S3 bucket).

In this case choose a PowerPoint presentation and press Replace

Figure 13 - Selecting a new file, in this case a PowerPoint presentation to be the new front cover of the PDF Portfolio.

The Portfolio will now have the cover page that you want.

Figure 14 - The PDF Portfolio after replacing the cover page.

Users can then click on each document to see the content of each of the contained documents as we have previously seen.

Figure 15 - An example of a file that is embedded within the PDF Portfolio.

Conclusion

With the introduction of Portfolio support within the Apryse WebViewer, a whole new area of functionality has been made available. Documents can be embedded into PDFs, and subsequently viewed, or extracted as necessary by users.

Add this to the powerful document editing ability that has long been available within WebViewer and you have a truly powerful in-browser PDF and Office document handling solution.

When you are ready to get started, see the documentation for the WebViewer. Don’t forget, you can also reach out to us on Discord if you have any issues.