Embedded Analytics: HTML/JS to Display a PDF via S3 Bucket with CORS and Pagination

Introduction

This document explains how to display a PDF file hosted on an Amazon S3 bucket using PDF.js with CORS enabled and pagination implemented. The solution is divided into the following steps:

  1. Set up an Amazon S3 bucket and configure CORS.
  2. Upload the PDF file to the S3 bucket.
  3. Create an HTML page that uses PDF.js to display the PDF file with pagination.

Step 1: Set up an Amazon S3 bucket and configure CORS

  1. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.
  2. Create a new S3 bucket or choose an existing one that will host your PDF files.
  3. Select the bucket and navigate to the "Permissions" tab, then click "CORS configuration."
  4. Add the following CORS configuration to the editor and click "Save":
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

This configuration allows any origin to make GET requests to your S3 bucket. You can replace the wildcard (*) in “AllowedOrigin" with your specific website's origin to restrict access to your domain only.

Step 2: Upload the PDF file to the S3 bucket

  1. Navigate to your S3 bucket in the AWS Management Console.
  2. Upload the PDF file that you want to display on your website.
  3. Make the PDF file publicly accessible by setting the "Read object" permission for "Everyone" in the object's permission settings.

Step 3: Create an HTML page that uses PDF.js to display the PDF file with pagination

Create an HTML file and paste the following code into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display PDF from S3 Bucket with CORS and Pagination</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script>
    <style>
        #navigation {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <!-- Navigation buttons and page counter -->
    <div id="navigation">
        <button id="prevPage" disabled>Previous</button>
        <span id="currentPage">1</span> / <span id="totalPages">1</span>
        <button id="nextPage" disabled>Next</button>
    </div>
    <!-- Canvas to display the PDF -->
    <canvas id="pdfCanvas"></canvas>
    <script>
        // Replace this URL with the public URL of your PDF file in the S3 bucket
        const pdfUrl = 'https://your-public-s3-bucket-url.s3.amazonaws.com/your-pdf-object-key';

        const pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';

        let pdfDoc = null;
        let pageNum = 1;
        const scale = 1.5;

        // Function to render a specific page of the PDF
        function renderPage(num) {
            pdfDoc.getPage(num).then(function(page) {
                const viewport = page.getViewport({scale: scale});

                const canvas = document.getElementById

Alternative Cloud Storage Solutions

There are several other cloud storage options that can be used to host the PDF files for this solution. Some popular alternatives to Amazon S3 include:

  1. Google Cloud Storage: To setup storage using CORS refer to the official documentation.
  2. Microsoft Azure Blob Storage: To setup storage using CORS refer to the official documentation.

When using any of these alternative cloud storage services, you would need to modify the pdfUrl variable in the provided HTML code to point to the public URL of your PDF file in the chosen storage service.

Storing the PDF Locally

To do this, you would need to upload the PDF file to your server and make it accessible through a URL. The process might vary depending on your server's configuration and the web server software you are using (e.g., Apache, Nginx, IIS). Here are general instructions for hosting the PDF file locally:

  1. Upload the PDF file to your server: Choose a directory on your server where you want to store the PDF file, and upload it there. This could be a directory within your web server's document root (e.g., public_html, www, htdocs, etc.) or a custom directory you have configured.
  2. Configure your web server to serve the PDF file: Make sure your web server is configured to serve files from the directory where you uploaded the PDF file. This is typically done through the web server's configuration files. For example, if you are using Apache, you might have a configuration like this in your httpd.conf or a .htaccess file: java <Directory "/path/to/your/pdf/directory"> Require all granted </Directory> For Nginx, you might have a configuration like this in your nginx.conf: java location /pdfs { root /path/to/your/pdf/directory; autoindex on; } Make sure to replace /path/to/your/pdf/directory with the actual path to the directory where you uploaded the PDF file. Consult your web server's documentation for details on serving files from a specific directory.
  3. Update the pdfUrl variable: Modify the pdfUrl variable in the provided HTML code to point to the public URL of your PDF file on your local server. This URL will depend on your server's configuration and the directory where you stored the PDF file. For example, if you stored the PDF file in a directory called pdfs within your document root, the URL might look like this: java const pdfUrl = 'https://your-domain.com/pdfs/your-pdf-file.pdf'; Replace your-domain.com with your server's domain name or IP address, and your-pdf-file.pdf with the name of the PDF file you uploaded to the server.