JS使用xlsx导出excel文件

使用xlsx导出Excel文件

// 安装插件
// npm install xlsx --save

import React, { useEffect, useState, Fragment } from 'react'
import XLSX from 'xlsx';
export default function ExportExcle() {
    const workbook2blob = (workbook) => {
        // 生成excel的配置项
        var wopts = {            
            bookType: 'xlsx', // 要生成的文件类型            
            bookSST: false, // 是否生成Shared String Table
            type: 'binary'
        }
        //允许用户通过js实现在html文档中写入标签或文字的功能，类似于document.write('Hello World!'); 
        var wbout = XLSX.write(workbook, wopts)  
        // 将字符串转ArrayBuffer
        // 类型化数组是建立在ArrayBuffer对象的基础上的。它的作用是，分配一段可以存放数据的连续内存区域；
        // 如果要分配的内存区域很大，有可能分配失败（因为没有那么多的连续空余内存），记得检查是否分配成功；
        // 每个ArrayBuffer对象表示的只是内存中指定的字节数， 但不会指定这些字节用于保存什么类型的数据；
        // 通过ArrayBuffer能做的，就是为了将来使用而分配一定数量的字节.
        function s2ab(s) {
            var buf = new ArrayBuffer(s.length)
            var view = new Uint8Array(buf)  //创建一个b的引用，类型是Uint8
            for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
            return buf
        }
        let buf = s2ab(wbout)
        // 构造函数，接受两个参数，第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers。第二个参数，是一个包含了两个属性的对象
        var blob = new Blob([buf], {
            type: 'application/octet-stream'
        })
        return blob
    }

    // 将blob对象 创建bloburl,然后用a标签实现弹出下载框
    const openDownloadDialog = (blob, fileName) => {
        if (typeof blob === 'object' && blob instanceof Blob) {
            blob = URL.createObjectURL(blob) // 创建blob地址
        }
        var aLink = document.createElement('a')
        aLink.href = blob
        // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
        aLink.download = fileName || ''
        var event
        // 鼠标事件
        if (window.MouseEvent) event = new MouseEvent('click') 
        // 移动端
        else {
            event = document.createEvent('MouseEvents')
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
        }
        aLink.dispatchEvent(event)
    }

    const exportExport = () => {
        //此处是要导出到excel的数据，可以根据需要修改
        const sheetData1 =[{name:"易烊千玺", age: 20,sex:"男"},{name:"李现",age: 30,sex:"男"}]
        const sheet1 = XLSX.utils.json_to_sheet(sheetData1);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, sheet1, "爱豆信息");
        const workbookBlob = workbook2blob(wb);
        // 导出最后的总表
        openDownloadDialog(workbookBlob,   '爱豆信息.xlsx');
    }

    return (
        <button  onClick={() => exportExport()}></button>在这里插入代码片
    )
}