I'm trying to render this html document ./tagslegend.html
with npm package wkhtmltox
:
<!doctype html>
<html>
<head>
<style>
.cmn {
font-family: 'WenQuanYi Micro Hei';
}
</style>
</head>
<body>
<dl>
<dt class="cmn">中文</dt><dd>In mandarin language.</dd>
</dl>
</body>
</html>
Here's the javascript:
const express = require('express');
const fs = require('fs');
const wkhtmltox = require('wkhtmltox');
const app = express();
const converter = new wkhtmltox();
app.get('/tagslegend.png', (request, response) => {
response.status(200).type('png');
converter.image(fs.createReadStream('tagslegend.html'), { format: "png" }).pipe(response);
});
var listener = app.listen(process.env.PORT, function () {
console.log('App listening on port ' + listener.address().port);
});
I expect it to render like my browser would render that same html:
But am instead getting a png like this:
How can I fix this and make it render like the first image?
I have that font installed on the server:
$ fc-list | grep 'Wen'
/app/.fonts/WenQuanYi Micro Hei.ttf: WenQuanYi Micro Hei,文泉驛微米黑,文泉驿微米黑:style=Regular
This looks like an character encoding problem. It seems as if fs.createReadStream()
is reading your HTML as ISO-8859-1, when it really should be reading it as UTF-8 — which is odd, since UTF-8 is the default encoding.
I'd make sure tagslegend.html
is properly saved as a UTF-8 file. It couldn't hurt to explicitly declare:
<meta charset="utf-8">
...in the <head>
section of your HTML as well.