0

我正在将我的 html 表导出到 csv,这在 Chrome 和 Firefox 中运行良好,在 Windows 上的 safari 中运行正常 - 您可以选择打开或保存文件,尽管名称为 Unknown,但如果您这样做并打开下载文件就在那里并正确打开。

但是,在 Mac 上的 Safari 上,它会尝试在另一个浏览器窗口中打开它并失败。

我正在研究几个选项:

  1. 为 Safari MAc 创建一个单独的按钮以导出 CSV
  2. 使浏览器打开一个“打开/另存为”对话框。
  3. 有关执行此操作的最佳方法的其他建议..?

我环顾四周,我认为第二点的答案是否定的——你不能强迫浏览器的行为。

但是,我还没有找到在 safari mac 中导出的方法或如何执行此操作的好的解决方案。

我用来导出 csv 的 Jquery 代码如下:

   <script type="text/javascript">
        $(document).ready(function () {

            function exportTableToCSV($table, filename) {

                var $rows = $table.find('tr:has(td)'),

                    // Temporary delimiter characters unlikely to be typed by keyboard
                    // This is to avoid accidentally splitting the actual contents
                    tmpColDelim = String.fromCharCode(11), // vertical tab character
                    tmpRowDelim = String.fromCharCode(0), // null character

                    // actual delimiter characters for CSV format
                    colDelim = '","',
                    rowDelim = '"\r\n"',

                    // Grab text from table into CSV formatted string
                    csv = '"' + $rows.map(function (i, row) {
                        var $row = $(row),                            
                            $cols = $row.find('td');

                        return $cols.map(function (j, col) {
                            var $col = $(col),
                                text = $col.text();

                            return text.replace('"', '""'); // escape double quotes

                        }).get().join(tmpColDelim);

                    }).get().join(tmpRowDelim)
                        .split(tmpRowDelim).join(rowDelim)
                        .split(tmpColDelim).join(colDelim) + '"',

                    // Data URI
                    csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

                $(this)
                    .attr({
                        'download': filename,
                        'href': csvData,
                        'target': '_blank'
                    });
            }

            // This must be a hyperlink
            $(".export").on('click', function (event) {
                // CSV
                exportTableToCSV.apply(this, [$('#tableContainer>table'), 'export.csv']);

                // IF CSV, don't do event.preventDefault() or return false
                // We actually need this to be a typical hyperlink

            });
        });
    </script>

我的 html 表是从 ajax 创建的,这是一个示例:

    $.ajax({
        type: "POST",
        //contentType: "application/json; charset=utf-8",
        url: theUrl,
        data: { 'manufacturer': manufacturer, 'country': country, 'startDate': startDate, 'endDate': endDate, 'chartType': chartType },
        dataType: "json",
        success: function (data) {
            setTimeout($.unblockUI, 50);

            if (data.length == 0) {
                $('#noData').show();
                $('#chartContainer').hide();
                $('#tableContainer').hide();
                $('#exportData').hide();
            }
            var retailerNameArray = [];
            var impressionsArray = [];
            var intsArray = [];
            for (var i = 0; i < data.length; i++) {
                var impRow = data[i];


                //only display on graph if not 0
                if (impRow.RetailerImpressionCount > 0) {
                    //put into an array
                    var retailer = impRow.RetailerDescription;
                    var imps = impRow.RetailerImpressionCount;
                    retailerNameArray.push(retailer);
                    impressionsArray.push(imps);
                    var clicks = impRow.RetailerClickCount;
                    intsArray.push(clicks);

                    $('#noData').hide();
                    $('#chartContainer').show();
                    $('#tableContainer').show();
                    $('#exportData').show();

                }
            }

 var table = document.getElementById("usertable");
            var tabledata = "";
            tabledata += "<tr class =\"tableHeader\">";
            tabledata += "<td>Retailer</td>";
            tabledata += "<td>Impressions</td>";
            tabledata += "<td>Clicks</td>";
            tabledata += "<td>CTR</td>";
            tabledata += "<td>Percentage</td>";
            tabledata += "</tr>";
            for (var i = 0; i < data.length; i++) {
                var impDataRow = data[i];
                tabledata += "<tr>";
                tabledata += "<td>" + impDataRow.RetailerDescription + "</td>";
                tabledata += "<td>" + impDataRow.RetailerImpressionCount + "</td>";
                tabledata += "<td>" + impDataRow.RetailerClickCount + "</td>";
                tabledata += "<td>" + impDataRow.ClickThroughRate.toFixed(2) + "%</td>";
                tabledata += "<td>" + impDataRow.Percentage.toFixed(2) + "%</td>";
                tabledata += "</tr>";

            }
                //tabledata += "<tfoot>";
                tabledata += "<tr>";
                tabledata += "<td>Total</td>";
                tabledata += "<td>" + impDataRow.TotalImpressionCount + "</td>";
                tabledata += "<td>" + impDataRow.TotalClickCount + "</td>";
                tabledata += "<td>" + impDataRow.TotalClickThroughRate.toFixed(2) + "%</td>";
                tabledata += "<td>" + impDataRow.TotalPercentage.toFixed(2) + "%</td>";
                tabledata += "</tr>";
                // tabledata += "</tfoot>";

            table.innerHTML = tabledata;
            $("th");
            $("tr:even");
            $("tr:odd");
        }
    }
       );
    });


    //]]>

编辑

我认为(尽管不确定)是这条线在 safari mac 中无法正常工作:

csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

我正在对此进行进一步调查,但是否应该将其设置为特别适用于 safari 的内容?- 我知道 safari 有安全的 mime 类型,但他们有 csv 的安全 mime 类型吗?

编辑

虽然不理想,但我为 safari 创建了一个新按钮并使用:

 csvData = 'data:text/plain,' + encodeURIComponent(csv);

因为这在 safari 中被认为是一种安全的 mime 类型,所以它会在一个新选项卡中打开它——这就是我想要的……

现在,我正在与 IE9 进行斗争,试图找到一种适用于 ie aswel 的解决方案。

到目前为止,这是我尝试过的一些事情:

http://blog.paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/

但我不能让它工作

http://www.kunalbabre.com/projects/table2CSV.php

此页面上的选项 3.1 有效,但我不熟悉 php,所以不知道如何使它适合我。

编辑

希望这可以得到答案:

http://onwebdev.blogspot.com/2011/02/jquery-creating-csv-file.html

现在编辑 看这个:

在asp.net MVC2中将html表导出到excel

试图让它工作..

编辑

在 safari 和 IE 10 中使用上述作品

一如既往,非常感谢任何输入!

4

1 回答 1

0

对于 IE 9 这工作正常,请尝试:

如果您在设置的“高级”选项卡中设置了“不将加密文件保存到磁盘”,并且您的站点以 HTTPS 运行,则问题会发生在 IE 上。此设置会主动阻止下载(当然)。嗬!

在这里找到: https ://drupal.org/node/1736296

至于 IE 5 - 8 参见:http: //support.microsoft.com/kb/323308

于 2013-10-17T11:39:25.120 回答