1

我想用,和html-pdf保存报价，并将其发送给客户。sails.ejsangularpdf

一个.ejs文件（查看文件夹）及其分配.js控制器（资产文件夹）允许用户创建报价、选择客户、添加产品，最后计算报价总额。所有数据都与角度绑定。我为我的CSS使用bootstrap.min.css和importer.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/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中一切正常（图片和网格布局显示），我 id="pageHeader"在我想用作标题的部分的 div 标签中添加了 。我试过了，现在该部分没有显示图像或网格显示......我的html显示在我的浏览器中，所以我必须对 pageHeaderid 做其他事情才能不弄乱我的CSS吗？

4

1 回答 1

0

我可以帮你解决你的第一个问题。“@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 作为背景和字体颜色。

于 2018-01-17T19:08:34.917 回答