html-pdf的CSS问题

Question

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

一个.ejs文件(视图文件夹)及其指定的.js控制器(资产文件夹)允许用户创建报价，选择客户，添加产品，最后计算报价总额。所有的数据都用角度来绑定。我的CSS使用bootstrap.min.css和importer.css文件，显示时主要使用引导网格。

当报价准备就绪时，我有一个“save”按钮，它删除了客户不需要在报价中看到的所有部分(使用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,
...

我现在有两个问题..。

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

2-在PDF中所有的细节(图片和网格布局显示)，我在我想要用作标题的部分的div标记中添加了id="pageHeader"。我试过了，现在这部分没有显示图像，也没有网格显示.我的html显示在我的浏览器中，所以我必须用pageHeader id做一些其他的事情，这样它才不会破坏我的CSS？

Answer 1

我可以帮你写第一期。"@media print“是一个CSS标记，它只适用于发送要打印的文档时，基本上可以在浏览器上的打印预览中看到什么。由html-pdf创建的pdf被认为是可打印的文档，而不是HTML文档。

我通过转到bootstrap.css文件并亲自手动编辑来修复这个问题。您只需要找到@标记，它下面就有一个"*“标记。

看起来是这样的：

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

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