You are here

Drupal中使用xlsx js库导出Excel数据

g089h515r806 的头像
Submitted by g089h515r806 on 星期三, 2023-03-22 06:22

我们制作的一个Drupal统计表,其中有些列和行是用js生成的,客户想要导出Excel,以前我们都是导出csv,让用户自己用Excel打开,转一下。使用views_data_export模块,可以很好的解决这类问题。直接导出Excel,需要安装Excel的库,这个依赖于composer。

   使用composer管理Drupal站点,需要科学上网,有时候不大方便,所以我大多数时候都是导入导出CSV。

我在开发NodeJS项目的时候,用过xlsx.js库,感觉特别好用。所以就尝试了一下,在Drupal中使用这个库,从github上,下载这个项目的源代码:

https://github.com/SheetJS/sheetjs

解压缩,在dist目录下面,有打包好的js,我是把整个dist目录都拷贝到Drupal项目中。在Drupal的libraries.yml文件中引入js文件:

libraries/stats/dist/xlsx.mini.min.js: {minified: true}

 

在我们的自定义js文件中,就可以调用了:

      $(".view-jobs-stats.view-id-jobs_stats  #stats-export-link").click(function(e){ 
           e.preventDefault();
           console.log("stats-export js");
             
              var table_ele = $(".view-jobs-stats.view-id-jobs_stats  table").get(0);
             
              /* convert state to workbook */
              const ws = XLSX.utils.table_to_sheet(table_ele);
              //const ws = XLSX.utils.aoa_to_sheet(this.state.data);
              const wb = XLSX.utils.book_new();
              XLSX.utils.book_append_sheet(wb, ws, "统计");
              /* generate XLSX file and send to client */
              XLSX.writeFile(wb, "统计导出.xlsx")          
      });

我们在views的footer里面加一个id为stats-export-link的链接,点击这个链接,就可以将table中的内容导出了。

 

导出的效果很多,客户很满意。


论坛:

Drupal版本: