Update index.html
Browse files- index.html +4 -155
index.html
CHANGED
|
@@ -7,159 +7,8 @@
|
|
| 7 |
<link rel="stylesheet" href="style.css" />
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
width: 100%;
|
| 15 |
-
background: #eee;
|
| 16 |
-
}
|
| 17 |
-
|
| 18 |
-
</style>
|
| 19 |
-
|
| 20 |
-
<script>
|
| 21 |
-
|
| 22 |
-
.container.mx-auto.flex.flex-col.h-screen
|
| 23 |
-
.flex.justify-between.my-4
|
| 24 |
-
h1.font-bold PDF Viewer
|
| 25 |
-
nav.nav.justify-content-end
|
| 26 |
-
a#prev.border.rounded.py-2.px-4.bg-blue-500(href="#") prev
|
| 27 |
-
a#next.border.rounded.py-2.px-4.bg-blue-500(href="#") next
|
| 28 |
-
a#download.border.rounded.py-2.px-4.bg-blue-500(href="#") download
|
| 29 |
-
div.flex-grow
|
| 30 |
-
canvas#pdfviewer
|
| 31 |
-
p Loading...
|
| 32 |
-
.pages.text-center.my-4
|
| 33 |
-
span.mr-2 Page
|
| 34 |
-
span#currentPage 0
|
| 35 |
-
span.mx-1 /
|
| 36 |
-
span#totalPages 0
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
toastr.options.progressBar = true;
|
| 41 |
-
|
| 42 |
-
const url = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
|
| 43 |
-
|
| 44 |
-
const pdfjsLib = window["pdfjs-dist/build/pdf"];
|
| 45 |
-
pdfjsLib.GlobalWorkerOptions.workerSrc =
|
| 46 |
-
"//mozilla.github.io/pdf.js/build/pdf.worker.js";
|
| 47 |
-
|
| 48 |
-
let loggedIn = true,
|
| 49 |
-
pdfDoc = null,
|
| 50 |
-
pageNum = 1,
|
| 51 |
-
pageRendering = false,
|
| 52 |
-
pageNumPending = null,
|
| 53 |
-
scale = 1,
|
| 54 |
-
canvas = document.getElementById("pdfviewer"),
|
| 55 |
-
ctx = canvas.getContext("2d");
|
| 56 |
-
|
| 57 |
-
/**
|
| 58 |
-
* Get page info from document, resize canvas accordingly, and render page.
|
| 59 |
-
* @param num Page number.
|
| 60 |
-
**/
|
| 61 |
-
function renderPage(num) {
|
| 62 |
-
pageRendering = true;
|
| 63 |
-
// Using promise to fetch the page
|
| 64 |
-
pdfDoc.getPage(num).then(function(page) {
|
| 65 |
-
const viewport = page.getViewport({scale});
|
| 66 |
-
canvas.height = viewport.height;
|
| 67 |
-
canvas.width = viewport.width;
|
| 68 |
-
|
| 69 |
-
// Render PDF page into canvas context
|
| 70 |
-
var renderContext = {
|
| 71 |
-
canvasContext: ctx,
|
| 72 |
-
viewport: viewport
|
| 73 |
-
};
|
| 74 |
-
var renderTask = page.render(renderContext);
|
| 75 |
-
|
| 76 |
-
// Wait for rendering to finish
|
| 77 |
-
renderTask.promise.then(function() {
|
| 78 |
-
pageRendering = false;
|
| 79 |
-
if (pageNumPending !== null) {
|
| 80 |
-
// New page rendering is pending
|
| 81 |
-
renderPage(pageNumPending);
|
| 82 |
-
pageNumPending = null;
|
| 83 |
-
}
|
| 84 |
-
});
|
| 85 |
-
});
|
| 86 |
-
|
| 87 |
-
// Update page counters
|
| 88 |
-
document.getElementById("currentPage").textContent = num;
|
| 89 |
-
}
|
| 90 |
-
|
| 91 |
-
/**
|
| 92 |
-
* If another page rendering in progress, waits until the rendering is
|
| 93 |
-
* finised. Otherwise, executes rendering immediately.
|
| 94 |
-
*/
|
| 95 |
-
function queueRenderPage(num) {
|
| 96 |
-
if (pageRendering) {
|
| 97 |
-
pageNumPending = num;
|
| 98 |
-
} else {
|
| 99 |
-
renderPage(num);
|
| 100 |
-
}
|
| 101 |
-
}
|
| 102 |
-
|
| 103 |
-
/**
|
| 104 |
-
* Asynchronously downloads PDF.
|
| 105 |
-
*/
|
| 106 |
-
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
|
| 107 |
-
pdfDoc = pdfDoc_;
|
| 108 |
-
document.getElementById("totalPages").textContent = pdfDoc.numPages;
|
| 109 |
-
|
| 110 |
-
// Initial/first page rendering
|
| 111 |
-
renderPage(pageNum || 1);
|
| 112 |
-
});
|
| 113 |
-
|
| 114 |
-
function onPrevPage() {
|
| 115 |
-
if (pageNum <= 1) {
|
| 116 |
-
return;
|
| 117 |
-
}
|
| 118 |
-
pageNum--;
|
| 119 |
-
queueRenderPage(pageNum);
|
| 120 |
-
}
|
| 121 |
-
document.getElementById("prev").addEventListener("click", onPrevPage);
|
| 122 |
-
|
| 123 |
-
function onNextPage() {
|
| 124 |
-
if (
|
| 125 |
-
(pageNum < 5) ||
|
| 126 |
-
loggedIn
|
| 127 |
-
) {
|
| 128 |
-
if (pageNum >= pdfDoc.numPages) {
|
| 129 |
-
return;
|
| 130 |
-
}
|
| 131 |
-
pageNum++;
|
| 132 |
-
queueRenderPage(pageNum);
|
| 133 |
-
} else {
|
| 134 |
-
toastr.error("You Must be Logged in to view more pages", "Sorry");
|
| 135 |
-
}
|
| 136 |
-
}
|
| 137 |
-
document.getElementById("next").addEventListener("click", onNextPage);
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
document.getElementById("download").addEventListener("click", (e) => {
|
| 141 |
-
if (loggedIn) {
|
| 142 |
-
toastr.success('You can download the Document', 'Ok!');
|
| 143 |
-
} else {
|
| 144 |
-
toastr.error("You Must be Logged in to Download this Document", "Sorry");
|
| 145 |
-
}
|
| 146 |
-
});
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
const loggedInClass = "bg-green-500";
|
| 150 |
-
const loggedOutClass = "bg-red-500";
|
| 151 |
-
$(".nav").prepend($("<a>", {href: "#"})
|
| 152 |
-
.text("Logged In")
|
| 153 |
-
.addClass("border py-2 px-4 rounded " + ((loggedIn)?loggedInClass:loggedOutClass))
|
| 154 |
-
.on("click", function(e) {
|
| 155 |
-
e.preventDefault();
|
| 156 |
-
if (loggedIn) {
|
| 157 |
-
$(this).removeClass(loggedInClass).addClass(loggedOutClass);
|
| 158 |
-
loggedIn = false;
|
| 159 |
-
} else {
|
| 160 |
-
$(this).removeClass(loggedOutClass).addClass(loggedInClass);
|
| 161 |
-
loggedIn = true;
|
| 162 |
-
}
|
| 163 |
-
}))
|
| 164 |
-
; </script></body>
|
| 165 |
</html>
|
|
|
|
| 7 |
<link rel="stylesheet" href="style.css" />
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
+
<div style="text-align:center">
|
| 11 |
+
<h4>Pdf viewer testing</h4>
|
| 12 |
+
<iframe src="https://docs.google.com/viewer?url=http://www.pdf995.com/samples/pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>
|
| 13 |
+
</div></body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 14 |
</html>
|