https://www.jqueryscript.net/other/Base64-PDF-Viewer-Easy-PDF.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="js/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="js/jqueryui/1.12.1/themes/blitzer/jquery-ui.css">
<script src="js/pdfjs/2.0.943/build/pdf.js"></script>
<script src="js/pdfjs/2.0.943/build/pdf.worker.js"></script>
<script src="Scripts/easyPDF.js"></script>
<title>jQuery Easy-PDF: Base64 PDF Viewer Demo</title>
<style>
body,*{ font-family: 'Roboto'; }
</style>
</head>
<body>
<h1>jQuery Easy-PDF: Base64 PDF Viewer Demo</h1>
</div>
<button id="pdf">View PDF</button>
<div id="content"></div>
<script>
$('#pdf').click(function () {
base = '<%=base64String%>'//geovindu,Geovin Du 'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
// 'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
// 'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
// 'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
// 'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
// 'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
// 'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
// 'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
// 'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
// 'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
// 'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
// 'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
// 'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G';
easyPDF(base, "jQueryScript.Net")
});
</script>
</body>
</html>
//2022/08/20
//geovindu,Geovin Du
function easyPDF(_base64, _title) {
// HTML definition of dialog elements
var dialog = '<div id="pdfDialog" title="'+_title+'">'+
'<label>Page: </label><label id="pageNum"></label><label> of </label><label id="pageLength"></label>'+
'<canvas id="pdfview"></canvas>'+
'</div>';
$("div[id=pdfDialog]").remove();
$(document.body).append(dialog);
// We need the javascript object of the canvas, not the jQuery reference
var canvas = document.getElementById('pdfview');
// Init page count
var page = 1;
// Dialog definition
$( "#pdfDialog" ).dialog({
// Moves controls to top of dialog
open: function (event, ui) {
$(this).before($(this).parent().find('.ui-dialog-buttonpane'));
},
width: ($(window).width() / 2),
modal: true,
position: {
my: "top",
at: "top",
of: window,
collision: "none"
},
buttons: {
"Back": {
click: function () {
RenderPDF(-1)
},
text: 'Previous',
},
"Next": {
click: function () {
RenderPDF(1)
},
text: 'Next',
},
"Confirm": {
click: function () {
$(this).dialog("close");
$("#pdfDialog").remove()
},
text: 'Close',
}
}
});
// Init page number and the document
$('#pageNum').text(page);
RenderPDF(0);
// PDF.js control
function RenderPDF(pageNumber) {
var pdfData = atob(_base64);
pdfjsLib.disableWorker = true;
// Get current global page number, defaults to 1
displayNum = parseInt($('#pageNum').html())
pageNumber = parseInt(pageNumber)
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
// Gets total page length of pdf
size = pdf.numPages;
$('#pageLength').text(size);
// Handling for changing pages
if(pageNumber == 1) {
pageNumber = displayNum + 1;
}
if(pageNumber == -1) {
pageNumber = displayNum - 1;
}
if(pageNumber == 0) {
pageNumber = 1;
}
// If the requested page is outside the document bounds
if(pageNumber > size || pageNumber < 1) {
throw "bad page number";
}
// Changes the cheeky global to our valid new page number
$('#pageNum').text(pageNumber)
pdf.getPage(pageNumber).then(function(page) {
var scale = 2.0;
var viewport = page.getViewport(scale);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
}).catch(e => {});
}
}
标签：jQuery,function,Viewer,pageNumber,dialog,var,PDF,page From： https://www.cnblogs.com/geovindu/p/16607086.html