首页 > 其他分享 >vite+xlsx-style表格导出样式设置报错

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

时间:2024-04-11 22:37:28浏览次数:30  
标签:xlsx style 表格 导出 报错 import vite

项目是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`
  )
这样就可以使用了 这里只截取了部分表格导出方法,如果有需要看表格导出表格样式设置的,请看这一篇博客  

 

标签:xlsx,style,表格,导出,报错,import,vite
From: https://www.cnblogs.com/steamed-twisted-roll/p/18130145

相关文章

  • 报关软件-单一窗口打开报错50070
    事件起因:某报关行客户电话报修,USB版本的单一窗口无法登陆,下图为客户提供的报错截图 在重新安装了单一窗口的客户端控件之后,报错内容更改,但问题并未解决  解决办法:1、删除浏览器的所有记录(包括下载记录、浏览记录、cookie等等,需要完全清......
  • 阿里邮箱网页正常登陆,outlook报错
    事件起因:某客户使用阿里邮箱办公,然又使用outlook绑定阿里邮箱;在网页端可以登录阿里邮箱,但是在outlook的登录的时候,服务器、端口均设置无误,但是就是登录不上去,死活都等登录不上去,总是弹窗让输入账号密码 解决办法:经过多方排查,在网上找寻资料,终于排查出是什么问题了在邮箱后台......
  • Adobe Pr 软件报错,此效果需要GPU加速
    事件起因:某同事使用PR软件报错,报错截图如下: 解决办法:1、在pr菜单栏选择文件-项目设置-常规-视频渲染和回放-渲染程序,切换到MercuryPlaybackEngineGPU加速(CUDA);2、检查显卡型号和驱动版本是否与pr兼容,如果不兼容,需要更新显卡驱动或者换用低版本的pr(显卡驱动版本有2种,一......
  • Maya 2019.2 Mtoa 无法正常加载并报错
    事件起因:在开始安装Maya2019.2时自动安装的Mtoa的版本为5.3.1,但是在插件管理器里无法启用插件,于是乎去网上下了一个低的版本5.1.1,虽然可以使用但是渲染出来的东西不能用;于是乎我又去网上下载了同样的5.3.1的独立安装包,然后安装破解(注意,这里有个坑,后续揭晓为什么),但是并无......
  • RHCE常见的报错问题
    1:模块的参数报错的问题 上面的报错的原因只用看,Unsupported这里,后面说不支持这个enabeld这个参数,支持后面的这些参数 2:单位的问题 就是创建逻辑卷的的单位为m或者g不能是MiB的单位,这个单位是创建分区的单位 ......
  • ESP01S固件烧录出现2-syncfail报错
    起因整理手上开发板的时候突然发现有几片ESP01S和ESP12F买来一直没有使用,所以打算拿出来使用MQTT服务进行透传,但是在测试ESP01S的时候发现MQTT的指令一直在报错,之后一查固件版本号居然显示2015年构建的,所以从安信可处下载了新固件进行烧录.故障现象一直显示等待上电同步或显示......
  • 阿里云域名使用ssl域名证书自动续期工具acme.sh报错Error add txt for domain:_acme-c
    现象:说明·acmesh-official/acme.shWiki·GitHub根据中文说明,第二步,第二种dns方法,执行生成证书时报此错,根据报错信息可知,是添加txtdns解析记录时出错原因:权限不足,阿里云为了提高安全性不建议直接使用主账号创建 AccessKey(因为默认权限过大),建议使用RAM用户(可以理......
  • 安装pnpm 和报错解决,亲测可行
    安装pnpm和报错解决,亲测可行pnpm是一款磁盘空间高效的软件包管理器。当使用npm或Yarn时,如果你有1000个项目,并且所有项目都有一个相同的依赖包,那么,你在硬盘上就需要保存100份该相同依赖包的副本。然而,如果是使用pnpm,依赖包将被存放在一个统一的位置,因此以项目和依赖包......
  • nextJs中使用styled-jsx
    NextJs不支持直接在页面和组件里importCss这种引入方式(除了全局引入),但是可以使用styled-jsx的方式进行Css的样式定义,也可以实现样式加载NextJs中Css的几种使用方案: global全局引入:在main文件或者app.js/ts文件里面进行全局引入,这种只是适合全局作用的样式引入。例如:im......
  • 奇怪的错误-------重新定义一下变量就不报错了
    1packagecom.lian.mysqldemo2;23importandroidx.appcompat.app.AppCompatActivity;45importandroid.os.Bundle;6importandroid.os.Handler;7importandroid.text.TextUtils;8importandroid.view.View;9importandroid.widget.TextView;1011......