Question

我目前正在使用ruby

创建HTML格式的报告页面

一个例子是：

fileHtml = File.new("filename.html", "w+")

fileHtml.puts "<HTML>"
fileHtml.puts "<HEAD>"
fileHtml.puts "<style media='all' type='text/css'>"
fileHtml.puts "body {font-family: Helvetica Neue, sans-serif; font-size: 18px; color: #525252; padding: 0; margin: 0;background: #f2f2f2;}"
fileHtml.puts ".content {max-width:1180px; padding: 40px;}"
fileHtml.puts ".div1 {margin-top: 28px; margin-bottom: 1px; background-color: #fff; padding: 10px 40px; padding-bottom: 8px; }"
fileHtml.puts ".div2 {margin-top: 2px; height:25%; margin-bottom: 28px; background-color: #fff; padding: 10px 40px; padding-bottom: 8px; }"
fileHtml.puts ".header {background-color: white; height: 16%; min-height: 110px; position: relative; width: 100%; -webkit-user-select: none;}"
fileHtml.puts ".secondSection {background-color: #e8e8e8; height: 16%; min-height: 110px; position: relative; width: 100%; -webkit-user-select: none;}"
fileHtml.puts ".pass {color: #ffffff; background: #34d9a2; padding: 10px 20px 10px 20px; text-decoration: none; width:50px;}"
fileHtml.puts ".fail {color: #ffffff; background: #f25e6a; padding: 10px 20px 10px 20px; text-decoration: none; width:50px;}"
fileHtml.puts "</style>"
fileHtml.puts "</HEAD>"
fileHtml.puts "<BODY>"
fileHtml.puts "<DIV class='header'><img src='img.png' alt='logo'></div>"
fileHtml.puts "<DIV class='secondSection'><p>#{dateTime}</p><p>#{platform}</p><p>#{log}</p></div>"
fileHtml.puts "<DIV class='content'>"
fileHtml.puts "<DIV class='div1'><h2>Test Case 001: name</h2></DIV>"
fileHtml.puts "<DIV class='div2'><p class='pass'>#{pass}</p><p class='fail'>#{fail}</p></DIV>"
fileHtml.puts "</DIV>"
fileHtml.puts "</BODY></HTML>"

fileHtml.close()

想知道我是否接近这个错误，以及是否有另一种方法来创建HTML文件并插入存储的变量结果

Answer 1

我认为你的意思是embedded Ruby or ERB for short。您可以将模板另存为单独的文件，例如template.erb。然后，您可以使用简单标记在ruby脚本中呈现内容，例如<%= @var %>。您可以将binding传递给ERB，这样您就可以在@内访问实例变量（开头为template.html.erb的变量）：

<HTML>
<HEAD>
  <!-- etc... -->
</HEAD>
<BODY>
  <DIV class='header'><img src='img.png' alt='logo'></div>
  <DIV class='secondSection'>
    <p><%= @date_time %></p>
    <p><%= @platform %></p>
    <p><%= @log %></p>
  </div>
  <DIV class='content'>
  <DIV class='div1'>
    <h2>Test Case 001: name</h2>
  </DIV>
  <DIV class='div2'>
    <p class='pass'><%= @pass %></p>
    <p class='fail'><%= @fail %></p>
  </DIV>
</BODY>
</HTML>

然后，在你的程序中：

# do computation and set your instance variables
@date_time = ...
@platform  = ...
@log       = ...
@pass      = ...
@fail      = ...

# render template
template = File.read('./template.html.erb')
result = ERB.new(template).result(binding)

# write result to file
File.open('filename.html', 'w+') do |f|
  f.write result
end

# file is closed automatically with File.open do ... end

你甚至可以在模板中做更高级的东西，比如循环：

<% [1,2,3].each do |number| %>
  <%= number %>
<% end %>

注意<% ... %>（仅运行代码）和<%= ... %>之间的区别，后者将获取返回值并且＆＃34;写＆＃34;它的字符串表示形式。

Answer 2

确实 - 不是一个，而是很多。一个简单的方法是使用heredoc字符串格式：

string = <<-EOF
<HTML>
<HEAD>
... #{pass} ....
</HTML>
EOF

另一个是使用模板引擎。其中一个已经融入Ruby核心库：ERb。

对于更多的抽象，你可以看看Haml和Sass的宝石，或者Slim。

Answer 3

使用heredoc怎么样？

fileHtml = File.new("filename.html", "w+")

fileHtml.write <<EOH
<HTML>
<HEAD>
<style media='all' type='text/css'>
body {font-family: Helvetica Neue, sans-serif; font-size: 18px; color: #525252; padding: 0; margin: 0;background: #f2f2f2;}
.content {max-width:1180px; padding: 40px;}
.div1 {margin-top: 28px; margin-bottom: 1px; background-color: #fff; padding: 10px 40px; padding-bottom: 8px; }
.div2 {margin-top: 2px; height:25%; margin-bottom: 28px; background-color: #fff; padding: 10px 40px; padding-bottom: 8px; }
.header {background-color: white; height: 16%; min-height: 110px; position: relative; width: 100%; -webkit-user-select: none;}
.secondSection {background-color: #e8e8e8; height: 16%; min-height: 110px; position: relative; width: 100%; -webkit-user-select: none;}
.pass {color: #ffffff; background: #34d9a2; padding: 10px 20px 10px 20px; text-decoration: none; width:50px;}
.fail {color: #ffffff; background: #f25e6a; padding: 10px 20px 10px 20px; text-decoration: none; width:50px;}
</style>
</HEAD>
<BODY>
<DIV class='header'><img src='img.png' alt='logo'></div>
<DIV class='secondSection'><p>#{dateTime}</p><p>#{platform}</p><p>#{log}</p></div>
<DIV class='content'>
<DIV class='div1'><h2>Test Case 001: name</h2></DIV>
<DIV class='div2'><p class='pass'>#{pass}</p><p class='fail'>#{fail}</p></DIV>
</DIV>
</BODY></HTML>
EOH

fileHtml.close()

使用ruby创建HTML文件

3 个答案: