officejs.js

/**
 * officejs.js
 * Ver. : 1.0.1 
 * last update: 15/11/2017
 * Author: meshesha , https://github.com/meshesha
 * LICENSE: MIT
 * url:https://meshesha.github.io/officeJS
 */

(function ( $ ) {
   
    /////////////////////////////////////////////////////
    $.fn.officejs = function( options ) {
        var $result = $(this);
        var divId = $result.attr("id");
        var settings = $.extend({
            // These are the defaults.
            url: "",
            inputObjId:""
        }, options );
        //1.get file memeType
        //2.load all js file needed to read the file
        var file = settings.url;
        var inputId = settings.inputObjId;
        var fileObj = null;
        if(file != ""){
            fileObj = {
                Obj : file, 
                ext : file.split('.').pop().toLowerCase()
            }
            getContent(fileObj,divId);
        }
        if(inputId != ""){
            //TODO
            $("#"+inputId).on("change", function(e) {
                //var inputFileObj = $(this)[0].files[0];
                var inputFileObj = e.target.files[0];
                if(inputFileObj !== undefined){
                    var fName = inputFileObj.name;
                    fileBlob = URL.createObjectURL(inputFileObj);
                    fileObj = {
                        Obj : fileBlob,
                        ext : fName.split('.').pop().toLowerCase()
                    }
                }
                getContent(fileObj,divId);
            });
        }
    }
    function getContent(fObj,divId){
        var ext = fObj.ext;
        var file = fObj.file;
        switch (ext) {
            case "pdf":
                //handel pdf file (https://mozilla.github.io/pdf.js/) -- V
                getPdfContent(fObj,divId);
                break;
            case "docx":
                //handel docx (https://github.com/mwilliamson/mammoth.js) -- V
                getDocxContent(fObj,divId);
                break;
            case "doc":
                //handel doc file () -- X
                getDocContent(fObj,divId);
                break;
            case "pptx":
                //handel pptx file (https://meshesha.github.io/pptxjs/) -- V
                getPptxContent(fObj,divId);
                break;
            case "ppt":
                //handel ppt file () -- X
                getPptContent(fObj,divId);
                break;
            case "xlsx":
            case "xls":
            case "xlw":
            case "xlsb":
            case "xlsm":
            case "csv":
            case "dbf":
            case "dif":
            case "slk":
            case "sylk":
            case "prn":
            case "ods":
            case "fods":
                //handel sheet file (https://github.com/sheetjs/js-xlsx) -- V
                getSheetContent(fObj,divId);
                break;
            case "gif":
            case "jpg":
            case "jpeg":
            case "bmp":
            case "tiff":
            case "tif":
            case "png":
            case "svg":
               //handel imge  -- V
               getImgContent(fObj,divId);
                break;
            default:
                unknownMsg(divId);
        }
        return
    }
    /////////////////////////////////////////////////PDF//////////////////////////////////////////
    function getPdfContent(fObj,divId){
        $("#"+divId).html("");
        // The workerSrc property shall be specified.
        //PDFJS.workerSrc = './Content/pdfViewer/pdf.worker.js';
        var file = fObj.Obj;

        scale = 1.5;

        //var options = options || { scale: 1 };
        
        function renderPage(page) {
            var viewport = page.getViewport(scale); //options.scale
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var renderContext = {
            canvasContext: ctx,
            viewport: viewport
            };
            
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            $("#"+divId).append(canvas);
            
            page.render(renderContext);
        }
        
        function renderPages(pdfDoc) {
            for(var num = 1; num <= pdfDoc.numPages; num++)
                pdfDoc.getPage(num).then(renderPage);
        }
        //PDFJS.disableWorker = true;
        PDFJS.getDocument(file).then(renderPages);

        return
    }
    /////////////////////////////////////////////////Docx//////////////////////////////////////////
    function getDocxContent(fObj,divId){
        
        $("#"+divId).html("");
        var file = fObj.Obj;
        
        JSZipUtils.getBinaryContent(file, function (err, content) {
            mammoth.convertToHtml({ arrayBuffer: content })
                .then(displayResult)
                .done();
        });
        
        function displayResult(result) {
            var rslt = result.value;
            var position = rslt.search(/[\u0590-\u05FF]/);
            if (position >= 0) {
                $('#'+divId).attr("dir", "rtl");
            } else {
                $('#'+divId).attr("dir", "ltr");
            }

            $('#'+divId).html(rslt);
            if (result.messages != "") {
                var messageHtml = result.messages.map(function (message) {
                    return message.type + ': ' + message.message + "\n";
                }).join("");

                console.log("Docx viewer Messages: \n" + messageHtml + "\n");
            }

        }
        return
    }
    /////////////////////////////////////////////////doc//////////////////////////////////////////
    function getDocContent(fObj,divId){
        
        $("#"+divId).html("");
        var file = fObj.Obj;

        var ran5 = 10000+Math.round(Math.floor()*90000);
        var subDiv = $('<div/>').attr({ class:'doc_files', id:"doc_file_"+ran5,style:"color:#9d9999;font-size:30pt"});
        $("#"+divId).append(subDiv);
        $("#doc_file_"+ran5).html(".doc file is not supported, convert it to .docx file");
        return
    }
    /////////////////////////////////////////////////pptx//////////////////////////////////////////
    function getPptxContent(fObj,divId){
        
        $("#"+divId).html("");
        
        //console.log(fObj,divId);
        var file = fObj.Obj;
        $("#"+divId).pptxToHtml({
            pptxFileUrl: file,
            slideMode: false,
            keyBoardShortCut: false,
            mediaProcess: true
        });
        return
    }
    /////////////////////////////////////////////////ppt//////////////////////////////////////////
    function getPptContent(fObj,divId){
        
        $("#"+divId).html("");
        var file = fObj.Obj;
        
        var ran5 = 10000+Math.round(Math.floor()*90000);
        var subDiv = $('<div/>').attr({ class:'ppt_files', id:"ppt_file_"+ran5,style:"color:#9d9999;font-size:30pt"});
        $("#"+divId).append(subDiv);
        $("#ppt_file_"+ran5).html(".ppt file is not supported, convert it to .pptx file");
        
        return
    }
    /////////////////////////////////////////////////Sheet//////////////////////////////////////////
    function getSheetContent(fObj,divId){
        
        $("#"+divId).html("");
        
        
        var file = fObj.Obj;

        var $container, $window, availableWidth, availableHeight;
        
        $container = $("#"+divId);
        $window = $(window);

        function process_wb(wb) {
            var sheetNames = wb.SheetNames;
            sheetNames.forEach(function(sheetName,idx) {
                var subDivId = 'wbSheets_' +idx;
                var json = XLSX.utils.sheet_to_json(wb.Sheets[sheetName],{header:1});
                    
                availableWidth = Math.max($window.width()-50,600);
                availableHeight = Math.max($window.height()-50, 400);

                $container.append('<p>' + sheetName + '</p>');
                var subDiv = $('<div/>').attr({ class:'(wbSheets', id:subDivId});
                $container.append(subDiv);
                /* add header row for table */
                if(!json) json = [];
                json.forEach(function(r) {
                    //must "...,{header:1}"
                    if(json[0].length < r.length) json[0].length = r.length; 
                });
                /* showtime! */
                $subContainer = $("#"+subDivId);
                $subContainer.handsontable({
                    data: json,
                    readOnly: true,
                    startRows: 1,
                    startCols: 1,
                    stretchH: 'all',
                    rowHeaders: true,
                    colHeaders: true,
                    width: function () { return availableWidth; },
                    height: function () { return availableHeight; }
                });
            });
        }
        var url = file;

        var req = new XMLHttpRequest();
        req.open("GET", url, true);
        req.responseType = "arraybuffer";
        req.onload = function(e) {
            var data = new Uint8Array(req.response);
            var wb = XLSX.read(data, {type:"array"});
            process_wb(wb);
        };
        req.send();
        return
    }
    /////////////////////////////////////////////////Images//////////////////////////////////////////
    function getImgContent(fObj,divId){
        
        $("#"+divId).html("");
        var file = fObj.Obj;
        
        var img_div = $("#"+divId);
        img_div.html("");
        var myImage = new Image();//Image(100, 200)
        myImage.src = file;
        img_div.append(myImage);
        return
    }
    /////////////////////////////////////////////////Unknown file//////////////////////////////////////////
    function unknownMsg(divId){
        
        $("#"+divId).html("");
        
        var ran5 = 10000+Math.round(Math.floor()*90000);
        var subDiv = $('<div/>').attr({ class:'unknown_files', id:"unknown_file_"+ran5,style:"color:#9d9999;font-size:30pt"});
        $("#"+divId).append(subDiv);
        $("#unknown_file_"+ran5).html("The file is not supported!");
        return
    }
}(jQuery));