canvas 3D球体年会抽奖，结果table表格导出excel表格

最新推荐文章于 2024-05-08 15:32:14 发布
最新推荐文章于 2024-05-08 15:32:14 发布
阅读量2.1k 收藏 7
点赞数 1
文章标签： vue es6 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p1382526/article/details/103892834
版权

情景：年关来了，公司需要一个抽奖小游戏，参照了网站的一些代码，自己又做了一些优化，有些需要优化的请留言，

demo地址：https://github.com/penpeng617/lottery

运用技术：vue，axios，mock，element-ui

功能实现：奖项选择、奖项数量设置、中奖结果查看、中奖信息excel表格导出到本地
效果如下：
在这里插入图片描述
最近新上传的本地表格导入抽奖名单
demo地址：https://github.com/penpeng617/lottery-excel

行走在边缘
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas实现扭蛋机动画效果的示例代码
09-22
主要介绍了canvas实现扭蛋机动画效果的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
年会 炫酷 抽奖小程序
u011282838的博客
01-07 3230
年会炫酷抽奖小程序支持以下功能: 1.抽奖时自动播放背景音乐，中奖之后随即播放中奖音乐 2.中奖后自动从抽奖池移除 3.中奖之后支持从中奖名单移除，重新回到抽奖池，防止误操作 4.上手容易不用改代码，只是改下员工姓名和图片即可 5.支持黑名单，即某些人不允许中奖 6.支持重置功能 7.球体自动旋转，抽奖时加速非常炫酷 ...
教你如何用VUE实现一个无缝横向滚动抽奖的效果
最新发布
BIlly Feng的博客
05-08 1389
为了实现横向无缝滚动奖品，作者提前放了多组重复奖品列表，比如原先奖品列表有10个奖品，我们可以放置多几组重复奖品列表，所以奖品的数量（10 * n），为了效果更逼真，如果动画时间长的话，可以适当再加几组，让效果更加逼真。，那么我们点击滚动的时候，为了动画效果，自然要从第一组滚到最后一组，如我们要抽中第一个奖品，即第一组第一个奖品要滚到最后一组的第一个奖品，而且最后一组第一个奖品要在中间位置，我们可以计算好这个距离，这个距离怎么计算呢？我们可以看到停止时，第一个奖品的左边的奖品消失了，为什么呢？
js实现公司年会抽奖活动（亲测可用）
m0_71349739的博客
01-12 1145
1.首先设置奖励数组。2.设置random随机数。3.给点击按钮做一个防抖动作，避免用户在多次点击造成性能浪费，然后设置0.1秒随机给li标签添加高亮显示，首先要forEach循环li标签，清除所有的高亮。4.设置空数组，将抽到的奖励放到这个数组中，进行渲染页面。5.判断是否点击了开始抽奖按钮，点击结束抽奖按钮，清除定时器。
vue项目引入cesium,创建3d地球,快速上手~
白云苍狗
05-23 3867
vue项目中简单快速引入cesium,创建3d地球,简单封装自己的cesium
jQuery表格导出excel文件代码
06-24
本文将详细讲解如何使用jQuery实现表格数据导出为Excel、PDF和CSV文件的功能，以及相关的实现技术和步骤。 首先，要实现表格数据的导出，我们需要借助一些外部库。对于Excel导出，可以使用`js-xlsx`或`FileSaver.js...
复杂多表头excel表格的导出及布局，支持拓展
02-22
本知识点将深入探讨如何在Excel中创建和导出复杂多表头的表格，并支持进一步的拓展。 首先，多表头的设置是为了更好地分类和展示数据。在Excel中，可以利用合并单元格和嵌套表格头来实现这一目标。例如，对于一个...
table表格导出为excel
08-09
通过以上介绍，我们可以看出，将table表格导出为excel是网页开发中的一个重要功能，它涉及前端和后端技术，以及对数据处理和用户体验的理解。在实际项目中，开发者需要根据具体需求和环境选择合适的工具和方法来实现...
Ligerui Table导出excel 支持样式、冻结行列、图片等导出
12-19
标题"“Ligerui Table导出excel 支持样式、冻结行列、图片等导出”"指出了LigerUI Table导出Excel功能的三个主要特色： 1. **原样式导出**：此功能意味着LigerUI Table在导出数据时，会尽可能地保留表格在网页上...
微信小程序实现的绘制table表格功能示例
10-17
在微信小程序中，绘制table表格是一项常见的需求，用于展示数据或进行数据分析。下面将详细介绍如何在微信小程序中实现这一功能，以及涉及到的数据读取和界面布局相关操作。 首先，我们需要理解微信小程序的基本...
3D抽奖(微信)
01-26
3D微信抽奖
html5 canvas彩色虚幻发光丝带3D旋转动画特效
06-11
基于html5 canvas绘制的彩色虚幻发光丝带3D旋转动画特效，通过鼠标拖动控制3D旋转。
Vue组件实现数字滚动抽奖效果
Crazy_GirlLL的博客
05-18 3509
以下我是根据该作者做的一点点得修改 https://www.jb51.net/article/240059.htm <template> <div class="info-span04" style="color: #333333;"> <p @click="begin" style="cursor:pointer;padding:10px;border:1px solid red;display:inline-block;margin-right:10px"
Vue3 实现随机抽奖（分类、概率控制）
Etc.End的博客
03-09 1278
假设我今天对于吃正餐还是小吃很纠结，始终确定不下来😣😣。于是我就做了下面这个和抽奖一样的东西，抽到啥吃啥😅😅。正餐我给的probability是20，小吃是80。比如一个盒子里面有100张纸。20纸上面写着我的正餐，剩下的都是小吃，那我抽中的概率就是20%🌟🌟🌟🌟。
年会抽奖程序，及时安排一波【开源项目】
Java笔记虾
01-30 1550
lucky-lottery年会抽奖软件logo效果图效果图开发目的每年公司都有年会，每次都要到网上找这样的抽奖软件， 要么需要花钱买，这样的软件一般的公司是不在采购范围， 要么有人数限制...
抽奖 java_年会抽奖程序 java开发 可内定中奖人员 一键导入员工 使用简单
weixin_39581318的博客
02-20 936
LuckDrawJava开发 包含后端+前端可内定中奖人员支持Excel表格一键导入员工使用技术：RedisEasyPOIVue程序截图 运行程序(Windows环境)2、解压release包3、双击“运行程序.bat”4、使用RedisDesktopManager点击下载连接本地redis，默认端口63795、进入redis console db0 执行命令set token xxxx(你...
基于vue2.0+ 抽奖项目
weixin_34000916的博客
01-26 4353
前言 临近年关抽奖活动，基于vue2.0+开发的抽奖项目。 便于查看效果，贴上相关地址： 在线示例地址：快速访问 github地址：查看源码 简介 基于vue.js抽奖项目，截屏保存每次抽奖图片至本地，附带背景音乐 技术栈：vue + vuex + vue-router + axios + elementUI + mock + html2canvas + nprogress + less...
ant design pro + react 导出Excel表格包含图片
05-11
要导出Excel表格包含图片，可以使用以下步骤： 1. 安装 `xlsx` 和 `file-saver` 模块。 ``` npm install xlsx file-saver --save ``` 2. 编写导出Excel表格的函数。 ```javascript import XLSX from 'xlsx'; import FileSaver from 'file-saver'; const exportExcel = (data) => { const wb = XLSX.utils.book_new(); const ws = XLSX.utils.json_to_sheet(data); wb.Sheets['Sheet1'] = ws; // 添加图片 const imgData = 'base64图片数据'; // 替换为实际的图片数据 const img = new Image(); img.src = imgData; const ctx = document.createElement('canvas').getContext('2d'); ctx.drawImage(img, 0, 0); const imageData = ctx.canvas.toDataURL('image/jpeg'); const imageBlob = dataURItoBlob(imageData); const imageFile = new File([imageBlob], 'image.jpg', { type: 'image/jpeg' }); const imageId = XLSX.utils.generate_sheet_image_id(); wb.SheetNames.push('Images'); wb.Sheets['Images'] = {}; wb.Sheets['Images'][imageId] = { '!type': 'jpeg', '!data': imageFile, }; ws['!images'] = [{ id: imageId, start: { row: 0, column: 0 }, end: { row: 0, column: 0 } }]; const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' }); FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'data.xlsx'); }; // 将Base64图片数据转换为Blob对象 const dataURItoBlob = (dataURI) => { const byteString = atob(dataURI.split(',')[1]); const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; const ab = new ArrayBuffer(byteString.length); const ia = new Uint8Array(ab); for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], { type: mimeString }); }; // 将字符串转换为ArrayBuffer const s2ab = (s) => { const buf = new ArrayBuffer(s.length); const view = new Uint8Array(buf); for (let i = 0; i < s.length; i++) { view[i] = s.charCodeAt(i) & 0xff; } return buf; }; ``` 上述代码中，`data` 是要导出的数据数组，`imgData` 是要导出的图片数据，可以替换为实际的图片数据。`exportExcel` 函数将数据和图片添加到Excel工作簿中，并将工作簿下载到本地。 3. 调用导出Excel表格的函数。 ```javascript const data = [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, ]; exportExcel(data); ``` 上述代码中，`data` 是要导出的数据数组，调用 `exportExcel` 函数将数据和图片添加到Excel工作簿中，并将工作簿下载到本地。 以上就是Ant Design Pro + React导出Excel表格包含图片的实现方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值