html-pdf 的 CSS 问题答案

【问题标题】：CSS issues with html-pdfhtml-pdf 的 CSS 问题
【发布时间】：2018-04-10 06:31:52
【问题描述】：

我想使用html-pdf 将使用sails、.ejs 和angular 生成的报价保存到pdf 中以发送给客户。

.ejs 文件（查看文件夹）及其分配的.js 控制器（资产文件夹）允许用户创建报价、选择客户、添加产品，最后计算报价总额。所有数据都与角度绑定。我将bootstrap.min.css 和importer.css 文件用于我的CSS，并且主要使用Bootstrap 网格来显示。

当报价准备就绪时，我有一个 “另存为 PDF” 按钮，该按钮会删除（使用ng-if）客户不需要在其报价中看到的所有部分，并且我的资产控制器调用生成 PDF.

的 api 控制器

这是我的资产/js/控制器代码：

$scope.printPdf = function() {

    $http.post('/page/create-pdf', {
        printView: document.getElementById('printPdfSection').innerHTML,
        quoteNumber: $scope.createdQuote.createdAt,
    })
    .then(function onSuccess(sailsResponse){
        console.log('PDF CREATED');
    })
    .catch(function onError(sailsResponse){
        console.error('PDF ERROR :', sailsResponse);
    });
};

这是我的 api/控制器代码：

printPdf: function(req, res) {

    var pdf = require('html-pdf');
    var moment = require('moment');
    var fs = require('fs');

    var quoteNumber = moment(req.param('quoteNumber')).format('YYMMDDHHmm');
    var html = req.param('printView');
    var options = { 
        format: 'Letter', 
        border: {
            "top": "1in",            // default is 0, units: mm, cm, in, px
            "right": "1in",
            "bottom": "1in",
            "left": "1in"
        },
        base: req.protocol + '://' + req.get('host'),
    };

    pdf.create(html, options).toFile('./assets/pdfs/'+ quoteNumber +'.pdf', function(err, res) {
        if (err) return console.log(err);
        console.log(res);
    });
}

我有一张显示正常的图片，所以基本选项应该能够获取我的 css 但它不是......有什么想法吗？

编辑：

没关系，我修好了。我在我的 html 之前发送我的 CSS，现在它可以工作了。

        var myCSS = '<link rel="stylesheet" href="/styles/bootstrap.min.css"><link rel="stylesheet" href="/styles/importer.css">';

        $http.post('/page/create-pdf', {
            printView: myCSS + document.getElementById('printPdfSection').innerHTML,
...

我现在确实有 2 个问题...

1- 网格显示正常，但我的 div 标签有边框和背景颜色，它们没有显示，我想我看到了一些关于 @media 的东西，但我从未使用过它，所以我真的不知道出了什么问题在这里。

2- PDF 中一切正常（图片和网格布局显示），我在我想用作标题的部分的 div 标签中添加了id="pageHeader"。我试过了，现在该部分没有显示图像或网格显示...我的 html 正在我的浏览器中显示，所以我必须对pageHeader id 做其他事情为了不弄乱我的CSS？

【问题讨论】：

从我可以看到的 html-pdf 示例中，看起来只有 html 中的样式标签可以工作。这使得获取 Angular 应用程序的当前状态变得非常困难！您需要的是一些代码或库，可以从活动页面的当前状态创建样式标记，并在将其发送到服务器之前附加它。
嗯，我设法通过在 html 之前手动添加我的样式标签来获取我的 CSS，它有点工作。但它不显示我的 div 块的背景颜色....

标签： angular sails.js ejs html-pdf

【解决方案1】：

我可以帮助您解决第一个问题。 “@media print”是一个 CSS 标记，仅在发送文档进行打印时应用，基本上是您可以在浏览器的打印预览中看到的内容。由 html-pdf 创建的 PDF 被认为是可打印的文档，而不是 HTML 文档。

我通过转到 bootstrap.css 文件并自己手动编辑它来解决此问题。您只需要在其下方找到带有“*”标签的@media 打印标签。

看起来像这样：

@media print {
*,
*:before,
*:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
...

在那里，您可以看到它将背景颜色和颜色设置为 !important 对整个文档。删除通用 (*) 标记，您将能够使用自己的自定义 CSS 作为背景和字体颜色。

【讨论】：