Getting Started with the PDFViewer
This guide demonstrates how to get up and running with the Kendo UI for jQuery PDFViewer.
After the completion of this guide, you will be able to achieve the following end result:
<div id="pdfViewer"></div>
<script>
$.when(
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
)
.done(function () {
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
}).then(function(){
$("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
},
width: "100%",
height: 700,
scale: 1.5
})
})
</script>
1. Create an Empty Div Element
First, create a <div> element on the page—it will serve as the main container of the PDFViewer component.
<div id="pdfViewer"></div>
2. Include Necessary Files
When you use the pdfjsProcessing option to preview a file, the PDF.js library must be included.
<div id="pdfViewer"></div>
<script>
$.when(
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
)
.done(function () {
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
}).then(function(){
// initialize the PDFViewer here
})
</script>
3. Initialize the PDFViewer
In this step, you will initialize the PDFViewer from the <div> element. All settings of the PDFViewer will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<div id="pdfViewer"></div>
<script>
// Target the div element by using jQuery and then call the kendoPDFViewer() method.
$.when(
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
)
.done(function () {
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
}).then(function(){
$("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
}
});
})
</script>
4. Width and Height of the PDFViewer
The code below shows how you can define the width and height of the PDFViewer.
<div id="pdfViewer"></div>
<script>
$.when(
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
)
.done(function () {
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
}).then(function(){
$("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
},
width: "100%",
height: 700,
});
})
</script>
5. Set Default Scale
The scale configuration allows you to change the default scale of the document's pages.
<div id="pdfViewer"></div>
<script>
$.when(
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
)
.done(function () {
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
}).then(function(){
$("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
},
width: "100%",
height: 700,
scale: 1.5
});
})
</script>