前端导出excel，并且设置单元格为文本格式

最新推荐文章于 2024-06-17 11:32:14 发布

qq_33989590

最新推荐文章于 2024-06-17 11:32:14 发布

阅读量4.7k

点赞数 13

文章标签： css excel html

本文链接：https://blog.csdn.net/qq_33989590/article/details/118567023

版权

前端导出excel可以通过如下方式

  tableToExcel(str: string, fileName: string) {
    const worksheet = 'Sheet1'
    const uri = 'data:application/vnd.ms-excel;base64,'
    const 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]-->
        <style type="text/css">  
        .bg-gray {
          background: #aaa;
          }
          .bg-gray td {
             text-align: left;
          }
          th,td {
            text-align: center;
            mso-number-format:\@;
            vnd.ms-excel.numberformat:\@;
          }
          
        </style>
        </head><body><table>${str}</table></body></html>`
    const a = document.createElement('a')
    a.download = fileName + '.xls'
    a.href = uri + window.btoa(unescape(encodeURIComponent(template)))
    a.click()
  }

在我们导出excel时，默认单元格格式为常规，这个时候如果我们单元格中存在0123，或者10.00或者9.0时候，导出后的excel中单元格格式为123，10，9，没能按照原样导出，找了很多文章，网上解决办法是通过给td添加style="mso-number-format:\@;" 这种方式可能对于在微软excel打开没有问题（具体我没有去看），但是我配置完后，发现仍然不生效（可能因为我使用的是wps），通过不断尝试：最终解决方案：

          
th,td {
            text-align: center;
            mso-number-format:\@;
            vnd.ms-excel.numberformat:\@;
          }

添加vnd.ms-excel.numberformat:\@;mso-number-format:\@;添加两种方式。亲测导出数据正常。

qq_33989590

关注

13
点赞
踩
10

收藏

觉得还不错? 一键收藏
6
评论
前端导出excel，并且设置单元格为文本格式

前端导出excel可以通过如下方式 tableToExcel(str: string, fileName: string) { const worksheet = 'Sheet1' const uri = 'data:application/vnd.ms-excel;base64,' const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:s
复制链接

扫一扫