CSSのhtml-pdfに関する問題

Question

html-pdfを使用して、帆、ejs、角で作成した見積もりをpdfに保存して顧客に送信したいと考えています。

.ejsファイル（ビューフォルダ）とその割り当て.jsコントローラ（assetsフォルダ）を使用すると、ユーザーは見積もりを作成し、顧客を選択し、商品を追加し、最終的に見積もりの​​合計を計算することができます。すべてのデータは角度で結合されています。 私はCSSのためにbootstrap.min.cssとimporter.cssファイルを使用しています。

いつ見積もりが完了すると、顧客に見積もりをする必要のないセクションがすべて削除され、アセットコントローラがAPIを呼び出す（PDFで保存する） 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の前に送信しています。私は今、2つの問題を持っています

 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タグが境界線と背景色を持っており、彼らが表示されていない、私はについて何かを見たと思います@私は本当にそれを使用したことがないので、ここで何が間違っているのかは分かりません。

2 PDFですべての画像（グリッドレイアウトの表示）がうまくいけば、ヘッダーとして使用したいセクションのdivタグにid = "pageHeader"を追加しました。私はそれを試して、セクションは、画像やグリッドの表示を表示していません...私のhtmlは私のブラウザで右に表示されているので、私はあなたのCSSを混乱させないためにpageHeader idで他の何かをしなければなりませんか？

Answer 1

私は最初の問題でお手伝いします。 「@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を背景やフォントの色に使用できます。