包括外部 css grails 渲染插件问题答案

【问题标题】：including external css grails rendering plugin issue包括外部 css grails 渲染插件问题
【发布时间】：2013-05-21 15:09:20
【问题描述】：

我正在尝试使用 bootstrap.css 设置由 grails 渲染插件生成的 pdf 样式。 pdf 生成良好，但没有应用任何 css 样式。

过去几天一直在寻找这个问题的答案，但一无所获。

css background is not working when convert template into pdf using rendering plugin

Grails rendering plugin css issue

所有答案都表明解决方案是确保 grails.serverURL 在 Config groovy 中正确设置。

目前在以安全模式运行的开发机器上运行，因此我设置了 grails.serverURL="https://localhost:8443/" 并尝试了不同的变体。

.gsp文件的模板代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Invoice</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <style  type="text/css">
            @page {
            size: A4 landscape;

            }

        </style>

        <link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap.css')}"/>
        <r:layoutResources/>
    </head>
    <body>
    <div class="content">
        <div class="well">
        <p class="pull-right">Invoice: ${companyName.encodeAsHTML()}</p></div></div>
        <r:layoutResources/>
    </body>
</html>

任何建议将不胜感激。

【问题讨论】：

标签： css grails twitter-bootstrap rendering

【解决方案1】：

你有没有为背景图片尝试过内联css？，我认为它应该可以工作，虽然我没有尝试过，但应该可以工作。

【讨论】：

嗨，Saurabh 内联 css 确实有效，但我需要使用引导程序中提供的大量格式，所以这对我来说不是一个真正的选择。感谢您的回复。

【解决方案2】：

由于您依赖grails.serverURL 设置，您应该能够充分利用resources 插件的风格。

如果您将bootstrap-app.css 或bootstrap.min.css 声明为应用程序资源模块，您应该可以在gsp 中require 它们如下所示。您可以尝试这种方法，否则您必须使用我在您之前提到的问题中提到的内联 css。我不得不坚持使用内联 css，因为我没有提到 grails.serverURL 作为主机。我的应用程序在不同的环境中使用了主机覆盖。

//ApplicationResources.groovy
bootstrap {
    //resource url:'/css/bootstrap-app.css'
    resource url:'/css/bootstrap.min.css'
}

//GSP
<head>
    <title>Invoice</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <r:require modules="bootstrap"/>
    <r:layoutResources/>
</head>
<body>
<div class="content">
    <div class="well">
    <p class="pull-right">Invoice: ${companyName.encodeAsHTML()}</p></div></div>
    <r:layoutResources/>
</body>

【讨论】：

感谢您的建议，但它给了我完全相同的结果，即没有 css 样式应用于呈现的 pdf
顺便说一句，我在回答中删除了@page，您需要在模板中明确地使用它。如果仍然存在问题，您可以尝试在删除不需要的样式后将缩小的引导程序 (bootstrap.min.css) 内联。
认为我将不得不尝试使用内联选项。再次感谢您的帮助。
我最后的办法是成为一名教授here，并让我知道我从头上拔了多少头发让它发挥作用。 :)
哈哈，我可以想象 :) 再次感谢您的帮助。最后，我通过在删除不需要的样式后内联缩小的引导程序来使其工作。