Dodaj obraz w nagłówku za pomocą modułu węzła html-pdf

Question

Używam this do konwersji html na PDF. Konwersje są naprawdę dobre. Ale problem polega na dodawaniu nagłówka i stopki na stronach PDF. W opcjach, jeśli dodam tekst nagłówka dostałem wynik, czego się spodziewałem.

//Options 

    var options = { 
    "header": { 
     "height": "45mm", 
     "contents": "<div style='text-align: center;'>Author: Marc Bachmann</div>" // If i add image in content it wont work 
    // sample i tried 
     }, 
     "footer": { 
     "height": "28mm", 
     "contents": "<span style='color: #444;'>{{page}}</span>/<span>{{pages}}</span>" 
     } 
    } 
// Tried this in contents <img src="image path" /> 
    var result = <div class="container"> HTML CONTENT</div>'; 

     pdf.create(result, options).toFile(fileName + ".pdf", function(err, res) { 
     if (err) { 
     console.error(err); 
     callback(); 
     } 

Następnie, jeśli dodaję tag obrazu w opcji nagłówka (zawartość), nie otrzymałem obrazu w wygenerowanym pliku PDF. Czy możesz dać mi rozwiązanie tego podziękowania.

Answer 1

jest możliwe, aby dodać obraz w opcjach cel. 1. Prześlij obraz w treści html za pomocą stylu "display: none". 2. Następnie dodaj obraz w nagłówku opcji W ten sposób obraz zostanie zapisany w pamięci podręcznej i może dołączyć obraz do nagłówka.

var options = { 
    "format": 'Letter', 
    "orientation": "portrait", 
    "header": { 
    "contents": "<img src='image path' />", 
     "height": "30mm" 
    }, 
    "footer": { 
    "contents": footer 
    } 
} 
pdf.create("<div style='display:none'><img src='image path' /></div>", options).toFile("sample.pdf", function(err, res) { 
     if (err) { 
       console.error(err); 
       callback(); 
     } 
}); 

Answer 2

Odnosząc się this issue na github, nie można umieścić swoje zdjęcie bezpośrednio w options.header, trzeba umieścić go w ciele wewnątrz <div id="pageHeader"></div>:

var pdf = require('html-pdf'); 
var path = require('path'); 

// this is very important, you have to put file:// before your path 
// and normalize the resulting path 
var imgSrc = 'file://' + __dirname + '/350x120.png'; 
imgSrc = path.normalize(imgSrc); 
// or var imgSrc = path.join('file://', __dirname, '/350x120.png'); 

// Options 
var options = { 
    "header": { 
     "height": "45mm", 
     "contents": "" 
    }, 
    "footer": { 
     "height": "28mm", 
     "contents": "<span style='color: #444;'>{{page}}</span>/<span>{{pages}}</span>" 
    } 
    } 
// put your entire header here and the content of the page outside the <div id="pageHeader"></div> 
var result = "<div id='pageHeader'><img src='" + imgSrc + "' /><div style='text-align: center;'>Author: Marc Bachmann</div></div>"; 
result += "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>"; 
var fileName = __dirname + '/test.pdf'; 
pdf.create(result, options).toFile(fileName, function(err, res) { 
    if (err) { 
    console.error(err); 
    } 
}); 

Z tego kodu, otrzymuję ten pdf: