css - 使用 NodeJS、Jade 和 PhantomJS 创建 PDF

Question

我想使用 PhantomJS 从 Jade 中的模板创建 PDF，我可以创建 PDF 文档，但 CSS 不适用，我创建了两条路线，第一个路线将模板渲染到网络浏览器，第二个路线生成用完全相同的jade模板de PDF，在浏览器中一切正常，但PDF不应用CSS。

我的 app.js 是:

var express = require('express'),
    routes = require('./routes'),
    http = require('http'),
    path = require('path'),
    bodyParser = require('body-parser');

var app = express();

app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(express.static(path.join(__dirname, 'public')));

app.post('/api/cotizacion/generar', routes.cotizacion.generar);
app.get('/api/cotizacion/generar', routes.cotizacion.testGenerar);

app.all('*', function(req, res) {
    res.send(404);
});

http.createServer(app).listen(app.get('port'), function(){
    console.info('Express server listening on port ' + app.get('port'));
});

Controller 文件是cotizacion.js:

var phantom = require('phantom');

exports.generar = function(req, res, next){
    if(!req.body.cotizacion){
        return next(new Error('No se enviaron datos de cotización'));
    }

    var cotizacion = req.body.cotizacion;

    req.app.render('test', {cotizacion: cotizacion}, function(err, html){
        generarPDF(cotizacion, html, function(){
            res.send("1");
        });
    });
};

exports.testGenerar = function(req, res, next){
    res.render('test', {});
};

generarPDF = function(cotizacion, html, callback){
    phantom.create(function(ph){
        ph.createPage(function(page){
            page.set('paperSize', { format: 'Letter' });
            page.set('content', html);
            page.render(__dirname + '/test.pdf', function(err){
                ph.exit();
                callback();
            }); 
        });
    });
}

最后我的 test.jade 是:

doctype html

html
    head
        title Cotización PDF
        link(rel='stylesheet', href='/css/pdf.css')

    body
        h1 Test

下面的工作，但有点烦人

doctype html

html
    head
        title Cotización PDF
        | <style type="text/css">
        |   body{ color: green; }
        | </style>

    body
        h1 Test

元素结构是:

/
   app.js
   public/
      css/
         pdf.css
   routes/
      index.js
      cotizador.js
   views/
      test.jade

Answer 1

好的，这是我们针对类似问题的解决方案。在 JADE 模板下方，注意 hrefs 以及对 JSON 对象属性的引用:

doctype html
html(lang="en")
  head
    link(rel='stylesheet', type="text/css", media="all", href=report.statics.bootstrap)
    link(rel='stylesheet', type="text/css", media="all", href=report.statics.custom)
  body

这是一个代码片段，用于向模板提供 CSS 路径:

var createStatics = function (req) {
  var hostName = url.format({protocol: req.protocol,
    host: req.get('host')
  });
  return {
    bootstrap: hostName + '/assets/reports/bootstrap-report.css',
    custom: hostName + '/assets/reports/custom.css',
  }
}

接下来是JADE模板编译:

var fn = jade.compile(template);

传输对象，用于传递JADE模板实用对象所需的:

  var report = {
    statics: statics,
    title: 'Simple report title'
  };

呈现 HTML 报告并作为流检索...

  var output = fn({
    report: report
  });