CODEWITHSUNDEEP
javascriptnode.jsasynchronousnpm
NewUser
NewUser

Reputation: 13333

Nodejs read an external image and write as pdf

I have a html file where I have some variable like {Ticket}. In nodejs I am trying to replace that variable into an image what I have. So basically the output will be a pdf file.

So far now my code looks like this

ticket.html looks like this

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td>{Ticket}</td>
        </tr>
    </table>
</body>
</html>

var html = fs.readFileSync('ticket.html', 'utf8'); //html file
var GetImage = fs.readFileSync('QRTicket.png'); //image file
var customHtml = customHtml.replace('{Ticket}', GetImage);
pdf.create(customHtml, options).toFile('QRImage.pdf', function(err, res) {
    if (err) return console.log(err);
    console.log(res); 
});

But its creating a blank pdf file. I am using html-pdf to generate pdf file. I am struggling to get this done but its not working. So any help and suggestions will be really appreciable

Upvotes: 1

Views: 1032

Answers (2)

NewUser
NewUser

Reputation: 13333

I have modified my ticket.html and now I want to search and replace multiple strings at a one place. So now my ticket.html is like this

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td><img src="{{Ticket}}"></td>
        </tr>
        <tr>
            <td>asdf</td>
            <td>tyui</td>
        </tr>
    </table>
</body>
</html>

Now the express.js looks like this

const fs = require('fs');
const pdf = require('html-pdf');
const replaceOnce = require('replace-once');

const html = fs.readFileSync('ticket.html', 'utf8');
const image = 'file:///'+path.join(appRoot.path, 'file.png');

var find = ['{{Ticket}}', 'asdf', 'tyui'];
var replace = [image, 'Wills', 'Smith'];

const customHtml = replaceOnce(html, find, replace, 'gi')

pdf.create(customHtml).toFile('QRImage.pdf', (err, res) => {
  if (err) return console.log(err);
  console.log(res);
});

Upvotes: 0

James Hibbard
James Hibbard

Reputation: 17765

You need to insert the image into the page differently (using the file:// protocol). There is actually an example on the project's GitHub page that shows you how to do this here and here.

In your case, this would translate to the following:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <table>
    <tr>
      <td></td>
      <td><img src="{Ticket}"></td>
    </tr>
  </table>
</body>
</html>

and the JS file:

const fs = require('fs');
const pdf = require('html-pdf');

const html = fs.readFileSync('./ticket.html', 'utf8');
const customHtml = html.replace('{Ticket}', `file://${require.resolve('./QRTicket.png')}`);

pdf.create(customHtml).toFile('QRImage.pdf', (err, res) => {
  if (err) return console.log(err);
  console.log(res);
});

Edit:

This example assumes the following folder structure.

.
├── index.js
├── node_modules
├── package.json
├── package-lock.json
├── QRTicket.png
└── ticket.html

Run with the command node index.js and it will generate the desired PDF with the image.

Upvotes: 2

Related Questions