- Prerequisites
- How to use this PDF Viewer Docker image
- How to configure the distributed Redis Cache in this Docker image
Contact Support
Pdfviewer server docker image overview in EJ2 JavaScript Pdfviewer control
13 Mar 20257 minutes to read
The Syncfusion PDF Viewer control allows you to view, print, form-fill, and annotate PDF files in your web applications. This PDF Viewer control requires a server-side backend Web API service to render PDF contents.
This Docker image is the predefined Docker container of Syncfusion’s PDF Viewer backend. You can deploy it quickly to your infrastructure.
PDF Viewer is a commercial product, and it requires a valid license to use it in a production environment (request license or trial key).
PDF Viewer control is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms.
Prerequisites
Have Docker
installed in your environment:
-
On Windows, install
Docker for Windows
. -
On macOS, install
Docker for Mac
.
How to use this PDF Viewer Docker image
Step 1: Pull the pdfviewer-server image from Docker Hub.
docker pull syncfusion/pdfviewer-server
Step 2: Create the docker-compose.yml file with the following code in your file system.
version: '3.4'
services:
pdfviewer-server:
image: syncfusion/pdfviewer-server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
ports:
- "6001:80"
Step 3: In a terminal tab, navigate to the directory where you’ve placed the docker-compose.yml file and execute the following.
docker-compose up
Also, you can run the Docker container along with the license key using this docker run command.
docker run -d -p 6001:80 –e SYNCFUSION_LICENSE_KEY= YOUR_LICENSE_KEY syncfusion/pdfviewer-server:latest
Now the PDF Viewer server Docker instance runs in the localhost with the provided port number http://localhost:6001
. Open this link in the browser and navigate to the PDF Viewer Web API control http://localhost:6001/api/pdfviewer
. It returns the default get method response.
Step 4: Append the Docker instance running the URL (http://localhost:6001/api/pdfviewer)
to the service URL in the client-side PDF Viewer control. For more information about how to get started with PDF Viewer control, refer to this getting started page
.
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Essential JS 2</title>
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-pdfviewer/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-drawings/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inplace-editor/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<!-- Essential JS 2 PDF Viewer's global script -->
<script src="//cdn.syncfusion.com/ej2/ej2-pdfviewer/dist/global/ej2-pdfviewer.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<!--element which is going to render-->
<div id="container">
<div id="PdfViewer" style="height:500px;width:100%;">
</div>
</div>
<script>
// Initialize PDF Viewer component.
var pdfviewer = new ej.pdfviewer.PdfViewer({
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
serviceUrl: "http://localhost:6001/api/pdfviewer"
});
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation,ej.pdfviewer.Print);
//PDF Viewer control rendering starts
pdfviewer.appendTo('#PdfViewer');
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
How to configure the distributed Redis Cache in this Docker image
The PDF Viewer server library internally caches the loaded document instance and you can extend the cache option to a distributed cache environment. Please follow these steps to configure the Azure Cache for a Redis instance to the PDF Viewer server library using a Docker compose file.
Step 1: Create the Azure Cache for the Redis instance
and copy the connection string.
Step 2: Provide the connection string to the REDIS_CACHE_CONNECTION_STRING
environment variable in the pdfviewer-server docker-compose file. The default cache sliding expiration time is 10 minutes. You can also configure it by setting the value to the DOCUMENT_SLIDING_EXPIRATION_TIME
environment variable.
version: '3.4'
services:
pdfviewer-server:
image: syncfusion/pdfviewer-server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
REDIS_CACHE_CONNECTION_STRING: YOUR_REDIS_CACHE_CONNECTION_STRING
DOCUMENT_SLIDING_EXPIRATION_TIME: “20”
ports:
- "6001:80"
Refer to these getting started pages to create a PDF Viewer in Angular
, React
, Vue
, ASP.NET MVC
, ASP.NET Core
, and Blazor
.