利用js-xlsx插件导出Excel/多级表头（一篇涵盖四种导出的博客）

最新推荐文章于 2025-03-27 19:06:39 发布

XUEHULII

最新推荐文章于 2025-03-27 19:06:39 发布

阅读量2.3k

点赞数 14

分类专栏：转发文章标签： javascript excel 开发语言

本文链接：https://blog.youkuaiyun.com/xuehu999727/article/details/144110710

版权

利用js-xlsx插件导出Excel/多级表头（一篇涵盖四种导出的博客）

时隔几个月，又遇到了导出表格。做了一下汇总，重新编辑一下这篇文章，供以后的自己查找。也给各位码友提供一丢丢的参考。

前端导出表格，简单来讲，分三种情况

一、纯前端导出Excel（页面静态数据）

这种情况下，是不需要请求后台接口，拿取全量数据的。取的全是前端静态页面的数据，也不考虑分页，所见即所得。
首先得npm 安装 FileSaver和XLSX，

npm install -S file-saver xlsx
1

或者

npm install xlsx
npm install file-saver --save
12
//导出表格引入FileSaver和XLSX
import FileSaver from "file-saver";
import XLSX from "xlsx";
exportExcel(title) {
   
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#exportTableContainer")
      );
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
   
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
   
        FileSaver.saveAs(
          new Blob([wbout], {
    type: "application/octet-stream" }),
          title + ".xlsx"
        );
      } catch (e) {
   
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

wb是个什么东东呢？打印出来看一看
在这里插入图片描述针对次方法，有兴趣想深入了解的同学，可以看看这个文章➡️
js-xlsx使用

二、前端将后台返回的二进制流导出Excel

这种情况下，是后台组装好了所有数据，给前端返回的是一个二进制流，前端只需要下载就行了。

封装的exportExcel.js

// 导出Excel公用方法
import axios from 'axios'
export function exportMethod(data) {
   
    axios({
   
        method: data.method,
        url: `${
     data.url}${
     data.params ? '?' + data.params : ''}`,
        responseType: 'blob'
    }).then((res) => {
   
        const link = document.createElement('a')
        let blob = new Blob([res.data], {
   type: 'application/vnd.ms-excel'})
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)

        // link.download = res.headers['content-disposition'] //下载后文件名
        link.download = data.fileName //下载的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }).catch(error => {
   
        this.$Notice.error({
   
            title: '错误',
            desc: '网络连接错误'
        })
        console.log(error)
    })
}

引用的组件.vue

import exportMethod from '@/utils/exportExcel.js'

 exportExcel1(){
   
      const obj={
   
            method: 'get',
            url: &

最低0.47元/天解锁文章