内联 CSS 不适用于 gem 'htmltopdf'答案

【问题标题】：Inline CSS is not working with gem 'htmltopdf'内联 CSS 不适用于 gem 'htmltopdf'
【发布时间】：2017-08-10 11:42:33
【问题描述】：

我的要求是下载 docx 文件，并且应该在 Microsoft Word 上打开：

我正在使用以下宝石：

gem 'responders'
gem 'htmltoword

控制器代码：

require 'htmltoword'

class Admin::VisibilitiesController < ApplicationController
 respond_to :docx, :html, :css,:js

def preview
     @project = Project.find_by(id: params[:id])
     @feeder = Project.find_by(id: params[:id]).form2.last.feeder11s.first
      respond_to do |format|
        format.docx do
        render :docx => "report1_docx",:template => 'admin/visibilities/preview.html.docx.erb', :page_height => 600, :page_width =>345
      end
    end
  end

查看文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style type="text/css">
  div.alwaysbreak { page-break-before: always; }
div.nobreak:before { clear:both; }
div.nobreak { page-break-inside: avoid; }
td{padding: 2px 5px;}

</style>
<div style="padding-top:20px;">



<table style="width:800px;margin:0px auto;border:1px solid grey; background: #fff;margin: 0 auto;margin-bottom:30px;padding:10px 20px; ">      
       <tbody>
        <tr>
          <td style="padding: 15px 0 50px;">
            <table style="padding:0px;overflow:hidden;display:table;">
              <tbody>
                <tr>
                  <td style="font-size: 16px;width:100%;font-weight:600">
                    Report No......./...../......./20116-17.....
                  </td>         
                </tr>
                <tr>

                  <td style="font-size: 16px;width:100%;font-weight:600">
                    Dated: ......

                  </td>

                </tr>
              </tbody>  
            </table>
          </td>
        </tr>



        <tr>
         <td style="font-size:28px;font-weight:bold;text-align:center;padding-bottom:20px; font-style: italic;">THIRD PARTY VILLAGE INSPECTION REPORT</td>
        </tr> 
          <tr>
         <td style="font-size:28px;font-weight: bold;text-align:center;padding-bottom:25px; font-style: italic;">OF</td>
        </tr> 
             <tr>
         <td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">RURAL ELECTRIFICATION WORKS UNDER DEEN DAYAL UPADHYAYA GRAM JYOTI YOJANA (erstwhile RGGVY 12TH PLAN)</td>
        </tr> 
        <tr>
         <td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">IN</td>
        </tr> 
        <tr>
         <td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">..............DISTRICT</td>
        </tr> 
        <tr>
         <td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">SUBMITTED TO</td>
        </tr>     
        <tr>
         <td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">........................</td>
        </tr>           
        <tr>
           <td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">SUBMITTED BY </td>
        </tr> 
               <tr>
         <td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:30px;">........................</td>
        </tr>
        <tr>
          <td style="font-style: italic; padding-bottom: 30px; padding-top: 100px;">
            <table style="width: 100%; margin-top: 50px;">
              <tr>
                <td style="font-size:12px;padding-bottom:10px;font-weight:600">Report No (admin)/District(survey)/1st/2016-17/070</td>
                <td style="font-size:12px;padding-bottom:10px;font-weight:600; text-align: right;">Dated: from survey (form1)</td>   
               </tr>
            </table>
          </td>
        </tr>        
        <tr>
          <td style="padding-bottom: 50px;">
            <table style="width: 100%;">
              <tr>
                <td style="font-size:18px;font-weight:600">Location:</td>
                </tr> 
                 <tr>
                 <td style="font-size:16px;font-weight:600">Name of Village     :  <%= @project.form1.try(:village_name) %></td>
                 <tr>
                 <td style="font-size:16px;font-weight:600">Census Code No     :                        <%= @project.form1.try(:census_code_no) %>
</td>
                </tr>

                <tr>
                 <td style="font-size:16px;font-weight:600">Name of Block       : <%= @project.form1.try(:block_name) %></td>
                </tr>
            </table>
          </td>
        </tr>


          </tbody>

    </table>
</body>

</html>

输出

【问题讨论】：

您检查过，这是否受支持？ CSS 相当丰富，可能根本不支持 CSS。

标签： ruby-on-rails ruby ruby-on-rails-3 ruby-on-rails-4 rubygems

【解决方案1】：

htmltoword gem 目前只提供一些基本的样式支持，主要是对齐和表格。
这是关于该问题的已打开 GitHub 问题 https://github.com/karnov/htmltoword/issues/45。
here 是描述支持的样式和类的文档。
在可能的情况下尝试使用一些基本的 HTML 标签而不是 CSS 样式，这似乎是目前让您的 word doc 样式化的唯一方法。

【讨论】：