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

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 :

<input type="file" id="myPdf" /><br>
<canvas id="pdfViewer" ></canvas>
<script type="text/javascript">
$(document).ready(function(){
    document.getElementById("myPdf").value = "";
})
    // Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
$("#myPdf").on("change", function(e){
    var file = e.target.files[0]
    if(file.type == "application/pdf"){
        var fileReader = new FileReader();  
        fileReader.onload = function() {
            var pdfData = new Uint8Array(this.result);
            // Using DocumentInitParameters object to load binary data.
            var loadingTask = pdfjsLib.getDocument({data: pdfData});
            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 = 0.3;
                var viewport = page.getViewport({scale: scale});
                // Prepare canvas using PDF page dimensions
                var canvas = $("#pdfViewer")[0];
                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.promise.then(function () {
                  console.log('Page rendered');
                });
              });
            }, function (reason) {
              // PDF loading error
              console.error(reason);
            });
        };
        fileReader.readAsArrayBuffer(file);
    }
});
</script>

Hasilnya Seperti

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

Hore.... Done....