feat 支持在 Web Worker 内使用导出方法，修改示例、utils 目录

README.md

@@ -1,10 +1,10 @@
-# introduce
+## introduce
 Based on [xlsx](https://github.com/SheetJS/sheetjs) and [xlsx style vite](https://www.npmjs.com/package/xlsx-style-vite) Export to Excel
 
 ## install
 ``` bash
 npm install antd-xlsx
 ```
 
-## notice
+### notice
 1.The data format can be found in Antd [Table](https://ant.design/components/table-cn/ ) The columns and dataSource properties of the component. Or check the example

change_log.md

@@ -1,3 +1,13 @@
+### [1.4.1] - 2024-08-13
+#### Added
+- 支持在 Web Worker 内调用导出方法，注意：Worker 路径、onCell、render；
+- 暴露 saveAs 方法；
+
+#### Changed
+- 把工具函数统一放到 utils 内；
+- example-vite2 演示代码支持 Worker 示例；
+- example-vite2 支持 analyze，剥离 xlsx-style-vite 模块；
+
 ### [1.4.0] - 2024-03-01
 #### Added
 - 新增 nostyle 导出方法，使用其导出的表格不能设置样式，但可 tree-shaking 掉 xlsx-style-vite 包；

example-vite2/package.json

@@ -7,6 +7,7 @@
     "build": "npm run build:normal && npm run build:pages",
     "build:normal": "vite build",
     "build:pages": "vite build --mode pages",
+    "analyze": "vite build --mode analyze",
     "preview": "vite preview"
   },
   "dependencies": {

example-vite2/src/example/UseWorker.jsx

@@ -0,0 +1,119 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { saveAs } from 'antd-xlsx'
+
+const columns = [
+  {
+    title: '序号',
+    dataIndex: 'key',
+    width: 50,
+  },
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    width: 160,
+
+    // in Worker 不能传函数
+    render: `
+      (val, row, i) => {
+        console.log(val, row, i)
+        return 'formatted Name: ' + val
+      }
+    `
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    width: 50,
+
+    // in Worker 不能传函数
+    onCell: `
+      (record, index) => {
+        if (index === 0) {
+          return {
+            rowSpan: 6,
+          }
+        }
+        if (index > 0 && index < 6) {
+          return {
+            rowSpan: 0,
+          }
+        }
+        return {}
+      }
+    `,
+  },
+  {
+    title: 'Company',
+    dataIndex: 'Company',
+  },
+  {
+    title: 'Gender',
+    dataIndex: 'gender',
+    width: 50,
+  },
+]
+
+const filename = 'basic.xlsx'
+
+export default function App() {
+  const workerRef = useRef()
+  const [dataSource] = useState(() => {
+    const dataSource = []
+    for (let i = 0; i < 100; i++) {
+      dataSource.push({
+        key: i + 1,
+        name: i > 40 ? 'John' : 'Jack',
+        age: i + 1,
+        Company: 'SoftLake Co',
+        gender: i == 3 ? '' : 'M',
+      })
+    }
+    return dataSource
+  })
+
+  const onCountBtnClick = () => {
+    const sheets = [
+      {
+        name: 'sheet',
+        columns: columns,
+        dataSource
+      }
+    ]
+
+    workerRef.current.postMessage({
+      type: 'blob',
+      params: {
+        sheets,
+        filename
+      }
+    })
+  }
+
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      const worker = new Worker(new URL('./worker.js', import.meta.url), {
+        type: 'module'
+      })
+      workerRef.current = worker
+
+      worker.onmessage = function (event) {
+        const { type, data } = event.data
+        if (type === 'wbout') {
+          saveAs(
+            data,
+            filename
+          )
+        }
+      }
+    }
+  }, [])
+
+  return (
+    <p>
+      使用 web worker：
+      <button onClick={onCountBtnClick}>
+        work in Worker
+      </button>
+    </p>
+  )
+}

example-vite2/src/example/index.jsx

@@ -6,6 +6,7 @@ import HeaderGroup from './HeaderGroup'
 import Span from './Span'
 import CustomStyle from './CustomStyle'
 import HiddenHeader from './HiddenHeader'
+import UseWorker from './UseWorker'
 
 export default function Example() {
   return (
@@ -17,6 +18,7 @@ export default function Example() {
       <Span />
       <CustomStyle />
       <HiddenHeader />
+      <UseWorker />
     </>
   )
 }

example-vite2/src/example/worker.js

@@ -0,0 +1,15 @@
+// import style from 'antd-xlsx'
+import { nostyle } from 'antd-xlsx'
+
+onmessage = function (evt) {
+  if (evt.data.type === 'blob') {
+    const workbook = nostyle({
+      worker: true,
+      ...evt.data.params
+    })
+    self.postMessage({ 
+      type: "wbout", 
+      data: workbook 
+    })
+  }
+}

example-vite2/vite.config.js

@@ -16,11 +16,19 @@ export default defineConfig(({ command, mode }) => {
   return {
     base,
     plugins: [
-      // bundleAnalyzer(),
+      ...(mode === 'analyze' ?[ bundleAnalyzer()] : []),
       react()
     ],
     build: {
-      outDir
+      rollupOptions: {
+        output: {
+          manualChunks: (id) => {
+            if (id.includes('xlsx-style-vite')) {
+              return 'xlsx-style-vite'
+            }
+          }
+        }
+      }
     },
     server: {
       host: true

package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "watch": "microbundle src/style.js src/nostyle.js -o dist/esm --compress true -f modern -w",
     "dev": "cd example-vite2 && npm run dev",
-    "build-modern": "microbundle src/style.js src/nostyle.js -o dist/esm --compress true -f modern",
-    "build-cjs": "microbundle src/style.js src/nostyle.js -o dist/cjs --compress true -f cjs",
+    "build-modern": "microbundle src/style.js src/nostyle.js src/utils/saveAs.js -o dist/esm/[name].js --compress true -f modern",
+    "build-cjs": "microbundle src/style.js src/nostyle.js src/utils/saveAs.js -o dist/cjs/[name].js --compress true -f cjs",
     "cp-entries": "cpy src/entry-esm.js dist/esm --rename=index.js --flat && cpy src/entry-cjs.js dist/cjs --rename=index.js --flat",
     "build": "rimraf dist && npm run build-modern && npm run build-cjs && npm run cp-entries",
     "gh-pages": "rimraf docs && cpy example-vite2/dist-pages/index.html docs --flat && cpy example-vite2/dist-pages/assets docs/assets --flat"

src/entry-cjs.js

@@ -1,5 +1,7 @@
 const style = require('./style')
 const nostyle = require('./nostyle')
+const saveAs = require('./saveAs')
 
 module.exports = style
 exports.nostyle = nostyle
+exports.saveAs = saveAs

src/entry-esm.js

@@ -1,7 +1,9 @@
 import style from './style.modern'
 import nostyle from './nostyle.modern'
+import saveAs from './saveAs.modern'
 
 export default style
 export {
-  nostyle
+  nostyle,
+  saveAs
 }

src/nostyle.js

@@ -1,25 +1,6 @@
 import { write } from 'xlsx'
-import { getSheets, s2ab, saveAs } from './utils'
+import download from './utils'
 
-export default ({
-  sheets,
-  filename = 'excel.xlsx',
-  hiddenHeader = false,     // 导出表格时，是否隐藏表头。默认显示表头
-}) => {
-  const Sheets = getSheets({
-    sheets,
-    hiddenHeader,
-  })
-  const workbook = {
-    SheetNames: sheets.map(({ name }) => name),
-    Sheets
-  }
-  const wbout = write(workbook, {
-    bookType: 'xlsx',
-    type: 'binary',
-  })
-  saveAs(
-    new Blob([s2ab(wbout)], { type: 'application/octet-stream' }),
-    filename
-  )
-}
+export default (args) => download(args, {
+  write
+})

src/style.js

@@ -1,27 +1,8 @@
 import { write } from 'xlsx-style-vite'
-import { getSheets, s2ab, saveAs } from './utils'
-import { getCellStyle } from './utils.style'
+import download from './utils'
+import getCellStyle from './utils/cellStyle'
 
-export default ({
-  sheets,
-  filename = 'excel.xlsx',
-  hiddenHeader = false,     // 导出表格时，是否隐藏表头。默认显示表头
-}) => {
-  const Sheets = getSheets({
-    sheets,
-    hiddenHeader,
-    getCellStyle,
-  })
-  const workbook = {
-    SheetNames: sheets.map(({ name }) => name),
-    Sheets
-  }
-  const wbout = write(workbook, {
-    bookType: 'xlsx',
-    type: 'binary',
-  })
-  saveAs(
-    new Blob([s2ab(wbout)], { type: 'application/octet-stream' }),
-    filename
-  )
-}
+export default (args) => download(args, {
+  getCellStyle,
+  write
+})

src/utils.style.js → src/utils/cellStyle.js

@@ -3,7 +3,8 @@
  *     isTitle: 是否是表头
  *       style: 用户设置的 style 字面量
  */
-export function getCellStyle({
+
+export default function getCellStyle({
   isTitle,
   style
 }) {

src/utils/index.js

@@ -0,0 +1,37 @@
+import getSheets from './sheets'
+import s2ab from './s2ab'
+import saveAs from './saveAs'
+
+export default (
+  {
+    sheets,
+    filename = 'excel.xlsx',
+    hiddenHeader = false,     // 导出表格时，是否隐藏表头。默认显示表头
+    worker,                   
+  },
+  {
+    getCellStyle,
+    write,
+  }
+) => {
+  const Sheets = getSheets({
+    sheets,
+    hiddenHeader,
+    getCellStyle,
+  })
+  const workbook = {
+    SheetNames: sheets.map(({ name }) => name),
+    Sheets
+  }
+  const wbout = write(workbook, {
+    bookType: 'xlsx',
+    type: 'binary',
+  })
+
+  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
+  if (worker) {
+    return blob
+  } else {
+    saveAs(blob, filename)
+  }
+}

src/utils/s2ab.js

@@ -0,0 +1,13 @@
+/**
+ * 将 string 转成 arrayBuffer
+ * 
+ * @param {string} s 
+ * @returns {ArrayBuffer}
+ */
+export default function s2ab(s) {
+  const buf = new ArrayBuffer(s.length), view = new Uint8Array(buf)
+  for (let i = 0; i !== s.length; ++i) {
+    view[i] = s.charCodeAt(i) & 0xFF
+  }
+  return buf
+}

src/utils/saveAs.js

@@ -0,0 +1,14 @@
+/**
+ * 保存文件
+ * 
+ * @param {Blob} obj 
+ * @param {string} title 
+ */
+export default function saveAs(obj, title) {
+  var link = document.createElement('a')
+  link.download = title
+  link.href = URL.createObjectURL(obj)
+  link.click()
+  link.remove()
+  URL.revokeObjectURL(obj)
+}