与HTML，PDF

CSS问题，我想使用的HTML-PDF与帆，EJS和角度提出了报价保存到一个PDF格式将其发送给客户。与HTML，PDF

.ejs文件（视图文件夹）及其赋值.js控制器（assets文件夹）允许用户创建报价，选择客户，添加产品，并最终计算报价总数。所有数据都以角度绑定。我为我的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 /控制器代码：

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); 
    }); 
}

我有一张照片，显示了OK的，因此基本选项应能够得到我的CSS，但它不是...任何想法？

编辑：

好吧，我确定它。我发送我的CSS在我的HTML之前，现在它的工作。

 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标签具有边框和背景颜色，它们没有显示，我觉得我看到了一些关于@媒体，但我从来没有使用过，所以我不知道这里有什么问题。

2-所有被精细（图片和网格布局显示）在PDF，我在我想作为头部使用部分的我的div标签添加了id =“pageHeader”。我试了一下，现在该部分没有显示图像和网格显示......我的html显示在我的浏览器，所以我必须做一些与pageHeader ID的东西，它不会搅乱我的CSS？

来源

2017-10-28 StS

从例子中，我可以看到HTML，PDF，它看起来像只是一个风格的标签在你的HTML将工作的。这使得获取角度应用的当前状态非常困难！你需要的是一些代码或者库，它会从活动页面的当前状态创建一个样式标签，并在将其发送到服务器之前进行追加。 – arbuthnott

嗯，我设法通过手动添加我的样式标签在HTML之前，它是一种工作。但它不显示我的div块的背景颜色.... – StS

我可以帮你出你的第一个问题。 “@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; 
} 
...

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

来源

2018-01-17 19:08:34

回答

相关问题