vue导出xlsx表格步骤以及数据太多，分表导出

 一、分表导出

分表导出
import FileSaver from "file-saver";
import * as XLSX from "xlsx";


exportExcel() {
    let totalData = this.result_monthList_view // 数据总量
    const page = Math.ceil(totalData.length / this.itemNumberPerPage)
    for(let i = 0; i < page ; i++) {
      const start = i * this.itemNumberPerPage;
      const end = (i + 1) * this.itemNumberPerPage;
      const data = totalData.slice(start, end)
 
      // 将数据转换成Excel文件
      const worksheet = XLSX.utils.json_to_sheet(data)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, `Sheet${i+1}`)
      const buf = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' })
 
      // 下载Excel文件
      const blob = new Blob([buf], {type: "application/octet-stream;charset=utf-8'"})
      saveAs(blob, `文件名_${i+1}.xlsx`)
    }
  },

 二、不带样式导出

不带样式导出
export function htmlToExcel(dom,title){
        let excelTitle = title
        let wb = XLSX.utils.table_to_book(document.querySelector(dom))
        let wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array"})
        try {
            FileSaver.saveAs(
                new Blob([wbout], { type: "application/octet-stream"}),
                excelTitle + ".xlsx"
            )
        }catch(e) {
            if (typeof console !== "undefined") console.log(e, wbout)
        }
        return wbout
}

 三、导出带样式

import FileSaver from "file-saver";
import * as XLSX from 'xlsx'
import * as XLSXS from 'xlsx-style';


export function htmlToStyleExcel(dom,title){
    var xlsxParam = { raw: false };//转换成excel时，使用原始的格式
    let excelTitle = title
    let wb = XLSX.utils.table_to_book(document.querySelector(dom),xlsxParam)
    const sheet=wb.Sheets[wb.SheetNames[0]]
    for(let key in sheet){
        if (key == "!ref" || key == "!cols" || key == "!merges" || key == "Am" || key == "!fullref" || key =="!rows") {
        }else{
          sheet[key].s={
            alignment: {
                    wrapText: true,
                    horizontal: "center",
                    vertical: "center"
                  },
                  font: {
                    name: "仿宋",
                    sz: 11
                  }
          }
        }
      }
    // console.log(sheet);
    let wbout = XLSXS.write(wb, {bookType: 'xlsx', bookSST: false, type: 'buffer',} )
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream"}),
            excelTitle + ".xlsx"
        )
    }catch(e) {
        if (typeof console !== "undefined") console.log(e, wbout)
    }
    return wbout
}

四、导出xlsx表格时出现的报错问题

 1.:jszip is not a constructor

解决思路：

1.降低xlsx版本  npm i --save xlsx@0.10.0

2.通过命令：“npm i node-polyfill-webpack-plugin -D” 安装Webpack 插件。在vue.config.js文件配置如下：

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
        new NodePolyfillPlugin()
      ]
    }
})

五.文件导出

import FileSaver from 'file-saver'
import {
  saveAs
} from 'file-saver'
const data='hahah'
const blob=new Blob([data],{type: 'text/json;charset=utf-8'})
FileSaver.saveAs(blob,'hello.txt')

这里写一个文件导出的例子

<!-- 表格导出案例 -->
<template>
    <div>
      <el-button type="primary" style="margin: 20px" @click="handerExcelFn">导出</el-button>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" align="center"></el-table-column>
        <el-table-column prop="date" label="时间" align="center"></el-table-column>
        <el-table-column label="详细地址" align="center">
          <el-table-column prop="province" label="省份" align="center"></el-table-column>
          <el-table-column prop="city" label="市区" align="center"></el-table-column>
          <el-table-column prop="address" label="地址" align="center"></el-table-column>
          <el-table-column prop="zip" label="邮编" align="center"></el-table-column>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template>
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="表格保存预览" width="70%" :visible.sync="selectDialogType">
        <el-table :data="selectData" id="selectTable" height="380px">
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="gender" label="性别" align="center"></el-table-column>
          <el-table-column prop="date" label="时间" align="center"></el-table-column>
          <el-table-column label="详细地址" align="center">
            <el-table-column prop="province" label="省份" align="center"></el-table-column>
            <el-table-column prop="city" label="市区" align="center"></el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
            <el-table-column prop="zip" label="邮编" align="center"></el-table-column>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="exportExcel">确定保存</el-button>
          </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import {htmlToExcel,htmlToStyleExcel} from '@/utils/htmlToExcel'
  export default {
    data() {
      return {
        tableData: [
          {
            name: '小黑',
            gender:'男',
            date:'2024-01-01',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙路 1518 弄',
            zip: '200333',
          },
          {
            name: '小白',
            gender:'男',
            date:'2024-01-01',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙路 1518 弄',
            zip: '200333',
          },
          {
            name: '小绿',
            gender:'男',
            date:'2024-01-01',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙路 1518 弄',
            zip: '200333',
          },
          {
            name: '小蓝',
            gender:'男',
            date:'2024-01-01',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙路 1518 弄',
            zip: '200333',
          },
          {
            name: '小紫',
            gender:'男',
            date:'2024-01-01',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙路 1518 弄',
            zip: '200333',
          },
        ],
        selectData: [],
        selectDialogType:false
      }
    },
    methods: {
      handerExcelFn() {
        if (this.selectData.length < 1) {
          this.$message.error('请选择要导出的内容')
          return false
        }
        this.selectDialogType = true
      },
      handleSelectionChange(val) {
        this.selectData = val
      },
      exportExcel() {
        // htmlToExcel('#selectTable', '表格数据')
        htmlToStyleExcel('#selectTable', '表格数据')
      },
    },
  }
  </script>

import FileSaver from "file-saver";
import * as XLSX from 'xlsx'
import * as XLSXS from 'xlsx-style';
export function htmlToExcel(dom,title){
    var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
    let excelTitle = title
    let wb = XLSX.utils.table_to_book(document.querySelector(dom),xlsxParam)

    let wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array"})
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream"}),
            excelTitle + ".xlsx"
        )
    }catch(e) {
        if (typeof console !== "undefined") console.log(e, wbout)
    }
    return wbout
}

export function htmlToStyleExcel(dom,title){
    var xlsxParam = { raw: false };//转换成excel时，使用原始的格式
    let excelTitle = title
    let wb = XLSX.utils.table_to_book(document.querySelector(dom),xlsxParam)
    const sheet=wb.Sheets[wb.SheetNames[0]]
    for(let key in sheet){
        if (key == "!ref" || key == "!cols" || key == "!merges" || key == "Am" || key == "!fullref" || key =="!rows") {
        }else{
          sheet[key].s={
            alignment: {
                    wrapText: true,
                    horizontal: "center",
                    vertical: "center"
                  },
                  font: {
                    name: "仿宋",
                    sz: 11
                  }
          }
        }
      }
    // console.log(sheet);
    let wbout = XLSXS.write(wb, {bookType: 'xlsx', bookSST: false, type: 'buffer',} )
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream"}),
            excelTitle + ".xlsx"
        )
    }catch(e) {
        if (typeof console !== "undefined") console.log(e, wbout)
    }
    return wbout
}