Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io

Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io

Kali kita membuat preview file pdf ketika akan di upload ke server. Ok langsung aja ke tkp


Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io
Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io

Langsung saja tanpa pikir panjang di source codenya

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

Kodenya :

  1. <input type="file" id="myPdf" /><br>
  2. <canvas id="pdfViewer" ></canvas>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5. document.getElementById("myPdf").value = "";
  6. })
  7. // Loaded via <script> tag, create shortcut to access PDF.js exports.
  8. var pdfjsLib = window['pdfjs-dist/build/pdf'];
  9. // The workerSrc property shall be specified.
  10. pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
  11. $("#myPdf").on("change", function(e){
  12. var file = e.target.files[0]
  13. if(file.type == "application/pdf"){
  14. var fileReader = new FileReader();
  15. fileReader.onload = function() {
  16. var pdfData = new Uint8Array(this.result);
  17. // Using DocumentInitParameters object to load binary data.
  18. var loadingTask = pdfjsLib.getDocument({data: pdfData});
  19. loadingTask.promise.then(function(pdf) {
  20. console.log('PDF loaded');
  21.  
  22. // Fetch the first page
  23. var pageNumber = 1;
  24. pdf.getPage(pageNumber).then(function(page) {
  25. console.log('Page loaded');
  26.  
  27. var scale = 0.3;
  28. var viewport = page.getViewport({scale: scale});
  29. // Prepare canvas using PDF page dimensions
  30. var canvas = $("#pdfViewer")[0];
  31. var context = canvas.getContext('2d');
  32. canvas.height = viewport.height;
  33. canvas.width = viewport.width;
  34. // Render PDF page into canvas context
  35. var renderContext = {
  36. canvasContext: context,
  37. viewport: viewport
  38. };
  39. var renderTask = page.render(renderContext);
  40. renderTask.promise.then(function () {
  41. console.log('Page rendered');
  42. });
  43. });
  44. }, function (reason) {
  45. // PDF loading error
  46. console.error(reason);
  47. });
  48. };
  49. fileReader.readAsArrayBuffer(file);
  50. }
  51. });
  52. </script>


Hasilnya Seperti

Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io
Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

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