Hôm nay, mình sẽ giới thiệu với các bạn một cách kết hợp PHP và JS để viết một trang Web xem nội dung file PDF dưới dạng hình ảnh, mà người truy cập không thể tải file PDF về máy tính. Cách này mình lấy ý tưởng từ PDF JS và mình đã kết hợp PHP vào để thực hiện trong một dự án gần đây.
Trước tiên bạn cần đưa thư viện PDF JS vào thẻ <head> của trang và đoạn CSS định dạng thêm đường viền cho hình nội dung cho dễ nhìn.
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<style type="text/css">
#the-canvas {
border: 1px solid black;
direction: ltr;
}
</style>
Tiếp theo bạn xây dựng một bố cục phân trang và đánh số trang xem. Trong đoạn code sau tôi có dùng Class trong thư viện Bootstrap.
<div style="padding: 5px 10px 10px 10px;"> <button class="btn btn-primary btn-rounded" id="prev">Trang trước</button> <button class="btn btn-primary btn-rounded" id="next">Trang sau</button> <span>Trang: <input id="page_num" value="" onchange="onOfPage(this);" style="width: 40px; text-align: right;"/> / <span id="page_count"></span></span> </div> <canvas id="the-canvas"></canvas>
Sau cùng bạn thêm đoạn code sau, đoạn code dùng PHP đọc nội dung file đưa vào JS để hiển thị vào thẻ <canvas> và phân trang.
<?php
//Khai báo biến lấy nội dung file và encode base64
$getPDF = base64_encode(file_get_contents('example.pdf'));
?>
<script type="text/javascript">
var pdfData = atob('<?php echo $getPDF; ?>');
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = "//mozilla.github.io/pdf.js/build/pdf.worker.js";
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.2,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.oncontextmenu = function() {return false};
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
pdfDoc = pdf;
document.getElementById('page_count').textContent = pdf.numPages;
renderPage(pageNum);
}, function (reason) {
console.error(reason);
});
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
document.getElementById('page_num').value = num;
}
function queueRenderPage(num) {
if (pageRendering)
pageNumPending = num;
else
renderPage(num);
}
function onPrevPage() {
if(pageNum <= 1)
return;
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
function onNextPage() {
if (pageNum >= pdfDoc.numPages)
return;
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
function onOfPage(e) {
var num = parseInt(e.value);
if(Number.isInteger(num) == false)
return;
if(num > pdfDoc.numPages || num < 1)
return;
pageNum = num;
queueRenderPage(pageNum);
}
</script>
Tới đây trang của bạn có thể hiển thị nội dung của file PDF dưới dạng hình ảnh rồi.
Ngoài ra, bạn cũng có thể thêm đoạn code oncontextmenu="return false;" vào thẻ <body> để chặn người xem tải nội dung file hình về máy tính.
Bạn nào cảm thấy bài viết này hay thì hãy chia sẻ cho những bạn khác cần đến nhé. Chúc các bạn thành công!
Ngụy Kim Hưng