ExcelデータをコピペするだけでWebに反映する

ExcelデータをコピーしてWeb上でCtrl+Vするだけで、Webにデータが反映されます。

<html lang="jp" ng-app="myApp">
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />

<div ng-controller="PasteController" class="ng-scope">

    <angular-paste ng-model="rawPaste" ng-array="parsedPaste"/>
    <table class="table table-striped table-bordered">
        <tbody>
        <tr ng-repeat="row in parsedPaste">
            <td ng-repeat="col in row" class="ng-scope ng-binding">
                {{col}}
            </td>
        </tr>
        <tr ng-show="parsedPaste.length==0">
            <td>ここにExcelデータを Ctrl + V で貼り付けてください</td>
        </tr>
        </tbody>
    </table>
</div>

</html>
				
@charset "utf-8";
[ng\:cloak], [ng-cloak], .ng-cloak {
 display: none;
}
td {
 border:1px solid #aaa;
}
				
angular.module('myApp', ['myApp.directives'])
    .controller('PasteController', ['$scope', function ($scope) {
    $scope.rawPaste = '';
    $scope.parsedPaste = [];
}]);


angular.module('myApp.directives', [])
    .directive('angularPaste', ['$parse', '$document',
    function ($parse, $document) {
        return {
            restrict:'E',
            link:function (scope, element, attrs) {

                var inFocus = false;

                function parseTabular(text) {
                    //The array we will return
                    var toReturn = [];

                    try {
                        //Pasted data split into rows
                        var rows = text.split(/[\n\f\r]/);
                        rows.forEach(function (thisRow) {
                            var row = thisRow.trim();
                            if (row != '') {
                                var cols = row.split("\t");
                                toReturn.push(cols);
                            }
                        });

                    }
                    catch (err) {
                        console.log('error parsing as tabular data');
                        console.log(err);
                        return null;
                    }
                    return toReturn;
                }

                function textChanged() {
                    var text = $('#myPasteBox').val();
                    if (text != '') {
                        //We need to change the scope values
                        scope.$apply(function () {
                            if (attrs.ngModel != undefined && attrs.ngModel != '') {
                                $parse(attrs.ngModel).assign(scope, text);
                            }
                            if (attrs.ngArray != undefined && attrs.ngArray != '') {
                                var asArray = parseTabular(text);
                                if (asArray != null) {
                                    $parse(attrs.ngArray).assign(scope, asArray);
                                }
                            }
                        });
                    }
                }


                $document.ready(function () {
                    //Handles the Ctrl + V keys for pasting
                    function handleKeyDown(e, args) {
                        if (!inFocus && e.which == keyCodes.V && (e.ctrlKey || e.metaKey)) {    // CTRL + V
                            //reset value of our box
                            $('#myPasteBox').val('');
                            //set it in focus so that pasted text goes inside the box
                            $('#myPasteBox').focus();
                        }
                    }

                    //We add a text area to the body only if it is not already created by another myPaste directive
                    if ($('#myPasteBox').length == 0) {
                        $('body').append($('<textarea id=\"myPasteBox\" style=\"position:absolute; left:-1000px; top:-1000px;\"></textarea>'));

                        var keyCodes = {
                            'C':67,
                            'V':86
                        }

                        $('input, textarea').live("focus", function () {
                            //If this is true, we wont respond to Ctrl + V
                            inFocus = true;
                        });

                        $('input, textarea').live("blur", function () {
                            //We are not on a text element so we will respond
                            //to Ctrl + V
                            inFocus = false;
                        });

                        //Handle the key down event
                        $(document).keydown(handleKeyDown);

                        //We will respond to when the textbox value changes
                        $('#myPasteBox').bind('input propertychange', textChanged);
                    }
                    else {
                        //We will respond to when the textbox value changes
                        $('#myPasteBox').bind('input propertychange', textChanged);
                    }
                });
            }
        }
    }]);
				

ExcelデータをコピペするだけでWebに反映するデモ

Excelデータを貼り付けるとWebに反映します。反映した際、上に遷移しますのでご注意を。

{{col}}
ここにExcelデータを Ctrl + V で貼り付けてください