與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

回答

相關問題