100K+
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 JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms.
Have Docker installed in your environment:
On Windows, install Docker for Windows.
On macOS, install Docker for Mac.
Step 1: Pull the pdfviewer-server image from Docker Hub.
docker pull 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: "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>
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.
Content type
Image
Digest
sha256:2b0a48282…
Size
137.3 MB
Last updated
3 days ago
docker pull syncfusion/pdfviewer-serverPulls:
61
Apr 14 to Apr 20