Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

848600 : GitHub sample changed as standalone PDF Viewer #5

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

848600 : GitHub sample changed as standalone PDF Viewer #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 50 additions & 56 deletions Annotations/How to change the rectangle annotation's border color/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,63 @@
<html>
<head>
<!--Refer scripts and styles from CDN-->
<script
src="https://cdn.syncfusion.com/ej2/20.2.48/dist/ej2.min.js"
type="text/javascript">
</script>

<link
href="https://cdn.syncfusion.com/ej2/20.2.48/material.css"
rel="stylesheet"/>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Essential JS 2</title>
<!-- Essential JS 2 material theme -->
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet">

<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>

<style>
body {
touch-action: none;
}
</style>
</head>
<body>
<div class="control-section">
<div class="content-wrapper">
<button id="red">Change Color(Blue)</button>
<button id="green">Change Color(Green)</button>
<button id="addRectangleAnnotation">Add Rectangle Annotation</button>
<!--Add the PDF Viewer-->
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
</div>
</div>
<script>
var viewer = new ej.pdfviewer.PdfViewer({
//Sets the document path for initial loading.
documentPath: 'PDF_Succinctly.pdf',
serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer',
<!-- Essential JS 2 PDF Viewer's script -->
<script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript">
</script>
</head>
<body>
<div class="control-section">
<div class="content-wrapper">
<button id="red">Change Color(Blue)</button>
<button id="green">Change Color(Green)</button>
<button id="addRectangleAnnotation">Add Rectangle Annotation</button>
<!--Add the PDF Viewer-->
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
</div>
</div>
<script>
var viewer = new ej.pdfviewer.PdfViewer({
//Sets the document path for initial loading.
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
});
//Inject the dependencies required to render the PDF Viewer.
ej.pdfviewer.PdfViewer.Inject(
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner
);
viewer.appendTo('#pdfViewer');
//Method to change the rectangle annotation's stroke color as blue.
document.getElementById("red").addEventListener('click', function(){
viewer.rectangleSettings.strokeColor = "blue";
});
viewer.rectangleSettings.strokeColor = "blue";
});
//Method to change the rectangle annotation's stroke color as green.
document.getElementById("green").addEventListener('click', function(){
viewer.rectangleSettings.strokeColor = "green";
});
viewer.rectangleSettings.strokeColor = "green";
});
//Method to set rectangle annotation mode.
document.getElementById("addRectangleAnnotation").addEventListener('click', function(){
viewer.annotation.setAnnotationMode('Rectangle');
});
</script>
</body>
viewer.annotation.setAnnotationMode('Rectangle');
});
</script>
</body>
</html>
104 changes: 49 additions & 55 deletions Download/Download the pdf document before closing window or refresh/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,58 @@
<html>
<head>
<!--Refer scripts and styles from CDN-->
<script
src="https://cdn.syncfusion.com/ej2/20.2.48/dist/ej2.min.js"
type="text/javascript">
</script>

<link
href="https://cdn.syncfusion.com/ej2/20.2.48/material.css"
rel="stylesheet"/>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Essential JS 2</title>
<!-- Essential JS 2 material theme -->
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet">

<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>

<style>
body {
touch-action: none;
}
</style>
</head>
<body>
<div class="control-section">
<div class="content-wrapper">
<!--Add the PDF Viewer-->
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
</div>
</div>
<script>
var viewer = new ej.pdfviewer.PdfViewer({
//Sets the document path for initial loading.
documentPath: 'PDF_Succinctly.pdf',
serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer',
<!-- Essential JS 2 PDF Viewer's script -->
<script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript">
</script>
</head>
<body>
<div class="control-section">
<div class="content-wrapper">
<!--Add the PDF Viewer-->
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
</div>
</div>
<script>
var viewer = new ej.pdfviewer.PdfViewer({
//Sets the document path for initial loading.
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
});
//Inject the dependencies required to render the PDF Viewer.
ej.pdfviewer.PdfViewer.Inject(
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner
);
//Method to perform download action on window refresh or closing the window.
window.onbeforeunload = function(e){
var message = "Do you want to close the page?"
e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
viewer.download();
}
}
var message = "Do you want to close the page?"
e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
viewer.download();
}
}
viewer.appendTo('#pdfViewer');
</script>
</body>
</script>
</body>
</html>
110 changes: 52 additions & 58 deletions Download/Get the base64 string while downloading/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,66 @@
<html>
<head>
<!--Refer scripts and styles from CDN-->
<script
src="https://cdn.syncfusion.com/ej2/20.2.48/dist/ej2.min.js"
type="text/javascript">
</script>

<link
href="https://cdn.syncfusion.com/ej2/20.2.48/material.css"
rel="stylesheet"/>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Essential JS 2</title>
<!-- Essential JS 2 material theme -->
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet">

<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>

<style>
body {
touch-action: none;
}
</style>
</head>
<body>
<div class="control-section">
<div class="content-wrapper">
<button id="click">Download</button>
<button id="load">Load</button>
<!--Add the PDF Viewer-->
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
</div>
</div>
<script>
var viewer = new ej.pdfviewer.PdfViewer({
//Sets the document path for initial loading.
documentPath: 'PDF_Succinctly.pdf',
serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer',
<!-- Essential JS 2 PDF Viewer's script -->
<script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript">
</script>
</head>
<body>
<div class="control-section">
<div class="content-wrapper">
<button id="click">Download</button>
<button id="load">Load</button>
<!--Add the PDF Viewer-->
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
</div>
</div>
<script>
var viewer = new ej.pdfviewer.PdfViewer({
//Sets the document path for initial loading.
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
});
//Inject the dependencies required to render the PDF Viewer.
ej.pdfviewer.PdfViewer.Inject(
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner
);
viewer.appendTo('#pdfViewer');

var pdfstream;
document.getElementById('click').addEventListener('click', function () {
viewer.download();
viewer.downloadEnd = function (args) {
console.log(args);
pdfstream = args.downloadDocument;
//Prints the document as base64 string in the console window.
console.log(pdfstream);
};
viewer.download();
viewer.downloadEnd = function (args) {
console.log(args);
pdfstream = args.downloadDocument;
//Prints the document as base64 string in the console window.
console.log(pdfstream);
};
});

document.getElementById('load').addEventListener('click', function () {
//Load the base64 string in the viewer.
viewer.load(pdfstream, null);
//Load the base64 string in the viewer.
viewer.load(pdfstream, null);
});
</script>
</body>
</script>
</body>
</html>
Loading