Подтвердить что ты не робот

Экспорт в xls с использованием angularjs

Я работаю над приложением angular js, и я застрял в ситуации, когда мне приходится экспортировать данные в Xls с помощью angular js. Я много искал в Интернете для функций экспорта или любой библиотеки для angular js, поэтому я могу это сделать или, по крайней мере, могу получить представление о том, как экспортировать. У меня нет кода или работы, чтобы показать здесь.

Мне нужны предложения. Пожалуйста помоги мне с этим.

Спасибо заранее.

Update:

У меня есть данные, которые представляют собой массив объектов, и я повторяю это в пользовательском интерфейсе в таблице. Мой бэкэнд node.js и frontend angular js.

Моя проблема в том, что если у нас есть данные с сервера, и я использую в пользовательском интерфейсе, как я могу использовать те же данные для экспорта в Xls с помощью angular js. Я не хочу снова звонить на бэкэнд, чтобы извлечь данные и экспортировать их.

В существующей таблице пользователь может выбрать флажок (любое количество строк или всех строк) для извлечения данных в Xls.

В node.js Я использовал модуль node, имя которого: Excel, и оно доступно на сайте nodemodules.

Мои данные таковы:

"data": [
    {
        "Name": "ANC101",
        "Date": "10/02/2014",
        "Terms": ["samsung", "nokia": "apple"]
    },{
        "Name": "ABC102",
        "Date": "10/02/2014",
        "Terms": ["motrolla", "nokia": "iPhone"]
    }
]

Я хочу решение с использованием угловых или любой библиотеки углов.

4b9b3361

ОТВЕТЫ

Ответ 1

Дешевый способ сделать это - использовать Angular для генерации <table> и использовать FileSaver.js для вывода таблицы в виде файла .xls для пользователя для загрузки. Excel сможет открыть таблицу HTML в виде таблицы.

<div id="exportable">
    <table width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>DoB</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td>{{item.dob | date:'MM/dd/yy'}}</td>
            </tr>
        </tbody>
    </table>
</div>

Экспорт вызова:

var blob = new Blob([document.getElementById('exportable').innerHTML], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    saveAs(blob, "Report.xls");
};

Демо: http://jsfiddle.net/TheSharpieOne/XNVj3/1/

Обновлено демо с функциональностью флажка и данными опроса. Демо: http://jsfiddle.net/TheSharpieOne/XNVj3/3/

Ответ 2

Вы можете попробовать Alasql библиотеку JavaScript, которая может работать вместе с библиотекой XLSX.js для легкого экспорта данных Angular.js. Это пример контроллера с функцией exportData():

function myCtrl($scope) {
  $scope.exportData = function () {
    alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]);
  };

  $scope.items = [{
    name: "John Smith",
    email: "[email protected]",
    dob: "1985-10-10"
  }, {
    name: "Jane Smith",
    email: "[email protected]",
    dob: "1988-12-22"
  }];
}

См. полный код HTML и JavaScript для этого примера в jsFiddle.

ОБНОВЛЕНО Другой пример с цветными ячейками.

Также вам нужно включить две библиотеки:

Ответ 3

Когда мне что-то нужно было, ng-csv и другие решения здесь не помогли. Мои данные были в $scope, и нет таблиц, показывающих это. Итак, я построил директиву для экспорта данных в Excel с помощью Sheet.js(xslsx.js) и FileSaver.js.

Вот мое решение упаковано.

Например, данные:

$scope.jsonToExport = [
    {
      "col1data": "1",
      "col2data": "Fight Club",
      "col3data": "Brad Pitt"
    },
    {
      "col1data": "2",
      "col2data": "Matrix Series",
      "col3data": "Keanu Reeves"
    },
    {
      "col1data": "3",
      "col2data": "V for Vendetta",
      "col3data": "Hugo Weaving"
    }
];

Мне пришлось подготовить данные в виде массива массивов для моей директивы в моем контроллере:

$scope.exportData = [];
// Headers:
$scope.exportData.push(["#", "Movie", "Actor"]);
// Data:
angular.forEach($scope.jsonToExport, function(value, key) {
  $scope.exportData.push([value.col1data, value.col2data, value.col3data]);
});

Наконец, добавьте директиву в мой шаблон. Он показывает кнопку. (См. скрипка).

<div excel-export export-data="exportData" file-name="{{fileName}}"></div>

Ответ 4

Если вы загружаете свои данные в ng-сетку, вы можете использовать плагин экспорта CSV. Плагин создает кнопку с данными сетки как csv внутри тега href.

http://angular-ui.github.io/ng-grid/

https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-csv-export.js

Обновление ссылок при переименовании библиотеки:

Ссылка Github: https://github.com/angular-ui/ui-grid

Страница библиотеки: http://ui-grid.info/

Документация по экспорту csv: http://ui-grid.info/docs/#/tutorial/206_exporting_data

Ответ 5

Одной отправной точкой может быть использование этой директивы (ng-csv), просто загрузите файл как csv и что что-то превосходное может понять

http://ngmodules.org/modules/ng-csv

Возможно, вы можете адаптировать этот код (обновленная ссылка):

http://jsfiddle.net/Sourabh_/5ups6z84/2/

Скорее всего, XMLSS (он предупреждает вас перед тем, как открыть файл, если вы решите открыть файл, он откроется правильно)

var tableToExcel = (function() {

  var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }

  return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
  }
})()

Ответ 6

Попробуйте ниже с настраиваемым именем файла:

$scope.exportData= function(){                  
    var uri = 'data:application/vnd.ms-excel;base64,'
          , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
          , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
          , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }

          var table = document.getElementById("searchResult");
          var filters = $('.ng-table-filters').remove();
          var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
          $('.ng-table-sort-header').after(filters) ;          
          var url = uri + base64(format(template, ctx));
          var a = document.createElement('a');
          a.href = url;
          a.download = 'Exported_Table.xls';
          a.click();        
};

Ответ 7

$scope.ExportExcel= function () { //function define in html tag                          

                        //export to excel file
                        var tab_text = '<table border="1px" style="font-size:20px" ">';
                        var textRange;
                        var j = 0;
                        var tab = document.getElementById('TableExcel'); // id of table
                        var lines = tab.rows.length;

                        // the first headline of the table
                        if (lines > 0) {
                            tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
                        }

                        // table data lines, loop starting from 1
                        for (j = 1 ; j < lines; j++) {
                            tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>";                                
                        }

                        tab_text = tab_text + "</table>";
                        tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");          //remove if u want links in your table
                        tab_text = tab_text.replace(/<img[^>]*>/gi, "");             // remove if u want images in your table
                        tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

                        // console.log(tab_text); // aktivate so see the result (press F12 in browser)               
                        var fileName = 'report.xls'                            
                        var exceldata = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" }) 

                        if (window.navigator.msSaveBlob) { // IE 10+
                            window.navigator.msSaveOrOpenBlob(exceldata, fileName);
                            //$scope.DataNullEventDetails = true;
                        } else {
                            var link = document.createElement('a'); //create link download file
                            link.href = window.URL.createObjectURL(exceldata); // set url for link download
                            link.setAttribute('download', fileName); //set attribute for link created
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        }

                    }

        //html of button

Ответ 8

У меня была эта проблема, и я сделал инструмент для экспорта таблицы HTML в файл CSV. Проблема, с которой я столкнулась с FileSaver.js, заключается в том, что этот инструмент захватывает таблицу с html-форматом, поэтому некоторые люди не могут открыть файл в excel или google. Все, что вам нужно сделать, это экспортировать файл js, а затем вызвать функцию. Это адрес github https://github.com/snake404/tableToCSV, если у кого-то такая же проблема.

Ответ 9

Нам нужен JSON файл, который нам нужно экспортировать в контроллер angularjs, и мы должны иметь возможность вызывать из HTML файла. Мы будем смотреть на оба. Но прежде чем мы начнем, нам нужно сначала добавить два файла в нашу угловую библиотеку. Этими двумя файлами являются json-export-excel.js и filesaver.js. Более того, нам нужно включить зависимость в угловой модуль. Итак, первые два шага можно суммировать следующим образом:

1) Добавьте json-export.js и filesaver.js в вашу угловую библиотеку.

2) Включите зависимость ngJsonExportExcel в свой угловой модуль.

      var myapp = angular.module('myapp', ['ngJsonExportExcel'])

Теперь, когда мы включили необходимые файлы, мы можем перейти к изменениям, которые необходимо внести в файл HTML и контроллер. Мы предполагаем, что JSON создается на контроллере либо вручную, либо путем вызова бэкэнда.

HTML:

Current Page as Excel
All Pages as Excel

В приложении, с которым я работал, я принес постраничные результаты из бэкэнда. Поэтому у меня было два варианта экспорта в Excel. Один для текущей страницы и один для всех данных. Как только пользователь выбирает опцию, вызов переходит к контроллеру, который готовит JSON (список). Каждый объект в списке формирует строку в Excel.

Узнайте больше на - https://www.oodlestechnologies.com/blogs/Export-to-excel-using-AngularJS