html-pdf的CSS问题 [英] CSS issues with html-pdf

问题描述

我想使用 html-pdf 保存用帆船，制成的报价.ejs 和 angular 转换成 pdf 并将其发送给客户。

I want to use html-pdf to save a quote made with sails, .ejs, and angular into a pdf to send it to the customer.

一个 .ejs 文件（查看文件夹）及其分配 .js 控制器（资产文件夹）允许用户创建报价，选择客户，添加产品并最终计算报价总额。所有数据都绑定有角度。
我在 CSS中使用 bootstrap.min.css 和 importer.css 文件

An .ejs file (view folder) and its assign .js controller (assets folder) allows the user to create the quote, select the customer, add products, and finally calculate the total of the quote. All the data are bound with angular. I use bootstrap.min.css and importer.css files for my CSS and mostly the Bootstrap grid for my display.

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

When to quote is ready, I have a 'save as PDF' button, which removes (with ng-if) all the sections that the customer does not need to see on its quote, and my assets controller calls an api controller which generates the PDF.

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

Here is my assets/js/controller code :

$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 /控制器代码：

And here is my api/controllers code :

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 ，但不是...任何想法？

I have a picture which shows up OK so the base option should be able to get my css but it isn't... Any ideas ?

编辑：

好的，我修复了。
我在HTML之前发送了 CSS ，现在它可以正常工作了。

Well it's ok I fixed it. I'm sending my CSS before my html and now it work.

        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个问题...

I do have 2 issues now...

1-网格显示正常，但是我的div标签具有边框和背景色，并且没有显示，我想我看到了关于 @media 的一些信息，但我从未使用

1- The Grid is showing ok but my div tags has a border and background colour and they are not showing, I think I saw something about @media but I never used it so I don't really know what is wrong here.

2-在 PDF 中一​​切都很好（图片和网格布局显示） ，我在要用作标题的部分的div标签中添加了 id = pageHeader 。我尝试了一下，现在该部分未显示图片或网格显示...我的 html 正显示在我的浏览器中，所以我必须使用 pageHeader id进行其他操作不会弄乱我的 CSS 吗？

2- All being fine (pictures and grid layout display) in the PDF, I added the id="pageHeader" in my div tag of the section I'd like to use as header. I tried it out and now the section is not showing the image nor the grid display... My html is showing right in my browser, so do I have to do something else with the pageHeader id for it not to mess my CSS ?

推荐答案

我可以为您解决第一个问题。 @media print是适用于仅在发送文档进行打印时，基本上可以在浏览器的打印预览中看到。像这样，将html-pdf创建的PDF视为可打印文档，而不是HTML文档。

I can help you out with your first issue. "@media print" is a CSS tag that applies only when a document is sent to be printed, basically what you can see on your print preview on your browser. The PDFs created by html-pdf are considered like that, as a printable document rather than an HTML document.

我通过转到bootstrap.css文件并自己手动对其进行了修复。您只需要找到@media打印标签，该标签的正下方有一个 *标签。

I fixed this by going to the bootstrap.css file and manually edit it myself. You just need to find the @media print tag that has a "*" tag right below it.

看起来像这样：

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

在那里，您可以看到它设置了对整个文档来说，！background-color和color至关重要！删除通用（*）标签，您就可以将自己的自定义CSS用于背景和字体颜色。

There, you can see that it sets the background-color and color as !important to the whole document. Remove the universal (*) tags and you'll be able to use your own custom CSS for backgrounds and font-colors.

这篇关于html-pdf的CSS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！