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é : //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

PDF.js 'Hello, world!' example

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  tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

// Asynchronous download of PDF
var loadingTask = pdfjsLib.getDocument[url];
loadingTask.promise.then[function[pdf] {
  console.log['PDF loaded'];
  
  // Fetch the first page
  var pageNumber = 1;
  pdf.getPage[pageNumber].then[function[page] {
    console.log['Page loaded'];
    
    var scale = 1.5;
    var viewport = page.getViewport[scale];

    // Prepare canvas using PDF page dimensions
    var canvas = document.getElementById['the-canvas'];
    var context = canvas.getContext['2d'];
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    var renderTask = page.render[renderContext];
    renderTask.then[function [] {
      console.log['Page rendered'];
    }];
  }];
}, function [reason] {
  // PDF loading error
  console.error[reason];
}];

Hello World using base64 encoded PDF JSFiddle

Previous/Next example JSFiddle

Custom Viewer Demo

//mozilla.github.io/pdf.js/examples/

//github.com/mozilla/pdf.js

All rights reserved