Как я могу экспортировать 2 таблицы в один лист Excel, используя reactjs / javascript - PullRequest
Новая
       13

Как я могу экспортировать 2 таблицы в один лист Excel, используя reactjs / javascript

0 голосов
/ 14 февраля 2020

Я пытаюсь экспортировать 2 таблицы в одном листе Excel, используя reactjs, может кто-нибудь предложить мне какую-либо библиотеку или любую идею, как добиться этого

The format

Ответы [ 3 ]

1 голос
/ 14 февраля 2020

Вы можете использовать react-html-table-to-excel для экспорта файла с использованием идентификатора, а затем реализовать тот же идентификатор на ReactToExcel

npm i react-html-table-to-excel или если вы используете пряжу yarn add react-html-table-to-excel

 <table id="table-to-xls" >

.....

</table>

 <ReactToExcel
   className="btn "
   table="table-to-xls"
   filename="Name of file"
   sheet="sheet 1"
   buttonText={t("export_report")}
 />
0 голосов
/ 14 февраля 2020 
 function toExcel() {

    if ("ActiveXObject" in window) {
        alert("This is Internet Explorer!");
    } else {

        var cache = {};
        this.tmpl = function tmpl(str, data) {
            var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :
            new Function("obj",
                         "var p=[],print=function(){p.push.apply(p,arguments);};" +
                         "with(obj){p.push('" +
                         str.replace(/[\r\t\n]/g, " ")
                         .split("{{").join("\t")
                         .replace(/((^|}})[^\t]*)'/g, "$1\r")
                         .replace(/\t=(.*?)}}/g, "',$1,'")
                         .split("\t").join("');")
                         .split("}}").join("p.push('")
                         .split("\r").join("\\'") + "');}return p.join('');");
            return data ? fn(data) : fn;
        };
        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>{{for(var i=0; i<tables.length;i++){ }}<table>{{=tables[i]}}</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 (tableList, name) {
                if (!tableList.length > 0 && !tableList[0].nodeType) table = document.getElementById(table);
                var tables = [];
                for (var i = 0; i < tableList.length; i++) {
                    tables.push(tableList[i].innerHTML);
                }
                var ctx = {
                    worksheet: name || 'Worksheet',
                    tables: tables
                };
                window.location.href = uri + base64(tmpl(template, ctx));
            };
        })();
        tableToExcel(document.getElementsByClassName("exportToExcel"), "one");
    }
}
0 голосов
/ 14 февраля 2020

Вы можете использовать пакет npm с именем react-export-excel. Вы можете установить его, используя: 

npm install react-export-excel --save

Подробнее о том, как использовать, можно узнать на официальных документах .

...