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 tkpTutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io |
<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....
Server [SF] Server [MF]
Hore.... Done....