Question

我想使用html-pdf将带有sails，ejs和angular的引用保存到pdf中，然后发送给客户。

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

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

这是我的资产/ 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 / controllers代码：

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？< / p>

Answer 1

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

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

看起来像这样：

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

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

CSS问题与html-pdf

1 个答案: