Excel文件纯前端优美预览，不限框架

最近给结算单加了个预览功能，预览并不复杂，最难的地方反而在于技术选型，挑了一个又一个总算找到了能让人满意的库，其中的过程就不提了，直接上代码。

使用luckysheet预览，luckyexcel解析xlsx文件成luckysheet的数据格式

pnpm add luckysheet luckyexcel

注意：

1. 以下代码仅用于大家演示如何实现功能，这段代码在实际工程需要修改以符合工程规范，并且存在大量ts类型报错，当然如果你要求没那么高也可以直接拿来用。
2. 如果你的xlsx文件是生成出来的blob对象，就可以直接传进来，我在代码里把blob包装成了File。如果你的xlsx文件来源于用户的本地文件，那么你拿到的就直接是File对象，不用包装了。
3. 详见注释

import luckyexcel from 'luckyexcel'
import luckysheet from 'luckysheet'

type luckysheetStartupOptions = {
  container: string
  blob: Blob
}

export function luckysheetSetup({ container, blob }: luckysheetStartupOptions) {
   // luckyexcel要求接收File对象，虽说File对象是从Blob继承而来，但还是包装一下
  const file = new File(
    [blob],
    'Filename.xlsx',
    {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}
  )
  luckyexcel.transformExcelToLucky(file, function (exportJson) {
    if (exportJson.sheets == null || exportJson.sheets.length === 0) {
         // 这里做异常处理，文件读取失败，很可能不是xls(x)文件
    }
    
    luckysheet.destroy() // destroy必须调用，官方示例是在这里调用destroy，不过你可以根据实际情况修改调用时机

    luckysheet.create({
      container, // 记住传的是id (container)，而不是dom本身或者带选择器的id (#container)
      showinfobar: false,
      data: exportJson.sheets,
      title: exportJson.info.name,
      userInfo: exportJson.info.name.creator,
      allowEdit: false // 禁止编辑 你可以根据需要改动
      // 其他配置看luckysheet文档
    })
  })
}