位置: IT常识 - 正文

【VUE 项目中使用luckysheet(在线表格)】(vue中的...)

编辑:rootadmin
【VUE 项目中使用luckysheet(在线表格)】 VUE 项目中使用luckysheet描述资料本地引入组件开发创建组件组件使用使用中遇到的问题1. 后台图表chartMix报undefined2. 回显时默认显示第一个sheet3. 单元格内换行后复制报错4. 公式栏不显示类似html元素的值<abc>5. 导入带批注的Excel文件成功,但是批注消失6. 无法将图片插入到单元格中7. 只读模式下禁止复制8. 打印功能9. 单元格输入单引号后无法删除10. 只读模式下禁止键盘按钮(1) 修改文件keyboard.js(2) keydown监听事件其他问题的解决描述

推荐整理分享【VUE 项目中使用luckysheet(在线表格)】(vue中的...),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中key,vue中key,vue项目使用axios,vue项目使用axios,vue在项目中怎么用的,vue中的...,vue使用,vue使用,内容如对您有帮助,希望把文章链接给更多的朋友!

🚀Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。但目前仅支持xlsx格式。

资料

官方文档: 快速上手 | Luckysheet文档 参考: 配置项 导出需要用到的export.js

本地引入官网下载源码安装依赖:运行命令npm i打包:运行命令npm run build,会得到文件夹dist复制dist文件夹中所有文件除了(除了index.html)粘贴到自己的项目在Vue 项目的public 目录下。Vue 项目中安装scriptjs:运行命令npm i scriptjs前端方法导出需要安装exceljs、file-saver组件开发创建组件<template><div class="document"><input style="font-size:16px;" type="file" @change="uploadExcel" /><a href="javascript:void(0)" @click="downloadExcel">Download source xlsx file</a><div :id="id" ref="luckysheetContainer" class="luckysheetContainer"></div></div></template><script>import $script from 'scriptjs'//用于引入css和js//导入库export.js 这个文件是es6的,不能在普通的HTML文件直接引入js文件(虽然都是js文件,但是有区别,具体请百度es6与es5)!需要把es6转es5才可以直接引入使用!import {testaaa,exportExcel} from './export'//文件链接第一节的资料中export default {name: "LuckyExcel",props: { leTitle: {type: String,default: ''}, leData: {type: Array,default: [{name:'Sheet1'}],},disabled: {type: Boolean,default: false }, id:{ type:String, default:'luckysheetContainer' }},data() {return {luckySheet: null,};},created() { this.load();},mounted() {},methods: { /** * 加载编辑器 */ load(){ this.$nextTick(() => { // 设置全局变量,因为 editormd 依赖 jquery window.$ = window.jQuery = $; // 异步加载并执行 $.getScript('/luckysheet/plugins/js/plugin.js', () => { $script('/luckysheet/luckysheet.umd.js', () => {if(this.disabled){ this.createROLuckyExcel(); }else{ this.createLuckyExcel(); };}); }); // 加载css $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/plugins/css/pluginsCss.css')); $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/plugins/plugins.css')); $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/css/luckysheet.css')); $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/assets/iconfont/iconfont.css')); }); }, /** * 只读版luckyExcel 创建 */ createROLuckyExcel(){ if(this.luckySheet) this.luckySheet.destroy(); this.$nextTick(() => { let _this = this; $(function () { luckysheet.create({ container: _this.id, //容器的ID title: _this.leTitle?_this.leTitle:'未命名文档', // 工作簿名称 lang: "zh", // 设定表格语言 国际化设置,允许设置表格的语言,支持中文("zh")和英文("en") allowCopy: false, // 是否允许拷贝 showtoolbar: false, // 是否显示工具栏 showinfobar: false, // 是否显示顶部信息栏 showsheetbar: false, // 是否显示底部sheet页按钮 showstatisticBar: false, // 是否显示底部计数栏 sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置 allowEdit: false, // 是否允许前台编辑 enableAddRow: false, // 允许增加行 enableAddCol: false, // 允许增加列 userInfo: false, // 右上角的用户信息展示样式 showRowBar: false, // 是否显示行号区域 showColumnBar: false, // 是否显示列号区域 sheetFormulaBar: false, // 是否显示公式栏 enableAddBackTop: false,//返回头部按钮 rowHeaderWidth: 0,//纵坐标 columnHeaderHeight: 0,//横坐标 showstatisticBarConfig: { count:false, view:false, zoom:false, }, showsheetbarConfig: { add: false, //新增sheet menu: false, //sheet管理菜单 sheet: false, //sheet页显示 }, hook: { cellMousedown:this.cellMousedown,//绑定鼠标事件 }, forceCalculation: true,//强制计算公式 data:_this.leData, }); _this.luckySheet = luckysheet; }); }); },/** * luckyExcel 创建 */createLuckyExcel() {this.$nextTick(() => { // 创建编辑器实例 let _this = this; $(function () { luckysheet.create({ container: _this.id, data:_this.leData, title: _this.leTitle?_this.leTitle:'未命名文档', // 工作簿名称 lang: "zh", // 设定表格语言 国际化设置,允许设置表格的语言,支持中文("zh")和英文("en") showinfobar: false, }); _this.luckySheet = luckysheet; });});},/** * wangEditor 销毁 */destroyLuckyExcel() { if(this.luckySheet){ this.luckySheet.destroy(); this.luckySheet = null; };},/** * 获取 luckyExcel 数据 */getLuckysheetData() {return this.luckySheet.getAllSheets();},/** * 获取 luckyExcel 数据 */luckyExcelExitEditMode() { if(this.luckySheet){ return this.luckySheet.exitEditMode(); };},uploadExcel(evt){ let _this=this; const files = evt.target.files; if(files==null || files.length==0){ alert("No files wait for import"); return; } let name = files[0].name; let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length-1]; if(suffix!="xlsx"){ alert("Currently only supports the import of xlsx files"); return; } LuckyExcel.transformExcelToLucky(files[0], function(exportJson, luckysheetfile){ if(exportJson.sheets==null || exportJson.sheets.length==0){ alert("Failed to read the content of the excel file, currently does not support xls files!"); return; } _this.luckySheet.destroy(); console.log('exportJson.sheets',exportJson.sheets) _this.luckySheet.create({ container: _this.id, //luckysheet is the container id showinfobar:false, data:exportJson.sheets, title:exportJson.info.name, userInfo:exportJson.info.name.creator }); }); }, downloadExcel(){ exportExcel(luckysheet.getAllSheets(),"下载") console.log('luckysheet.getAllSheets()s',luckysheet.getAllSheets()); }}};</script><style src="./LuckyExcel.scss" lang="scss" scoped></style><style lang="scss" > .luckysheet-cols-menu{ z-index: 9004 !important; } .luckysheet-input-box{ z-index: 3000 !important; } .luckysheet-wa-editor{ z-index: 2005 !important; } #luckysheet-icon-morebtn-div{ z-index: 3000 !important; } .luckysheet-modal-dialog-slider{ z-index: 2005 !important; } .chartSetting{ z-index: 3000 !important; }</style>//LuckyExcel.scss.document{position: relative;width:100%;height: 100%;-webkit-animation-fill-mode: none; animation-fill-mode: none; .luckysheetContainer{ margin:0px; padding:0px; position:absolute; width:100%; left: 0px; top: 0px; bottom:0px; }}组件使用

注意:

全局只能创建一个LuckyExcel,创建多个最后只会显示最后一个一定要传入不同的id//html<div class="viewLEWrapper"> <lucky-Excel ref="viewLuckyExcel" :leData="viewLEData" :disabled="true" :id="'viewLuckyExcel'" v-if="showViewLuckyExcel"></lucky-Excel></div>//组件引入components:{ LuckyExcel: () => import('@/components/LuckyExcel/LuckyExcel.vue'),},//methodsload(){this.viewLEData = content;//获取到的表格数据 if(this.showViewLuckyExcel){//true代表已经加载过LuckyExcel,直接调用组件中的创建函数来加载LuckyExcel this.$refs.viewLuckyExcel.createROLuckyExcel(); }else{ this.showViewLuckyExcel = true; };},使用中遇到的问题1. 后台图表chartMix报undefined

原因是引用地址错误。 将luckysheet.umd.js中expendPlugins/chart/chartmix.umd.min.js改为luckysheet/expendPlugins/chart/chartmix.umd.min.js。expendPlugins/chart/chartmix.css改为luckysheet/expendPlugins/chart/chartmix.css。

2. 回显时默认显示第一个sheetlet getLuckyexcelData = this.$refs.luckyexcel.getLuckysheetData(); // 获取luckysheet数据//显示默认显示第一个sheetgetLuckyexcelData.forEach((item,index) => { if(index == 0){ item.status = 1; }else{ item.status = 0; };});3. 单元格内换行后复制报错【VUE 项目中使用luckysheet(在线表格)】(vue中的...)

解决Luckysheet单元格内换行后复制报错问题

4. 公式栏不显示类似html元素的值

解决Luckysheet公式栏不显示类似html元素的值

5. 导入带批注的Excel文件成功,但是批注消失

导入带批注的Excel文件成功,但是批注消失

6. 无法将图片插入到单元格中

无法将图片插入到单元格中

7. 只读模式下禁止复制

只读模式下禁止复制

8. 打印功能

打印功能 luckysheet实现打印

9. 单元格输入单引号后无法删除

单元格输入单引号后无法删除

10. 只读模式下禁止键盘按钮(1) 修改文件keyboard.jsimport { checkIsAllowEdit } from '../global/validate';

(2) keydown监听事件mounted(){window.addEventListener("keydown",(e) => {if((e.ctrlKey && e.code == "KeyC") ||(e.ctrlKey && e.code == "KeyX") ||(e.metaKey && e.code == "KeyC") ||(e.metaKey && e.code == "KeyX")){e.stopPropagation();}},{capture:true});},其他问题的解决

其他问题的解决

本文链接地址:https://www.jiuchutong.com/zhishi/269443.html 转载请保留说明!

上一篇:win11重置系统保留个人文件的方法步骤(win11重置系统保留我的文件)

下一篇:无线网连上却上不了网(无线网连上却上不了网络)

  • vivox70怎么设置双击锁屏(vivox70怎么设置动态壁纸)

    vivox70怎么设置双击锁屏(vivox70怎么设置动态壁纸)

  • 压缩视频会影响画质吗(压缩视频会影响时长吗)

    压缩视频会影响画质吗(压缩视频会影响时长吗)

  • 华为荣耀10为什么4g变2g(华为荣耀10为什么会自动重启)

    华为荣耀10为什么4g变2g(华为荣耀10为什么会自动重启)

  • 固态硬盘的好处(安装固态硬盘的好处)

    固态硬盘的好处(安装固态硬盘的好处)

  • 电脑开机后反应特别慢怎么办(电脑开机后反应特别慢啥都打不开)

    电脑开机后反应特别慢怎么办(电脑开机后反应特别慢啥都打不开)

  • word水绿色怎么设置(word水绿色怎么调rgb)

    word水绿色怎么设置(word水绿色怎么调rgb)

  • 微信红包多久过期(微信红包多久过期退回)

    微信红包多久过期(微信红包多久过期退回)

  • 华为荣耀20可以开空调吗(华为荣耀20可以插内存卡吗)

    华为荣耀20可以开空调吗(华为荣耀20可以插内存卡吗)

  • 腾达ac6是千兆路由器吗(腾达ac7是千兆端口吗)

    腾达ac6是千兆路由器吗(腾达ac7是千兆端口吗)

  • 华为cdyan90什么型号(华为cd丫一an90)

    华为cdyan90什么型号(华为cd丫一an90)

  • 抖音黄v认证的条件是什么(抖音黄v认证的步骤)

    抖音黄v认证的条件是什么(抖音黄v认证的步骤)

  • win10快速关机(win10快速关机设置)

    win10快速关机(win10快速关机设置)

  • ae安装失败是怎么回事(ae安装失败是为啥)

    ae安装失败是怎么回事(ae安装失败是为啥)

  • 苹果x和苹果6哪个屏幕大(苹果x和苹果6哪个好一点)

    苹果x和苹果6哪个屏幕大(苹果x和苹果6哪个好一点)

  • nova6指纹解锁在哪个位置(华为nova6指纹锁)

    nova6指纹解锁在哪个位置(华为nova6指纹锁)

  • rm格式用什么播放器打开(rm文件用什么播放器播放)

    rm格式用什么播放器打开(rm文件用什么播放器播放)

  • qq轮船多久会掉(qq轮船多久出来)

    qq轮船多久会掉(qq轮船多久出来)

  • 爱奇艺如何登录(爱奇艺如何登录另一台手机)

    爱奇艺如何登录(爱奇艺如何登录另一台手机)

  • 手机备份占用内存吗(手机备份占用空间吗)

    手机备份占用内存吗(手机备份占用空间吗)

  • word怎么只删除表格内容(word怎么只删除英文)

    word怎么只删除表格内容(word怎么只删除英文)

  • 多多果园删好友后怎么加(多多果园删好友对方知道吗)

    多多果园删好友后怎么加(多多果园删好友对方知道吗)

  • ps怎么把衣服p掉(ps怎么把衣服p掉教程)

    ps怎么把衣服p掉(ps怎么把衣服p掉教程)

  • 京东怎么删除预约(京东如何删除预约商品)

    京东怎么删除预约(京东如何删除预约商品)

  • 一加7怎么没有耳机口(一加7怎么没有指纹解锁)

    一加7怎么没有耳机口(一加7怎么没有指纹解锁)

  • 抖音成立于哪一年(抖音成立哪一年,最火又是哪一年)

    抖音成立于哪一年(抖音成立哪一年,最火又是哪一年)

  • vivox9有打印功能吗(vivo x50打印功能)

    vivox9有打印功能吗(vivo x50打印功能)

  • xr为什么会黑屏(xr为什么黑屏转圈圈)

    xr为什么会黑屏(xr为什么黑屏转圈圈)

  • 直播唱歌需要什么设备(直播唱歌需要什么配置)

    直播唱歌需要什么设备(直播唱歌需要什么配置)

  • 延迟收货可以延迟几天(延迟收货可以延迟多长时间淘宝)

    延迟收货可以延迟几天(延迟收货可以延迟多长时间淘宝)

  • Pont Rouge (Red Bridge) over the Palmer River in Sainte-Agathe-de-Lotbinière, Quebec, Canada (© Jean Surprenant/Getty Images)

    Pont Rouge (Red Bridge) over the Palmer River in Sainte-Agathe-de-Lotbinière, Quebec, Canada (© Jean Surprenant/Getty Images)

  • 芒通,法国 (© Flavio Foglietta/Getty Images)

    芒通,法国 (© Flavio Foglietta/Getty Images)

  • 【HTML+CSS】实现网页的导航栏和下拉菜单(html cssjs)

    【HTML+CSS】实现网页的导航栏和下拉菜单(html cssjs)

  • 小规模纳税人进项发票怎么做账
  • 暂估材料收到发票后是更正还是红冲
  • 专利资本化条件
  • 物业公司收款一般多久
  • 定额备用金的账务处理
  • 小规模出租不动产免税吗
  • 非居民企业股权转让所得税
  • 零售行业的销售员有加班费吗
  • 银行的划分标准
  • 申报截止日期前还能用吗
  • 建筑行业劳务费开发票可以开工程款吗?
  • 出租房屋的房产税怎么算
  • 收费公路通行费增值税电子普通发票
  • 建筑业简易征收的适用范围
  • 报税申报不了
  • 税盘显示已过开票截止日期
  • 企业当年发生的某些费用
  • 如何确定连锁店的纳税地点?
  • 收银员现金管理流程
  • 破产清算重整和解
  • 广告业发生错账怎么办
  • 投资回报周期是多少天
  • 去年的发票今年怎么做会计分录
  • 公司员工私车公用协议要签吗
  • 土地使用权进项税如何抵扣
  • 政府土地购买流程
  • PHP:spl_autoload_call()的用法_spl函数
  • dat文件转换成wps表格
  • 带薪缺勤会计分录
  • laravel视频教程
  • php时间戳转换中国标准时间
  • php 通信
  • axios请求设置超时时间
  • php cache缓存
  • Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
  • 公司期货套期保值会计处理方法
  • Linux sqlite3 基本命令
  • 小规模超过30万怎么交增值税
  • 对公账户有法律效力吗
  • 员工的提成
  • 利息收入交税不
  • 累计折旧需要分录吗
  • 合同资产和合同负债的区别
  • 转让不动产增值税征收管理办法
  • 委托加工账务处理受托方会计分录
  • 期末留抵税额和账上哪一个数对应
  • 以前年度错误账务处理
  • 项目清算后未售房产怎么纳税
  • 长期待摊费用会计分录
  • 用银行存款支付本季度短期借款利息
  • 电子商业承兑会不会拿不到钱
  • 质保期内出现质量问题,一直没有修复
  • 公司自己搭建的房子出租可以按投资性房地产吗
  • 取得的政府补助收入计入
  • 国税局个人所得税怎么申报
  • 企业增资扩股如何办理
  • 银行本票的使用仅限于
  • 免于填报什么意思
  • 小企业建账选哪种会计制度
  • sql server利用触发器向表中输入时间
  • win7系统如何重新分区
  • ubuntu20.04怎么样
  • freebsd安装教程
  • win8.1使用
  • centos 虚拟化
  • ssonsvr.exe - ssonsvr是什么进程
  • 解决安全问题的有效途径
  • macbookpro移到废纸篓快捷键
  • 命令行sudo无效
  • win7系统打开java的控制面板的方法
  • Android游戏开发入门
  • cocos2d教程
  • opengl英文
  • 利用python-Flask框架搭建本地数据可视化网站 原创
  • unity配置安卓sdk
  • javascriptz
  • JavaScript Math.round() 方法
  • 如何查询税务是否签订三方
  • 可转债中签当天扣款吗
  • 税务会计业务处理流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设