Hi,How are you doing?
我是职场编码(CodeVoc)。
在E000中,我们介绍了Node.js、Ruby、Electron等工具下载安装。
这期,给你演示一下由Electron联合Ruby制作的小工具。
知乎视频www.zhihu.com借助Electron官方Demo,我们很容易制作一个工具展示平台。
点击“View Demo”会弹出我们的工具界面。
一、项目需求
这个工具的主要目的是为了把文字内容写入Excel表格。
它可以选择待写入的目标文件,选择文件后,文件路径会显示在单行输入框内。
点击“写入”按钮,会打开Excel文件,在A1单元格显示我们写入的文字内容。
二、界面设计
案例网页由head、body两部分组成,他们都写在html封闭标签内部。
<html>
<head>
<title></title>
</head>
<style type="text/css">
</style>
<body>
<script type="text/javascript">
</script>
</body>
</html>
网页标题写在<title></title>标签中间。
html组件写在<body></body>标签中间。
css样式写在<style></style>标签中间。
javascript逻辑写在<script></script>标签中间。
由此可见,
<> </>用尖括号和反尖括号包裹的区域就是网页编程核心。
在网页世界里,标签也具有属性。
类、ID、类型等等,这些都是标签属性。
标签属性和标签间隔一个空格,呆在尖角<>里。
如,
标签类:<class="">
标签ID:<ID="">
标签类型:<type="">
标签名:<name="">
标签值:<value="">
标签提示信息:<placeholder="">
html:
html是网页的骨架结构,首先生成想要的组件。
根据案例E001,我们需要1个标签,1个单行输入框,1个文本框,2个按钮。
另外,还需要form表单标签、div标签进行空间排版设计。
标签:标签内容
单行输入框:<input>
文本框:<textarea></textarea>
普通按钮:<input type="button">
文件选择按钮:<input type="file">
布局标签:<form></form><div></div>
css:
我们想要对标签进行美化,首先需要选中标签。
大多数情况,我们可以通过标签选择器选中标签。
案例常用标签选择器有标签选择器、类选择器、ID选择器三种。
标签选择器:标签名 { } ,即标签名 + 花括号 { }。
ID选择器:# 标签ID名 , 标签ID名 { },即井号 + 标签ID名 + 花括号 { }。
类选择器:. 标签类名 { },即点号 + 标签类名 + 花括号 { }
在花括号内,我们就可以通过设置宽高,上下左右边距,颜色等属性值进行美化。
请在四点前白后绿气泡某杺平台,关注“职场编码”查看源码。
javascript:
javascript简称“js”,用于设计交互操作,如点击按钮弹出一个文件选择对话框等等。
在html阶段,我们通过<input id="input_line">生成单行输入框。
在js阶段,我们通过document.getElementById('input_line')选中它。
var input_line=document.getElementById('input_line')
我们给它添加一个"change"事件,
自然语言表述为当“input_file”标签发生变化时,将“input_file”的标签值作为参数1直接赋值给“input_line”标签。
input_line.value=document.getElementById('input_file').files[0].path
接着,给ID为execute的标签添加一个单击事件,
当鼠标单击execute按钮时,获取<textarea>标签值作为参数2。
var input_word=document.getElementById('input_word').value
继续,利用下方指令调用本地Ruby脚本,完成写入操作。
const { spawn } = require('child_process')
const ls = spawn('ruby', ['Ruby脚本完整路径',参数1,参数2])
三、逻辑梳理
=> 基础语法
引用Ruby标准库
require "win32ole"
创建双参数入口方法
Write_in_excel(path,txt)
接收控制台传双参
Write_in_excel(ARGV[0],ARGV[1])
=> 对象模型
本案例Excel根模型下有三层对象
Application -> Workbook -> Worksheet -> Cells
创建可视化Excel应用
@eap=WIN32OLE::new("excel.application");@eap.visible=true
打开工作簿
ebk=@eap.workbooks.open(path)
执行txt写入cells(1,1)单元格操作
ebk.worksheets(1).cells(1,1).value=txt
欢迎关注四点前白后绿气泡某杺平台,关注“职场编码”查看源码。