vite+xlsx-style表格导出样式设置报错

项目是vite+vue3 , 前端表格导出,使用xlsx可以导出基本表格,但是想要设置表格样式,引入xlsx-style,安装依赖,后引入报错

引用

import { utils } from "xlsx"

import { write } from "xlsx-style"

Could not resolve "./cptable"

node_modules/xlsx-style/dist/cpexcel.js:807:24:
807 │ var cpt = require('./cpt' + 'able');

 

在网上搜了下,解决方法基本都是两种

一是修改安装依赖包

根据提示找到该js文件在807行做修改。将var cpt = require(’./cpt’ + ‘able’)改成var cpt = cptable

二是修改vue.config.js配置

 

module.exports = {

 

    chainWebpack(config) {
        config.externals({ './cptable': 'var cptable' })
    }
}

 

但是我的项目是vite+vue3,没有这个配置文件

尝试修改了导出方式,结果有更多错误,后面找到了可以兼容vite项目的安装包 xlsx-style-vite

安装依赖 yarn add xlsx-style-vite -D

项目中引入

 

 import { utils } from "xlsx"
import XLSXStyle from "xlsx-style-vite"
import { saveAs } from "file-saver"

  const wsName = "sheet1"
  const wb = utils.book_new()
  const ws = utils.aoa_to_sheet(exportData)
  utils.book_append_sheet(wb, ws, wsName)
  const buffer = XLSXStyle.write(wb, {
    bookType: "xlsx",
    bookSST: false,
    type: "binary",
  })
  saveAs(
    new Blob([s2ab(buffer)], { type: "application/octet-stream" }),
    `${fileName}.xlsx`
  )

这样就可以使用了

这里只截取了部分表格导出方法,如果有需要看表格导出表格样式设置的,请看这一篇博客