【问题标题】:Datatables export Excel数据表导出 Excel
【发布时间】:2020-03-04 14:38:50
【问题描述】:

我正在以 csv 格式导出数据表。当我用 excel 打开文件时,我遇到了大数字(大约 20 位)的问题。我也有特殊字符的问题。 估计是格式问题。但我不知道如何解决这个问题。

我的js文件中的代码:

dom: 'Bfrtip',
    buttons: [
        {
            extend: 'csv',
            text: 'csv',
            fieldSeparator: ';' // with ';' we can export the file in csv and each column is in one column. Without ';' everything is in one column
        },
        'pdf',
        'print'
    ]

问题的图片:

感谢您的帮助。

【问题讨论】:

    标签: datatables


    【解决方案1】:

    这个答案的末尾有一个独立的例子,但这是你的两个问题:

    大数

    解决此问题的最佳方法是在此处使用“excel”而不是“csv”:

    dom: 'Bfrtip',
    "buttons": [
      'excel'
    ]
    

    这将确保 Excel 单元格格式为“数字”而不是“一般”。

    我不知道在使用 CSV 导出选项时自动控制 Excel 单元格格式的方法 - 除非您准备将 CSV 保存为文本文件,然后导入 Excel 并在导入期间对其进行格式化(a手动过程)。

    重音字符

    您可能遇到此问题的原因有多种 - 其中许多超出了 DataTables 的范围 - 所以以下内容可能对您没有帮助,但是...

    确保您的 HTML 页面在 head 标记内包含此内容:

    <meta charset="UTF-8">
    

    这足以让我的演示工作(见下文)。例如:

    但是,正如我所说,可能还有许多其他原因 - 例如,see here

    完整示例

    将以下 HTML 粘贴到文本文件中(如果您使用的是 Windows,请使用 Notepad++ 而不是 Notepad)。假设 Notepad++,确保文件保存为 UTF-8 - menu > Encoding > UTF-8。然后在任何浏览器中打开文件。

    您不需要下面提供的所有这些 JS 导入(例如 PDF);随意删除多余的。 (我将它们用于更完整的演示,但懒得删除它们。)

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Export to Excel</title>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
      <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
    
      <!-- buttons -->
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
      <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
      <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
      <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
      <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
    
    </head>
    
    <body>
    
    <div style="margin: 20px;">
    
    <table id="example" class="display nowrap dataTable cell-border" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Adélaïde Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>6123456789012345</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
        </table>
    
    </div>
    
    <script type="text/javascript">
    
      $(document).ready(function() {
        $('#example').DataTable({
    
          dom: 'Bfrtip',
          "buttons": [
            'excel'
          ]
        });
      });
    
    </script>
    
    </body>
    

    关于 CSV 选项的注意事项

    如果您在按钮定义中使用“csv”而不是“excel”,并且如果您在文本编辑器而不是 Excel 中打开生成的文件,您将看到以下数据:

    "Name","Position","Office","Age","Start date","Salary"
    "Adélaïde Nixon","System Architect","Edinburgh","6123456789012345","2011/04/25","$320,800"
    

    数据是您需要的方式 - 只是 Excel 会在打开 csv 文件时对如何格式化数据做出各种假设。

    【讨论】:

    • 感谢您的回答。但是,我使用 csv 因为我的页面上没有出现 excel 按钮。而且我不知道为什么,因为我尝试了文档中的内容。我使用了下载生成器来帮助我正确安装 npm。但结果是一样的,我没有 excel 按钮,所以我使用 csv 至少有一些东西可以展示给用户。如果您对此有任何建议,我接受;)
    • @C.Ramp:好的——明白了。有两个建议以防万一:(1)看看我上面的独立解决方案。如果您可以自己运行它,那么问题可能在于下载构建器的配置方式以及工件的安装方式。例如,仔细检查您是否包含了 Excel HTML5 导出按钮所需的 JSZip 选项(假设您使用的是现代浏览器)。我自己不使用 NPM。 (2) 针对这个特定问题打开一个新问题。考虑到您的设置的足够详细信息,它应该是可修复的。
    猜你喜欢
    • 2021-12-18
    • 2019-05-13
    • 1970-01-01
    • 2017-03-27
    • 1970-01-01
    • 1970-01-01
    • 2023-03-05
    • 1970-01-01
    相关资源
    最近更新 更多