You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.6 KiB
97 lines
2.6 KiB
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Document</title>
|
|
<script type="text/javascript" src="lib/pdf/pdf.min.js"></script>
|
|
<!-- <script type="text/javascript" src="lib/pdf/pdf.worker.min.js"></script> -->
|
|
|
|
|
|
<style type="text/css">
|
|
.lightbox {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 7;
|
|
opacity: 0.3;
|
|
display: block;
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
|
|
.pop {
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 894px;
|
|
margin-left: -447px;
|
|
z-index: 9;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
function showPdf() {
|
|
|
|
var container = document.getElementById("container");
|
|
container.style.display = "block";
|
|
|
|
const input = document.createElement('input')
|
|
input.setAttribute('type', 'file')
|
|
input.setAttribute('accept', '.pdf')
|
|
input.click()
|
|
input.onchange = (e) => {
|
|
const file = e.target.files[0]
|
|
const reader = new FileReader()
|
|
reader.onload = (a) => {
|
|
var blob = new Blob([a.target.result], {
|
|
type: 'application/pdf;chartset=UTF-8'
|
|
})
|
|
let fileURL = window.URL.createObjectURL(blob)
|
|
console.log(blob);
|
|
console.log(fileURL);
|
|
|
|
// pdfjsLib.workerSrc = 'lib/pdf/pdf.worker.min.js';
|
|
pdfjsLib.getDocument(fileURL).then(function (pdf) {
|
|
pdf.getPage(1).then(function (page) {
|
|
console.log(pdf);
|
|
console.log(page);
|
|
var viewport = page.getViewport(4);
|
|
console.log(viewport);
|
|
var canvas = document.getElementById('the-canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
|
|
canvas.height = viewport.height;
|
|
canvas.width = viewport.width;
|
|
page.render({
|
|
canvasContext: context,
|
|
viewport: viewport
|
|
});
|
|
canvas.onload = (w) => {
|
|
console.log(canvas.toDataURL());
|
|
console.log('1213');
|
|
console.log(w);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
reader.readAsArrayBuffer(file)
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>
|
|
<div id="container" style="display: none;">
|
|
<div class="lightbox"></div>
|
|
<div id="pop" class="pop">
|
|
<canvas id="the-canvas"></canvas>
|
|
</div>
|
|
|
|
<canvas width="300" height="90"></canvas>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html> |