用 ruby 创建一个 HTML 文件答案

【问题标题】：creating an HTML file with ruby用 ruby 创建一个 HTML 文件
【发布时间】：2014-08-26 00:10:46
【问题描述】：

我目前正在使用 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 文件并插入存储的变量结果

【问题讨论】：

通过以下stackoverflow.com/questions/1796459/…希望对您有所帮助。

标签： html ruby

【解决方案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 %>

注意<% ... %> 和<%= ... %> 之间的区别，<%= ... %> 将获取返回值并将其字符串表示形式“写入”到模板中。

【讨论】：

【解决方案2】：

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

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

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

为了更抽象，您可以查看 Haml 和 Sass gems，或 Slim。

【讨论】：

【解决方案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()

【讨论】：