Hướng dẫn javascript document viewer - trình xem tài liệu javascript

Đã đăng vào thg 11 22, 2017 3:44 SA 1 phút đọc 1 phút đọc

Chào các bạn, nếu các bạn đang thiết kế một trang web , và trên trang web của các bạn có chứa những tấm ảnh, hoặc cho người dùng upload ảnh của họ lên website của mình thì việc cho người dùng lựa chọn để xem ảnh ở chế độ riêng là một điều rất cần thiết. Nó vừa tạo cho người dùng cảm giác dễ chịu và vừa làm cho tấm ảnh trông được rõ ràng hơn.

Mình sẽ hướng dẫn các bạn sử dụng thư viện JS Viewer để nhúng vào website của các bạn.

1. Cài đặt

            npm install viewerjs

            Include files:
                
                
            Nếu là ứng dụng Rails, các bạn hãy require chúng vào application.js và application.css

2. Sử dụng

// View one image
var viewer = new Viewer(document.getElementById('image'), options);

// View some images
var viewer = new Viewer(document.getElementById('images'), options);

Hoặc chỉ đơn giản là

$('.image').viewer();

Các bạn có thể thêm các option vào để phù hợp với nhu cầu sử dụng của bản thân:

$('.image').viewer({
    navbar :false
    some option here
});

Vậy là xong rồi, chúc các bạn có trình view ảnh đẹp =)).

Các bạn có thể xem thêm các option tại Github của thư viện này nhé : https://github.com/fengyuanchen/viewerjs

All rights reserved

Đã đăng vào thg 6 22, 2018 6:47 SA 0 phút đọc 0 phút đọc

Dự án mình đang làm khách hàng có yêu cầu frontend dev phải preview file pdf, mình thấy thư viện này khá hay, support cả custom giao diện xem luôn.

PDF.js

Hello World example: JSFiddle

HTML

<script src="//mozilla.github.io/pdf.js/build/pdf.js">script>

<h2>PDF.js 'Hello, world!' exampleh2>

<canvas id="the-canvas">canvas>

JavaScript

// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';

// Loaded via 
							 

								
							  
														
							

								

																  programming
																  javascript
																  pdf.js viewer
																  pdf.js cdn
																  Pdf js jsfiddle
																  PDF js documentation
																  Pdf js React
																
							
							
							
							

                                    Reply
                                    3
                                    0
                                     Chia sẻ