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ưởng 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ẻ 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.
#the-canvas {
border: 1px solid black;
direction: ltr;
}
Tiếp theo, bạn xây dựng một trang phân tích cục bộ và đánh số trang xem. Trong đoạn mã sau tôi đã sử dụng Lớp trong thư viện Bootstrap
Trang trước Trang sau Trang: /
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ẻ và phân trang.
var pdfData = atob[''];
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 = 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];
}
Tới đây trang của bạn có thể hiển thị nội dung của tệp PDF dưới dạng hình ảnh rồi
Ngoài ra, bạn cũng có thể thêm mã đoạn oncontextmenu="return false;"
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
Trước tiên bạn cần tải xuống bộ thư viện pdf. js before by way to. Khi tải về bạn sẽ thấy một số ví dụ cơ bản, không giống bản demo mà người ta đưa ra, bạn phải chỉnh css và kết hợp javascript pdf. js api mới được. Tuy nhiên trong bài viết này tôi đã sửa sẵn từ bản demo của nó nên các bạn chỉ việc tải về và sử dụng
Xây dựng HTML hiển thị Trình đọc PDF
Trước tiên bạn tạo tệp index.html với nội dung như sau
PDF.js viewer
var config = {
imageResourcesPath : './images/', // duong dan toi folder image
workerSrc : 'pdf.worker.js', // duong dan toi toi file pdf.worker.js
pdfFile : 'demo.pdf' // duong dan toi file pdf
};
Thumbnails
Document Outline
Attachments
Find:
Previous
Next
Highlight all
Match case
Presentation Mode
Open
Print
Download
Current View
Go to First Page
Go to Last Page
Rotate Clockwise
Rotate Counterclockwise
Enable hand tool
Document Properties…
Toggle Sidebar
Find
Previous
Next
Page:
Presentation Mode
Open
Print
Download
Current View
Tools
Zoom Out
Zoom In
More Information
Less Information
Close
Enter the password to open this PDF file:
Cancel
OK
File name: -
File size: -
Title: -
Author: -
Subject: -
Keywords: -
Creation Date: -
Modification Date: -
Creator: -
PDF Producer: -
PDF Version: -
Page Count: -
Close
#mozPrintCallback-shim {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999999;
display: block;
text-align: center;
background-color: rgba[0, 0, 0, 0.5];
}
#mozPrintCallback-shim[hidden] {
display: none;
}
@media print {
#mozPrintCallback-shim {
display: none;
}
}
#mozPrintCallback-shim .mozPrintCallback-dialog-box {
display: inline-block;
margin: -50px auto 0;
position: relative;
top: 45%;
left: 0;
min-width: 220px;
max-width: 400px;
padding: 9px;
border: 1px solid hsla[0, 0%, 0%, .5];
border-radius: 2px;
box-shadow: 0 1px 4px rgba[0, 0, 0, 0.3];
background-color: #474747;
color: hsl[0, 0%, 85%];
font-size: 16px;
line-height: 20px;
}
#mozPrintCallback-shim .progress-row {
clear: both;
padding: 1em 0;
}
#mozPrintCallback-shim progress {
width: 100%;
}
#mozPrintCallback-shim .relative-progress {
clear: both;
float: right;
}
#mozPrintCallback-shim .progress-actions {
clear: both;
}
Preparing document for printing...
0%
In file you note đoạn mã trên đầu thẻ
var config = {
imageResourcesPath : './images/', // duong dan toi folder image
workerSrc : 'pdf.worker.js', // duong dan toi toi file pdf.worker.js
pdfFile : 'demo.pdf' // duong dan toi file pdf
};
Bạn chú ý là chỉ đổi ba thông số trong biến cấu hình nhé, còn các file css và js mình sẽ đính kèm theoCách hiển thị PDF Reader trên website
Với đoạn mã HTML trên thì chiều rộng và chiều cao của trang sẽ là 100% nếu bạn không thể đưa nó vào trong một trang web bình thường được, thay vào đó bạn hoặc tạo một tệp hiển thị riêng, sau đó sử dụng iframe để nhúng . Như vậy bạn đã làm được chức năng đọc file pdf trực tuyến rồi đó
Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.
Lời kết
Nếu bạn đọc tài liệu của plugin này thì cũng có thể tự làm được nhưng mình nghĩ tại sao không dùng những cái có sẵn, ban chỉ cần tải về và tùy chỉnh lại y như phần 1 tôi đã trình bày thì việc đọc file pdf online bằng PDFReader . js không còn là khăn nữa