Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js

8/03/2019 10:48:00 pm Tags:

Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js


Kali kita membuat preview file pdf ketika akan di upload ke server menggunakan plugin mengunakan PDF Worker.js, PDF Option.js, PDF.js


Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js
Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js

Langsung saja tanpa pikir panjang di source codenya.

Kodenya :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <link rel="stylesheet" type="text/css" href="pdf-preview/pdf.style.css">
  6. </head>
  7. <body>
  8. <div id="preview-container">
  9.     <button id="upload-dialog">Pilih PDF</button>
  10.     <input type="file" id="pdf-file" name="pdf" accept="application/pdf" />
  11.     <div id="pdf-loader">Loading Preview ..</div>
  12.     <canvas id="pdf-preview" width="250"></canvas>
  13.     <span id="pdf-name"></span>
  14.     <button id="upload-button">Upload</button>
  15.     <button id="cancel-pdf">Cancel</button>
  16. </div>
  17. <script src="pdf-preview/pdf.js"></script>
  18. <script src="pdf-preview/pdf.worker.js"></script>
  19. <script src="pdf-preview/pdf.option.js"></script>
  20. </body>
  21. </html>


Hasilnya Seperti:

Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js
Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js

Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Hore.... Done....
Previous Post
Next Post
Related Posts