├── vue.config.js
├── public
    ├── favicon.ico
    ├── index.html
    └── expendPlugins
    │   └── chart
    │       └── chartmix.css
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── App.vue
    └── components
    │   └── HelloWorld.vue
├── babel.config.js
├── .gitignore
├── README-zh.md
├── package.json
├── README.md
└── LICENSE


/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   lintOnSave: false
3 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream-num/luckysheet-vue/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream-num/luckysheet-vue/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img alt="Vue logo" src="./assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import HelloWorld from './components/HelloWorld.vue'
10 | 
11 | export default {
12 |   name: 'App',
13 |   components: {
14 |     HelloWorld
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | #app {
21 |   font-family: Avenir, Helvetica, Arial, sans-serif;
22 |   -webkit-font-smoothing: antialiased;
23 |   -moz-osx-font-smoothing: grayscale;
24 |   text-align: center;
25 |   color: #2c3e50;
26 |   margin-top: 60px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/README-zh.md:
--------------------------------------------------------------------------------
 1 | # luckysheet-vue
 2 | 
 3 | 简体中文 | [English](./README.md)
 4 | 
 5 | ## 介绍
 6 | 这是一个简单展示在vue cli 3项目中使用[Luckysheet](https://github.com/mengshukeji/Luckysheet/)和[Luckyexcel](https://github.com/mengshukeji/Luckyexcel)的案例。
 7 | 
 8 | ## 提示
 9 | 1. `lintOnSave`设置为`false`，否则将报错
10 | 2. 在某些情况下，您需要使用`$nextTick`，然后在其中使用luckysheet初始化方法
11 | 3. 核心代码在 [HelloWorld.vue](./src/components/HelloWorld.vue)
12 | 
13 | ## 开发
14 | 
15 | ### 环境
16 | [Node.js](https://nodejs.org/en/) Version >= 6 
17 | 
18 | ### 安装
19 | ```
20 | npm install
21 | ```
22 | ### 开发
23 | ```
24 | npm run serve
25 | ```
26 | ### 打包
27 | ```
28 | npm run build
29 | ```
30 | 
31 | ## 资源
32 | - [Luckysheet](https://github.com/mengshukeji/Luckysheet)
33 | - [Luckyexcel-node](https://github.com/mengshukeji/Luckyexcel-node)
34 | 
35 | ## 版权信息
36 | [MIT](http://opensource.org/licenses/MIT)
37 | 
38 | Copyright (c) 2020-present, mengshukeji


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "luckysheet-vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "luckyexcel": "^1.0.0",
13 |     "vue": "^2.6.11"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-plugin-eslint": "~4.5.0",
18 |     "@vue/cli-service": "~4.5.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^6.2.2",
22 |     "vue-template-compiler": "^2.6.11"
23 |   },
24 |   "eslintConfig": {
25 |     "root": true,
26 |     "env": {
27 |       "node": true
28 |     },
29 |     "extends": [
30 |       "plugin:vue/essential",
31 |       "eslint:recommended"
32 |     ],
33 |     "parserOptions": {
34 |       "parser": "babel-eslint"
35 |     },
36 |     "rules": {}
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "last 2 versions",
41 |     "not dead"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # luckysheet-vue
 2 | 
 3 | English| [简体中文](./README-zh.md)
 4 | 
 5 | ## Introduction
 6 | This is a simple project that shows the use of [Luckysheet](https://github.com/mengshukeji/Luckysheet/) and [Luckyexcel](https://github.com/mengshukeji/Luckyexcel) in a vue cli3 project
 7 | 
 8 | ## Note
 9 | 1. `lintOnSave` is set to `false`, otherwise an error will be reported
10 | 2. In some cases, you need to use `$nextTick`,then, use the luckysheet initialization method in it
11 | 3. The core code is in [HelloWorld.vue](./src/components/HelloWorld.vue)
12 | 
13 | ## Development
14 | 
15 | ### Requirements
16 | [Node.js](https://nodejs.org/en/) Version >= 6 
17 | 
18 | ### Installation
19 | ```
20 | npm install
21 | ```
22 | ### Development
23 | ```
24 | npm run serve
25 | ```
26 | ### Package
27 | ```
28 | npm run build
29 | ```
30 | 
31 | ## Resources
32 | - [Luckysheet](https://github.com/mengshukeji/Luckysheet)
33 | - [Luckyexcel-node](https://github.com/mengshukeji/Luckyexcel-node)
34 | 
35 | ## License
36 | [MIT](http://opensource.org/licenses/MIT)
37 | 
38 | Copyright (c) 2020-present, mengshukeji
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2020-present, Mengshukeji
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 | 
10 |     <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
11 |     <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
12 |     <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
13 |     <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
14 |     <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
15 |     <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
16 |     
17 |   </head>
18 |   <body>
19 |     <noscript>
20 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
21 |     </noscript>
22 |     <div id="app"></div>
23 |     <!-- built files will be auto injected -->
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/public/expendPlugins/chart/chartmix.css:
--------------------------------------------------------------------------------
1 | .luckysheet-datavisual-quick-menu{width:120px;overflow:auto;margin-top:15px}.luckysheet-datavisual-quick-menu::-webkit-scrollbar{display:none}.luckysheet-datavisual-quick-menu>div{text-align:left;padding:4px 4px;border-right:3px solid #fff;color:#777;cursor:pointer;line-height:1.4em;word-wrap:break-word}.luckysheet-datavisual-quick-menu>div:hover{color:#000}.luckysheet-datavisual-quick-menu>div i{width:15px}.luckysheet-datavisual-quick-menu>div:hover i{color:#ff7e7e}.luckysheet-datavisual-quick-menu>div.luckysheet-datavisual-quick-menu-active{border-right:3px solid #ff7e7e;color:#000;font-weight:700}.luckysheet-datavisual-quick-menu>div.luckysheet-datavisual-quick-menu-active:hover i{color:#000}.luckysheet-datavisual-quick-range{padding:5px 0}.luckysheet-datavisual-range-container{background:#fff;border:1px solid #d9d9d9;border-top:1px solid silver;min-width:20px;width:100%;max-width:200px;display:inline-block}.luckysheet-datavisual-range-container-focus{border:1px solid #4d90fe;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none}.luckysheet-datavisual-range-input,.luckysheet-datavisual-range-input:focus{background:transparent!important;border:none!important;box-sizing:border-box;box-shadow:none;height:25px;margin:0;outline:none!important;padding:1px 8px!important;width:100%}.luckysheet-datavisual-range-button-container{overflow:hidden;padding:0 0 0 8px;text-align:right;width:21px}.luckysheet-datavisual-range-button-container div{padding:2px 10px 0 10px;font-size:18px;cursor:pointer;color:#6598f3}.luckysheet-datavisual-range-button-container div:hover{color:#ff7e7e}.luckysheet-datavisual-quick-m{margin-top:5px;min-height:500px;top:50px;font-size:12px}.luckysheet-datavisual-quick-list{left:110px;right:0;bottom:0;top:80px;position:absolute;overflow:auto;border-top:1px solid #e5e5e5;padding:5px 3px 35px 3px}.luckysheet-datavisual-quick-list-title{padding:4px 6px;background:#e5e5e5;margin-top:10px}.luckysheet-datavisual-quick-list-ul{overflow:hidden}.luckysheet-datavisual-quick-list-item{display:inline-block;margin:5px 8px;border:1px solid #dadada;width:100px;height:80px}.luckysheet-datavisual-quick-list-item:hover{border:1px solid #ff7e7e;box-shadow:0 0 20px #ff7e7e}.luckysheet-datavisual-quick-list-item img{display:inline-block;width:100px;height:80px}.luckysheet-datavisual-quick-list-item-active{border:1px solid #6598f3;box-shadow:0 0 20px #6598f3}.chart-base-slider .el-slider__runway.show-input{margin-right:72px}.chart-base-slider .el-slider__input.el-input-number--mini{width:56px}.chart-base-slider .input_content{margin:6px 0 0 5px}.title{font-weight:700}.el-row{font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.chartSetting{width:100%;height:100%}


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <div style="position: absolute;top:0;">
  4 |         
  5 |         
  6 |         <input style="font-size:16px;" type="file" @change="uploadExcel" />
  7 | 
  8 |         <span>Or Load remote xlsx file: </span>
  9 | 
 10 |         <select v-model="selected" @change="selectExcel">
 11 |           <option disabled value="">Choose</option>
 12 |           <option v-for="option in options" :key="option.text" :value="option.value">
 13 |             {{ option.text }}
 14 |           </option>
 15 |         </select>
 16 | 
 17 |         <a href="javascript:void(0)" @click="downloadExcel">Download source xlsx file</a>
 18 |     </div>
 19 | 
 20 |     <div
 21 |       id="luckysheet"
 22 |       style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 30px;bottom:0px;"
 23 |     ></div>
 24 | 
 25 |     <div v-show="isMaskShow" style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); text-align: center;font-size: 40px;align-items:center;justify-content: center;display:flex;">Downloading</div>
 26 | 
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import LuckyExcel from 'luckyexcel'
 32 | export default {
 33 |   name: 'HelloWorld',
 34 |   props: {
 35 |     msg: String
 36 |   },
 37 |   data(){
 38 |     return {
 39 |       selected:"",
 40 |       options: [
 41 |         { text: 'Money Manager.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/money-manager-2.xlsx' },
 42 |         { text: 'Activity costs tracker.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Activity%20costs%20tracker.xlsx' },
 43 |         { text: 'House cleaning checklist.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/House%20cleaning%20checklist.xlsx' },
 44 |         { text: 'Student assignment planner.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Student%20assignment%20planner.xlsx' },
 45 |         { text: 'Credit card tracker.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Credit%20card%20tracker.xlsx' },
 46 |         { text: 'Blue timesheet.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Blue%20timesheet.xlsx' },
 47 |         { text: 'Student calendar (Mon).xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Student%20calendar%20%28Mon%29.xlsx' },
 48 |         { text: 'Blue mileage and expense report.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Blue%20mileage%20and%20expense%20report.xlsx' },
 49 |       ],
 50 |       isMaskShow: false,
 51 |     }
 52 |     
 53 |   },
 54 |   mounted() {
 55 |     // In some cases, you need to use $nextTick
 56 |     // this.$nextTick(() => {
 57 |           $(function () {
 58 |             luckysheet.create({
 59 |               container: 'luckysheet', // 设定DOM容器的id
 60 |               title: 'Luckysheet Demo', // 设定表格名称
 61 |               lang: 'zh', // 设定表格语言
 62 |               plugins:['chart'],
 63 |               data:[
 64 |                     {
 65 |                         "name": "Cell", //工作表名称
 66 |                         "color": "", //工作表颜色
 67 |                         "index": 0, //工作表索引
 68 |                         "status": 1, //激活状态
 69 |                         "order": 0, //工作表的下标
 70 |                         "hide": 0,//是否隐藏
 71 |                         "row": 36, //行数
 72 |                         "column": 18, //列数
 73 |                         "defaultRowHeight": 19, //自定义行高
 74 |                         "defaultColWidth": 73, //自定义列宽
 75 |                         "celldata": [], //初始化使用的单元格数据
 76 |                         "config": {
 77 |                             "merge":{}, //合并单元格
 78 |                             "rowlen":{}, //表格行高
 79 |                             "columnlen":{}, //表格列宽
 80 |                             "rowhidden":{}, //隐藏行
 81 |                             "colhidden":{}, //隐藏列
 82 |                             "borderInfo":{}, //边框
 83 |                             "authority":{}, //工作表保护
 84 |                             
 85 |                         },
 86 |                         "scrollLeft": 0, //左右滚动条位置
 87 |                         "scrollTop": 315, //上下滚动条位置
 88 |                         "luckysheet_select_save": [], //选中的区域
 89 |                         "calcChain": [],//公式链
 90 |                         "isPivotTable":false,//是否数据透视表
 91 |                         "pivotTable":{},//数据透视表设置
 92 |                         "filter_select": {},//筛选范围
 93 |                         "filter": null,//筛选配置
 94 |                         "luckysheet_alternateformat_save": [], //交替颜色
 95 |                         "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色	
 96 |                         "luckysheet_conditionformat_save": {},//条件格式
 97 |                         "frozen": {}, //冻结行列配置
 98 |                         "chart": [], //图表配置
 99 |                         "zoomRatio":1, // 缩放比例
100 |                         "image":[], //图片
101 |                         "showGridLines": 1, //是否显示网格线
102 |                         "dataVerification":{} //数据验证配置
103 |                     },
104 |                     {
105 |                         "name": "Sheet2",
106 |                         "color": "",
107 |                         "index": 1,
108 |                         "status": 0,
109 |                         "order": 1,
110 |                         "celldata": [],
111 |                         "config": {}
112 |                     },
113 |                     {
114 |                         "name": "Sheet3",
115 |                         "color": "",
116 |                         "index": 2,
117 |                         "status": 0,
118 |                         "order": 2,
119 |                         "celldata": [],
120 |                         "config": {},
121 |                     }
122 |                 ]
123 |             });
124 |           });
125 |       
126 |     // });
127 |   },
128 |   methods:{
129 |     uploadExcel(evt){
130 |         const files = evt.target.files;
131 |         if(files==null || files.length==0){
132 |             alert("No files wait for import");
133 |             return;
134 |         }
135 | 
136 |         let name = files[0].name;
137 |         let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length-1];
138 |         if(suffix!="xlsx"){
139 |             alert("Currently only supports the import of xlsx files");
140 |             return;
141 |         }
142 |         LuckyExcel.transformExcelToLucky(files[0], function(exportJson, luckysheetfile){
143 |             
144 |             if(exportJson.sheets==null || exportJson.sheets.length==0){
145 |                 alert("Failed to read the content of the excel file, currently does not support xls files!");
146 |                 return;
147 |             }
148 |             window.luckysheet.destroy();
149 |             
150 |             window.luckysheet.create({
151 |                 container: 'luckysheet', //luckysheet is the container id
152 |                 showinfobar:false,
153 |                 data:exportJson.sheets,
154 |                 title:exportJson.info.name,
155 |                 userInfo:exportJson.info.name.creator
156 |             });
157 |         });
158 |     },
159 |     selectExcel(evt){
160 |         const value = this.selected;
161 |         const name = evt.target.options[evt.target.selectedIndex].innerText;
162 |         
163 |         if(value==""){
164 |             return;
165 |         }
166 |         this.isMaskShow = true;
167 | 
168 |         LuckyExcel.transformExcelToLuckyByUrl(value, name, (exportJson, luckysheetfile) => {
169 |             
170 |             if(exportJson.sheets==null || exportJson.sheets.length==0){
171 |                 alert("Failed to read the content of the excel file, currently does not support xls files!");
172 |                 return;
173 |             }
174 |             
175 |             this.isMaskShow = false;
176 |             window.luckysheet.destroy();
177 |             
178 |             window.luckysheet.create({
179 |                 container: 'luckysheet', //luckysheet is the container id
180 |                 showinfobar:false,
181 |                 data:exportJson.sheets,
182 |                 title:exportJson.info.name,
183 |                 userInfo:exportJson.info.name.creator
184 |             });
185 |         });
186 |     },
187 |     downloadExcel(){
188 |           const value = this.selected;;
189 | 
190 |           if(value.length==0){
191 |               alert("Please select a demo file");
192 |               return;
193 |           }
194 | 
195 |           var elemIF = document.getElementById("Lucky-download-frame");
196 |           if(elemIF==null){
197 |               elemIF = document.createElement("iframe");
198 |               elemIF.style.display = "none";
199 |               elemIF.id = "Lucky-download-frame";
200 |               document.body.appendChild(elemIF);
201 |           }
202 |           elemIF.src = value;
203 |     }
204 | 
205 |   }
206 | }
207 | </script>
208 | 
209 | <!-- Add "scoped" attribute to limit CSS to this component only -->
210 | <style scoped>
211 | h3 {
212 |   margin: 40px 0 0;
213 | }
214 | ul {
215 |   list-style-type: none;
216 |   padding: 0;
217 | }
218 | li {
219 |   display: inline-block;
220 |   margin: 0 10px;
221 | }
222 | a {
223 |   color: #42b983;
224 | }
225 | </style>
226 | 


--------------------------------------------------------------------------------