Luckysheet本地导入时报错‘luckysheet‘ is not defined【已解决】

news2024/11/17 15:55:04

本文包含luckysheet本地安装以及报错解决,性子急可以直接按照目录划拉!

目录

一、本地导入

二、报错'luckysheet' is not defined解决


最近正在开发的项目中需要类excel功能的东西,经过调研后决定用luckysheet,Luckysheet在线表格,功能强大、配置简单、关键是完全开源。一开始本地搭建的demo是用的cdn的引入方式,效果不错,有需要cdn引入的本地demo的可以联系我提供(联网),可演示(但是似乎拉github上面的更完善。。。。)。后续需要在内网开发于是本地引入了。

luckysheet官方文档Luckysheet文档

值得注意的是它的开发是npm run dev不是 npm run serve

luckysheet官方文档大神总结,可参考!luckysheet 个人使用总结_dave_hz的博客-CSDN博客_luckysheet使用

这里有个官网给的cdn引用示例,可参考!本地HTML采用cdn加载方式引入Luckysheet的案例 - 独书先生 - 博客园

一、本地导入

我本地引入的时候参考的这位大神的文章,毕竟官网的文章过于简单,我还是小白什么都不懂,下面放地址:在vue项目中引入luckysheet_芝士焗红薯的博客-CSDN博客_vue安装luckysheet

我是用以上的方法改良了一下:

git 源码地址:GitHub - dream-num/Luckysheet: Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.

下载好源码之后本地执行:

npm install
npm install gulp -g
  
//跑去源码看看正常与否
npm run dev
  
//如果正常执行打包
npm run build

打包结束后在目录下找到 dist 文件

在public下static文件夹下新建luckysheet文件夹,将dist内的所有文件拷入(我包括那个html一起拷贝咯)

 

在项目的index.html里面按照相对路径引入luckysheet文件(全局搜ref,在那个html里写)

<link rel='stylesheet' href='static/luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='static/luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='static/luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='static/luckysheet/assets/iconfont/iconfont.css' />
<script src="static/luckysheet/plugins/js/plugin.js"></script>
<script src="static/luckysheet/luckysheet.umd.js"></script>

然后其他的参照以上博客的:

定义一个容器:

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

然后:


mounted () {
  this.init()
},
 
methods: {
  init () {
    var options = {
      container: 'luckysheet', // luckysheet为容器id
      title: 'luckysheet', // 表 头名
      lang: 'zh' // 中文
    }
    luckysheet.create(options)
  }

 这时候页面一片空白不说还 报错'luckysheet' is not defined

二、报错'luckysheet' is not defined解决

我的解决方法:

1查看是否引入成功 拼写是否错误

2按照https://www.jb51.net/article/264657.htm的方法

可惜not work

3我把官网的cdn引入的从网址下载下来了,重新导入

4然后我同时把luckysheet.create(options)改成window.luckysheet.create(options),一下就好了~

 如有问题可评论交流,后续会持续更新luckysheet相关问题。。。。。。

以下有个文件中的一个sheet的数据luckysheetfile[0]的结构如下:(凑字数。。。)

{
	"name": "Cell", //工作表名称
	"color": "", //工作表颜色
	"index": "0", //工作表索引
	"status": "1", //激活状态
	"order": "0", //工作表的顺序
	"hide": 0,//是否隐藏
	"row": 36, //行数
	"column": 18, //列数
	"config": {
		"merge":{}, //合并单元格
		"rowlen":{}, //表格行高
		"columnlen":{}, //表格列宽
		"rowhidden":{}, //隐藏行
		"colhidden":{}, //隐藏列
		"borderInfo":{}, //边框
	},
	"celldata": [], //初始化使用的单元格数据
	"data": [], //更新和存储使用的单元格数据
	"scrollLeft": 0, //左右滚动条位置
	"scrollTop": 315, //上下滚动条位置
	"luckysheet_select_save": [], //选中的区域
	"luckysheet_conditionformat_save": {},//条件格式
	"calcChain": [],//公式链
	"isPivotTable":false,//是否数据透视表
	"pivotTable":{},//数据透视表设置
	"filter_select": {},//筛选范围
	"filter": null,//筛选配置
	"luckysheet_alternateformat_save": [], //交替颜色
	"luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色	
	"freezen": {}, //冻结行列
	"chart": [], //图表配置
	"visibledatarow": [], //所有行的位置
	"visibledatacolumn": [], //所有列的位置
	"ch_width": 2322, //工作表区域的宽度
	"rh_height": 949, //工作表区域的高度
	"load": "1", //已加载过此sheet的标识
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409827.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vite + vue3 —— vue地图大屏项目

​回顾 前期 ​ 前端利器 —— 提升《500倍开发效率》 传一张设计稿&#xff0c;点击一建生成项目 好牛_0.活在风浪里的博客-CSDN博客如果非要说它有什么缺点&#xff0c;那么我觉得就是它会&#xff0c;让你cv大法都没处使&#xff01;&#xff01;&#xff01;比如…

React 面向组件编程(下)

目录前言&#xff1a;一、受控组件与非受控组件1. 受控组件2. 非受控组件3. 效果展示4. 总结&#xff1a;二、组件的生命周期1. 对生命周期的理解2. 生命周期的三个阶段&#xff08;旧&#xff09;3. 生命周期的三个阶段&#xff08;新&#xff09;4. 新旧生命周期的区别5. 重要…

微信小程序项目实例——扫雷

今日推荐&#x1f481;‍♂️ 2023许嵩演唱会即将到来&#x1f3a4;&#x1f3a4;&#x1f3a4;大家一起冲冲冲&#x1f3c3;‍♂️&#x1f3c3;‍♂️&#x1f3c3;‍♂️ &#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;往期优质项目实例&#x1f52e…

JavaWeb之Cookie详解(一)

一.Cookie简介 Cookie是在HTTP协议下&#xff0c;服务器维护客户工作站上信息的一种方式&#xff0c;其作用是维护服务端与客户端浏览器的会话状态。由于HTTP协议的特点是无状态性&#xff0c;它对于事务处理没有记忆能力&#xff0c;所以服务端不会记录当前客户端浏览器的访问…

image-conversion 图片压缩,vue

image-conversion &#xff0c;vue&#xff0c;element 需求&#xff1a;需要用户上传图片时候&#xff0c;对大尺寸图片进行压缩&#xff0c;减小图片大小&#xff0c;减少服务器的压力。 用到的第三方插件image-conversion 文档&#xff1a; https://www.npmjs.com/packag…

vue2 前端导出el-table表格为Excel文件 (自带样式)

前话&#xff1a;我只是个自学到工作的小菜鸟&#xff0c;如果有大佬有更好的方法&#xff0c;希望不吝赐教。 1.电脑环境 node版本 14.20.0 vue-cli 4.4.0 (如果你的项目是vue-cli 5 版本&#xff08;即webpack5&#xff09;的会有很多问题&#xff0c;解决办法写在后边)…

echarts:实现3D地图版块叠加动效散点+轮播高亮效果

需求描述 如下图所示&#xff0c;展示3D效果的地图版块&#xff0c;并叠加显示动效散点&#xff1a; 实现思路 首先是3D地图版块效果的实现&#xff0c;可以参考广州3D地图&#xff1b;而动效散点的实现&#xff0c;可以参考地图发散分布。 这里再提一个经过尝试并不行的思…

大学生web前端期末大作业实例代码 (1500套,建议收藏) HTML+CSS+JS

文章目录&#x1f4da;web前端期末大作业 (1500套) 集合一、网页介绍二、网页集合&#x1f48c;表白网页 125套 (集合)&#x1f499;Echarts大屏数据展示 150套 (集合)一、基于HTMLEcharts技术制作二、基于VUEEcharts技术制作&#x1f381;更多源码&#x1f4da;web前端期末大作…

统计网站访问量(自己开发)

网站的运营者或者开发者肯定都想知道&#xff0c;自己网站每天的使用情况。比如每天有多少访问量、用户都点击哪些功能、用户对网站上哪些功能感兴趣。知道了这些信息才能定位网站后面的开发方向&#xff0c;比如持续优化点击率高的模块 、裁撤用户不感兴趣的模块&#xff0c;打…

【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头

一般的话scroll-view在组件里面使用,而页面里面则使用onReachBottom()这个方法居多 1,onReachBottom 上拉触底后加载更多(未固定表头) 页面结构: <view class"box"><table border"0"><thead><th>名称</th><th style&qu…

解决axios异步请求问题(异步变为同步)

遇到的问题 在目前一个需求中&#xff0c;我需要等待axios请求完成后&#xff0c;判断请求是否出现异常&#xff0c;然后来判断是否关闭弹窗 修改后大概代码如下&#xff1a; async submitForm() {let flag false//表单验证&#xff0c;默认通过let formValidation truethis…

HTML小游戏22 —— html5版疯狂光头强网页游戏(附完整源码)

&#x1f482; 网站推荐:【神级源码资源网】【摸鱼小游戏】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】本节教程我会带大家使用 HTML…

利用nvm下载nodejs

利用nvm下载nodejs 在开发过程会一直遇到nodejs的版本问题&#xff0c;直接安装则只有一个版本&#xff0c;极其不方便nvm则是用来管理nodejs的工具&#xff0c;可以通过nvm来安装切换不同版本的nodejs安装前需要先卸载自己原有的node版本&#xff0c;不然那会有可能报错。卸载…

在vue3+vite项目下按需引入vant报错Failed to resolve import解决方案

在vue3vite项目下按需引入vant报错Failed to resolve import解决方案问题描述原因分析解决方案问题描述 近日尝试使用vitevue3vant开发项目过程中&#xff0c;参考vant官网开发指南->快速上手->引入组件 按照上述配置好后&#xff0c;运行vite环境报错&#xff1a;Fai…

【JavaScript】【5】定时器(包含回调函数与Promise)

文章目录前言一、回调函数二、 Promisepromise对象Promise对象的生成加载图片写成一个Promise三、定时器与清除定时器的方法四、京东购物车倒计时案例五、发送验证码案例在这里插入图片描述总结前言 什么是定时器 JavaScript提供定时执行代码的功能&#xff0c;叫做定时器&…

【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目

【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目 文章目录【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目写在前面一、Vue CLI脚手架1.1 认识Vue CLI1.2 Vue CLI 安装和使用二、Vue create 项目的过程2.1 创建项目2.2选择 Manually select features创建2.3 选择Vue的版…

Vue Router4 ,prams 传参失效和报错问题

Vue3 使用 Vue Router 时&#xff0c;prams 传参失效和报错问题 我尝试使用 prams 传递数据 <script setup> import { useRouter } from vue-routerconst router useRouter() const params { id: 1, name: ly, phone: 13246566476, age: 23 } const toDetail () >…

HTML 实现仿 Windows 桌面主题特效

&#x1f482; 个人网站:【海拥】【摸鱼小游戏】【开发文档导航】&#x1f91f; 风趣幽默的人工智能学习网站&#xff1a;&#x1f449;人工智能&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】&#x1f4ac; 免费且实用的计算机相关知识题库&a…

vue 方法按照顺序执行

在调用后台方法的时候&#xff0c;由于调用了多个方法&#xff0c;但是执行的时候并没有按照顺序执行&#xff0c;前端需要后台返回的数据&#xff0c;对数据进行页面展示&#xff0c;由于没有按照顺序执行&#xff0c;导致前台页面报错。解决办法采用new Promise单独执行每个方…

Vue3父子组件间传参通信

Vue3 父子组件间通信前言一、父传子 defineProps二、子传父 defineEmits三、子组件暴露属性给父组件 defineExpose四、依赖注入Provide / Inject参考前言 本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式 Vue3TypeScript 一、父传子 defineProps 父组件传值给…