导出大量数据到excel崩溃

Question

I have a kendo grid in my application and i have added export to excel button to that kendo grid .我的应用程序中有一个剑道网格，并且我已将导出到 excel 按钮添加到该剑道网格。

My question here is if select the small amount of data in kendo grid and when click on export button everything is working fine我的问题是，如果在剑道网格中选择少量数据，当点击导出按钮时一切正常

but the problem is if select the large amount of data more than 1000 rows then the web page will become crash and it showing "Aw, Snap" Error但问题是如果选择超过 1000 行的大量数据，则网页将崩溃并显示“Aw, Snap”错误

my environment : C#, Jquery, Kendo Grid我的环境：C#、Jquery、Kendo Grid

I have this code in my js我的 js 中有这段代码

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))
          }
        })()
tableToExcel("table2excel");

it works fine when the data is small .当数据很小时它工作正常。 but if the data is large more than 1000 it crashes the browser但是如果数据超过 1000，它会导致浏览器崩溃

I heard that Chrome can only handle HREF's that are roughly 2 million characters long.我听说 Chrome 只能处理大约 200 万个字符长的 HREF。 So can i handle this using Blob object ?那么我可以使用 Blob 对象处理这个问题吗？ if yes can somebody let me know how to use blob object in my case ?如果是的话，有人可以让我知道如何在我的情况下使用 blob 对象吗？

Please help to resolve this issue .请帮助解决这个问题。

Answer 1

It exports all data and custom selection using checkbox as well.它也使用复选框导出所有数据和自定义选择。

function excelExport() {
        var exportAll = $('.selectrow').is(":checked");
        var grid = $("#grid");
        var rows = [{
            cells: [
                { value: "column1" },
                { value: "column2" },
                { value: "column3" },
                { value: "column4" },
                { value: "column5" },
                { value: "column6" },
                { value: "column7" }
            ]
        }];
        if (exportAll) {
            var dataDource = grid.getKendoGrid();
            var trs = $("#grid").find('tr');
            for (var i = 0; i < trs.length; i++) {
                if ($(trs[i]).find(":checkbox").is(":checked")) {
                    var dataItem = dataDource.dataItem(trs[i]);
                    rows.push({
                        cells: [
                            { value: dataItem.column1 },
                            { value: dataItem.column2 },
                            { value: dataItem.column3 },
                            { value: dataItem.column4 },
                            { value: dataItem.column5 },
                            { value: dataItem.column6 },
                            { value: dataItem.column7 }
                        ]
                    })
                }
            }
        }
        else {
            var dataSource = grid.data("kendoGrid").dataSource;
            var trs = grid.find('tr');
            for (var i = 1; i < dataSource._data.length; i++) {
                    var dataItem = dataSource._data[i];
                    rows.push({
                        cells: [
                            { value: dataItem.column1 },
                            { value: dataItem.column2 },
                            { value: dataItem.column3 },
                            { value: dataItem.column4 },
                            { value: dataItem.column5 },
                            { value: dataItem.column6 },
                            { value: dataItem.column7 }
                        ]
                    })
            }
        }



        var workbook = new kendo.ooxml.Workbook({
            sheets: [
                {
                    columns: [
                        { autoWidth: true },
                        { autoWidth: true },
                        { autoWidth: true },
                        { autoWidth: true },
                        { autoWidth: true },
                        { autoWidth: true },
                        { autoWidth: true },
                        { autoWidth: true },
                        { autoWidth: true }
                    ],
                    title: "Exported Data Result",
                    rows: rows
                }
            ]
        });
        kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: "ExportedData" });
    }

导出大量数据到excel崩溃

问题描述

1 个解决方案

解决方案1
0 2021-01-10 17:05:12

导出大量数据到excel崩溃

问题描述

1 个解决方案

解决方案1 0 2021-01-10 17:05:12

解决方案1
0 2021-01-10 17:05:12