vue使用xlsx多sheet導出excel

1 下載依賴

npm install xlsx

2 創(chuàng)建公用導出excel方法exportExcel.js

import * as XLSX from 'xlsx'
    export  const download =  (data,filename) =>{
        data.forEach(el => {
            const sheet = XLSX.utils.json_to_sheet(el.sheetData)
            XLSX.utils.book_append_sheet(wb, sheet, `${el.ip}${el.dbType}`)
            
        });
        const workbookBlob = workbook2blob(wb)
        console.log(workbookBlob,'workbookBlob')
        // 導出最后的總表
        // openDownloadDialog(workbookBlob, filename)
         return workbookBlob
    }

    const  workbook2blob  = (workbook) => {
        // 生成excel的配置項
        const wopts = {
            // 要生成的文件類型
            bookType: 'xlsx',
            // // 是否生成Shared String Table,官方解釋是,如果開啟生成速度會下降,但在低版本IOS設備上有更好的兼容性
            bookSST: false,
            type: 'binary'
        }
        const wbout = XLSX.write(workbook, wopts)
        // 將字符串轉ArrayBuffer
        function s2ab (s) {
            const buf = new ArrayBuffer(s.length)
            const view = new Uint8Array(buf)
            for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
            return buf
        }
        const blob = new Blob([s2ab(wbout)], {
            type: 'application/octet-stream'
        })
        return blob
    }

    const openDownloadDialog  = (blob, fileName) => {
      if (typeof blob === 'object' && blob instanceof Blob) {
        blob = URL.createObjectURL(blob) // 創(chuàng)建blob地址
      }
      const aLink = document.createElement('a')
      aLink.href = blob
      // HTML5新增的屬性,指定保存文件名,可以不要后綴,注意,有時候 file:///模式下不會生效
      aLink.download = fileName || '' ;
      let 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)
    }

3 使用
(1)引入導出方法

import { download } from '@/js/exportExcel'

(2) 創(chuàng)建數(shù)據(jù)并使用

let data = [
{
name:'sheet',
list:[
   {  
       id: '1',
       name: 'zhang',
    },
{  
       id: '2',
       name: 'wang',
    },
]
},{
name:'sheet2',
list:[
   {  
       id: '3',
       name: 'li'
    },
{  
       id: '4',
       name: 'zhao',
    },
]
}]
download (data,filename)
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容