功能
对上传的文件实现预览功能，文件类型为图片或pdf。
效果展示
实现
-
引入 jQuery：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -
引入 Bootstrap 的 CSS 和 JavaScript：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -
确保引入顺序正确：
jQuery 应在 Bootstrap 之前加载。
完整的 HTML 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<!-- 这是一个模板，用于生成缩略图。`{{ d.path }}` 是数据占位符，用于插入图像路径。当点击图像时，会调用 `previewImg` 函数。-->
<script type="text/html" id="pic">
<img src="{{ d.path }}" onclick="previewImg(this)">
</script>
<script>
function previewImg(obj) {
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
var data = obj.src;
var fileExtension = data.split('.').pop().toLowerCase();
if (fileExtension === 'pdf') {
showPdfPreview(data);
} else {
showImagePreview(data);
}
}
function showPdfPreview(pdfUrl) {
var modalHtml = `
<div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="pdfModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="pdfModalLabel">PDF 预览</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<canvas id="pdf-canvas" style="width: 100%; height: auto;"></canvas>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>`;
$(document.body).append(modalHtml);
var loadingTask = pdfjsLib.getDocument(pdfUrl);
loadingTask.promise.then(function(pdf) {
return pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale });
var canvas = document.getElementById('pdf-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
$('#pdfModal').modal('show');
});
});
$('#pdfModal').on('hidden.bs.modal', function() {
$(this).remove();
});
}
function showImagePreview(imageUrl) {
var img = new Image();
img.src = imageUrl;
img.onload = function() {
var imgHtml = `<img src="${imageUrl}" style="max-width: 100%; height: auto;" />`;
layer.open({
type: 1,
shade: 0.8,
offset: 'auto',
area: ['1200px', '600px'],
shadeClose: true,
scrollbar: false,
title: "图片预览",
btn: ['打印'],
content: imgHtml,
yes: function(index) {
layer.close(index);
printThisWindow(imageUrl);
},
});
};
}
function printThisWindow(url) {
var printWindow = window.open(url, '_blank');
printWindow.print();
}
</script>
</body>
</html>
注解
previewImg 函数
- 该函数接收一个图像元素作为参数。
- 使用
pdfjsLib.GlobalWorkerOptions.workerSrc设置 PDF.js 的 worker 文件路径。 - 通过
obj.src获取图像的路径，并检查文件扩展名。 - 如果文件是 PDF，则调用
showPdfPreview函数；否则，调用showImagePreview函数。
showPdfPreview 函数
- 该函数接收一个 PDF 文件的 URL 作为参数。
- 生成一个包含 Canvas 元素的 Bootstrap 模态框 HTML 片段，并将其插入到文档中。
- 使用 PDF.js 加载 PDF 文件并渲染第一页到 Canvas 中。
- 显示模态框，并在模态框关闭时移除它。
showImagePreview 函数
- 该函数接收一个图像 URL 作为参数。
- 创建一个新的 Image 对象，并设置其
src属性为图像 URL。 - 当图像加载完成后，生成一个包含该图像的 HTML 片段。
- 使用
layer.open显示一个包含图像的模态框。模态框有一个打印按钮，点击按钮时调用printThisWindow函数。
printThisWindow 函数
- 该函数接收一个 URL 作为参数。
- 打开一个新窗口加载 URL，并调用
print方法打印内容。
