Pdf có sử dụng javascript không?

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.

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.

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

    
        
        
        
        
        
        
        
        
        
        
        
        
        
    
    
        


            

                

                    

                        
                            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
                                        
                                    
                                    
                                        
                                            Automatic Zoom
                                            Actual Size
                                            Fit Page
                                            Full Width
                                            
                                            50%
                                            75%
                                            100%
                                            125%
                                            150%
                                            200%
                                            300%
                                            400%
                                        
                                    
                                
                            
                        
                        

                            

                                

                                
                            
                        
                    
                

                
                    
                    
                    
                    
                

                

                    

                

                
            
 

            

                

                    

                        

                            
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
                        
                    
                
            
  

        
 
        

        
    

Cá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