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.
128 lines
3.4 KiB
128 lines
3.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<title>PDF</title>
|
|
<script type="text/javascript" src="lib/pdf/pdf.min.js"></script>
|
|
<script type="text/javascript" src="lib/pdf/pdf.worker.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="preview">preview</div>
|
|
<div id="page_num">page_num</div>
|
|
<div id="out_type">out_type</div>
|
|
|
|
<script>
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcss.com/pdf.js/2.2.228/pdf.worker.min.js';
|
|
|
|
const preview = document.getElementById('preview');
|
|
const page_num = document.getElementById('page_num');
|
|
const out_type = document.getElementById('out_type');
|
|
|
|
let pdfFile, pdf, pageNum, context = preview.getContext('2d');
|
|
|
|
out_type.querySelectorAll('.button').forEach(function (btn) {
|
|
btn.onclick = function () {
|
|
out_type.querySelector('.primary').classList.remove('primary');
|
|
btn.classList.add('primary');
|
|
}
|
|
});
|
|
|
|
// 加载PDF文件
|
|
function loadPDF(file) {
|
|
pdfFile = file;
|
|
file_name.innerHTML = file.name;
|
|
|
|
let reader = new FileReader();
|
|
reader.onload = (e) => showPDF(e.target.result);
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
// 预览PDF
|
|
function showPDF(url) {
|
|
let loadingTask = pdfjsLib.getDocument(url);
|
|
loadingTask.promise.then(function (doc) {
|
|
pdf = doc;
|
|
pageNum = 1;
|
|
preview.hidden = false;
|
|
readerPage()
|
|
}, function (reason) {
|
|
alert(reason)
|
|
});
|
|
}
|
|
|
|
// 预览上一页
|
|
function prevPage() {
|
|
if (pageNum <= 1) {
|
|
return;
|
|
}
|
|
pageNum--;
|
|
readerPage()
|
|
}
|
|
|
|
//预览下一页
|
|
function nextPage() {
|
|
if (pageNum >= pdf.numPages) {
|
|
return;
|
|
}
|
|
pageNum++;
|
|
readerPage()
|
|
}
|
|
|
|
//渲染页面
|
|
function readerPage(callback) {
|
|
pdf.getPage(pageNum).then(function (page) {
|
|
let scale = 1.5;
|
|
let viewport = page.getViewport({ scale: scale });
|
|
|
|
preview.height = viewport.height;
|
|
preview.width = viewport.width;
|
|
|
|
let renderContext = {
|
|
canvasContext: context,
|
|
viewport: viewport
|
|
};
|
|
page.render(renderContext).promise.then(callback);
|
|
});
|
|
page_num.innerText = `页码 : ${pageNum} / ${pdf.numPages}`;
|
|
}
|
|
|
|
// 保存当前页
|
|
function save() {
|
|
let a = document.createElement('a');
|
|
let event = new MouseEvent('click');
|
|
let type = out_type.querySelector('.primary').innerText.toLowerCase();
|
|
a.download = pdfFile.name + '-' + pageNum + '.' + type;
|
|
a.href = preview.toDataURL(type === 'png' ? 'image/png' : 'image/jpeg');
|
|
a.dispatchEvent(event)
|
|
}
|
|
|
|
//保存全部页面
|
|
function saveAll() {
|
|
pageNum = 1;
|
|
savePage()
|
|
}
|
|
|
|
function savePage() {
|
|
if (pageNum > pdf.numPages) {
|
|
alert('全部保存成功');
|
|
return
|
|
}
|
|
|
|
readerPage(function () {
|
|
save();
|
|
pageNum++;
|
|
savePage();
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |