Is there a way to concat the result of an an html page converted with wkhtmltopdf-node inside a document page created with pdfkit in node.js, instead of just creating a pdf file from html?
const doc = new PDFDocument({
bufferPages:true,
toc: true,
margins: {
top: 125,
bottom: 50,
left: 50,
right: 50
}
});
doc.pipe(fs.createWriteStream('output.pdf'));
doc.addPage();
doc.text("HTML Content ")
// concat the result of this conversion inside doc instead of out.pdf
wkhtmltopdf(params.content, { pageSize: 'letter' }).pipe(fs.createWriteStream('out.pdf'));
Something like
doc.concat(wkhtmltopdf(params.content, { pageSize: 'letter' }));
Related
I am trying to implement a QR code in a PDF document using PDFkit (https://github.com/foliojs/pdfkit) and node-qrcode (https://github.com/soldair/node-qrcode).
Implementing PDF document:
const doc = new PDFDocument({
margin: 0,
size: 'LETTER'
})
doc.pipe(fs.createWriteStream('/files/result.pdf'))
doc.pipe(res)
Creating QR code and adding it to the PDF:
var opts = {
errorCorrectionLevel: 'H',
type: 'image/png',
quality: 0.9,
margin: 1,
color: {
dark:"#000000",
light:"#FFFFFF"
}
}
QRCode.toDataURL('http://link.to.website', function (err, url) {
if (err) throw err
doc.image(url, 50, 45, { width: 50 })
console.log(url)
})
Close the PDF:
doc.end()
Console output of the url from QRCode is correctly formatted and no error messages from PDFKit:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAAAklEQVR4AewaftIAAAOQSURBVO3BQY5jBxYDweSD7n/lHC+84OoDglTltocR8S/M/O2YKcdMOWbKMVOOmXLMlGOmHDPlmCnHTDlmyjFTjplyzJRjprz4UBJ+k8qTJHxC5R1JaCotCb9J5RPHTDlmyjFTXnyZyjcl4ZtUWhJaEppKS8InVL4pCd90zJRjphwz5cUPS8I7VN6RhG9S+U1JeIfKTzpmyjFTjpny4j9G5R0qLQnvUPkvOWbKMVOOmfLiPy4JTaUloam0JDSVloSm8m92zJRjphwz5cUPU/mTqbQkNJWWhG9S+ZMcM+WYKcdMefFlSfg3SUJTaUloKi0J70jCn+yYKcdMOWbKiw+p/EmS8CdR+Tc5ZsoxU46ZEv/CB5LQVFoSvknlSRKayjuS8AmVloRvUvlJx0w5ZsoxU158SKUloak8ScITlSdJaCotCU3lHSpPkvBEpSWhqbwjCU3lm46ZcsyUY6a8+GFJaCpPVFoSmsqTJLwjCU3lSRKaSktCU3lHEprKkyQ0lU8cM+WYKcdMefGhJDxRaUloKi0JTaUl4R0qLQnvSEJTaUloKk9UWhKayhOVloRvOmbKMVOOmfLihyWhqTxRaUloKt+k0pLwDpWWhCcq70jCbzpmyjFTjpny4h+WhCcqT5LwRKWptCQ0lZaEd6g8SUJTaUloKi0JTeWbjplyzJRjprz4MpWWhCcqT5LwiSQ0labyjiQ8UXmi8k1JaCqfOGbKMVOOmfLih6k8ScITlZaEpvIkCU+S0FSaypMktCQ0lZaET6i0JHzTMVOOmXLMlBf/MJWWhJaEptKS8E1JeKLyjiS8Q6Uloak0lW86ZsoxU46Z8uJDKt+k8ptU3pGEJyrvSEJLwj/pmCnHTDlmyosPJeE3qTSVloQnSXii0pLQVFoSniShqXwiCU9UPnHMlGOmHDPlxZepfFMSniThiUpLQlP5SSqfUPlNx0w5ZsoxU178sCS8Q+UTKt+k0pLwJAnflIR3qHzimCnHTDlmyov/MyotCU9Unqg8SUJTaUloKi0Jv+mYKcdMOWbKi/+YJDSVJyotCS0JTeUdKi0JTeUdKi0J33TMlGOmHDPlxQ9T+UkqT5LQVFoSnqg8ScITlSdJeKLym46ZcsyUY6a8+LIk/KYkNJVPqLQkNJWm8pOS8JuOmXLMlGOmxL8w87djphwz5Zgpx0w5ZsoxU46ZcsyUY6YcM+WYKcdMOWbKMVOOmfI/dLqWFdMR+T4AAAAASUVORK5CYII=
The problem is that no image is displayed in the produced PDF.
If I use any other functions (than doc.image), e.g. doc.text(), doc.circle() all elements works fine and added to the PDF.
Any idea how to solve this?
toDataURL() is a asynchronous method.
I didn't wait for it to complete.
Closed the PDF document after it completed, and that worked.
Сreate a pdf file following the example https://pspdfkit.com/blog/2019/generate-invoices-pdfkit-node/
the problem is that characters in Russian are displayed : "Aô#Cä2CT#C¤0", but should be "Проверка". How can I set encoding to UTF-8?
function createInvoice(invoice, path) {
let doc = new PDFDocument({ margin: 50 });
generateHeader(doc);
doc.end();
doc.pipe(fs.createWriteStream(path));
}
function generateHeader(doc) {
doc
.image("logo.png", 50, 45, { width: 50 })
.fillColor("#444444")
.fontSize(20)
.text("Проверка", 110, 57)
.fontSize(10)
.text("Проверка", 100, 65, { align: "right" })
.text("Проверка", 100, 80, { align: "right" })
.moveDown();
}
I downloaded the font file and include it:
.font(`${__dirname}/arial.ttf`)
thanks!
I think that you have to use a font which support russian characters
Look this thread
https://github.com/foliojs/pdfkit/issues/262
I need to display HTML form in SVG to edit related data. I use Snap.svg library. As I found I need foreignObject tag to embed HTML form there (html code is got by Ajax request).
How can I create such object and embed it to my SVG?
===== EDITED ======
I managed to create foreignObject but I can not put there html
var test = editor.el('foreignObject', {
x: '20',
y: '500',
width: '150',
height: '200'
});
success: function (html)
{
var wrapper = editor.el('foreignObject', {
x: '20',
y: '500',
width: '150',
height: '200',
class: 'heatNet'
});
$('.heatNet').html(html);
}
I am generating pdf in nodejs using phantomjs. However, when I try to generate a large pdf (more than 1 A4 size page), it generates only two page pdf. One of the page contains all the matter and the other similar sized (very large) page is blank.
I am using the following code to generate the pdf:
phantom.create("--web-security=no", "--ignore-ssl-errors=yes",function(ph) {
return ph.createPage(function(page) {
return page.open(htmlfilepath, function(status) {
page.paperSize = { format: 'A4', orientation: 'portrait', border: '1cm' };
page.render(pdffilepath, function(){
ph.exit();
});
});
});
});
Can anyone tell the correct method to format pdf in phantomjs. Thanks.
Got it. Even though I did exactly according to many articles and tutorial online, I had to use change the following piece to code:
page.paperSize = { format: 'A4', orientation: 'portrait', border: '1cm' };
to this:
page.set('paperSize', { format: 'A4', orientation: 'portrait', border: '1cm'});
This may be because of the change in version from 1.x.x to 2.x.x.
I want to load different shapes in FabricJS based Canvas using loadSVGFromURL(), but can't. Documentation is also not complete on this. I just want a complete example. I can load it from string, but string creates spaces which creates problems when rendering. Here is my code:
var canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromURL('BlueFlower.svg', function (objects) {
var SVG = fabric.util.groupSVGElements(objects, options);
canvas.add(SVG).centerObject(SVG).renderAll();
SVG.setCoords();
});
I have done an example on jsfiddle, that I create two objects and I load an svg image from url, you can take a look.
Here is an example
The snippet for load svg is this:
var site_url = 'http://fabricjs.com/assets/1.svg';
fabric.loadSVGFromURL(site_url, function(objects) {
var group = new fabric.PathGroup(objects, {
left: 165,
top: 100,
width: 295,
height: 211
});
canvas.add(group);
canvas.renderAll();
});