-1

What I want to do, is have a user dynamically create an image, like a nametag and then I want to save the image to the server as a pdf, then send the pdf via emil, to myself or someone else.

So far, I am able to dynamically create the nametag, and I am able to send an email when a button is pressed. Now what I can't seem to find is how to save the element as a pdf.

My code:

The endpoint that handles sending the email

let cors = require('cors');

let express = require('express');
let app = express();
app.use(cors());
let nodemailer = require('nodemailer');
/**
 *
 * Function to hopefully send an email :)
 */

app.post("/sendMail", function (req, res) {
    console.log(req);

    let transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'user@gmail.com',
            pass: 'Password'
        }
    });

    let mailOptions = {
        from: 'user@gmail.com', 
        to:   'recipient@alphagraphics.com', 
        subject: 'Test',
        text:     'It works!'
    };

    transporter.sendMail(mailOptions, function(error, info) {
        if (error) {
            console.log(error);
        } else {
            console.log('Email sent: ' + info.response);
        }
    }); 
});

app.listen(8080);

The javascript that handles the button click to send the email

$('#some-long-stupid-unique-name').click(function(){
    $.ajax({
        type: 'POST',
        url: 'http://192.168.1.23:8080/sendMail'
    });
});

The html before editing

<div>
    <div id="name"></div>
    <div id="title></div>
</div>

Now the user will have some text boxees they cna type into and when they click "Update" whatever they typed into the text boxes (respectivly named Name and Title) the html will look like the following

<div>
    <div id="name">My Name Here></div>
    <div id="title">My Title Here</div>
</div>

How can I turn this element into a pdf and save it to my server, so I can then send it over from my mailing client?

Edit: I have seen other posts on how to "Save as pdf" but it seemed to me that they all save to the clients machine, but for me and the clients, it doesn't matter so much if they can save it on their machine, it is more important to save it to the server

Edit: Note that the format (pdf) doesn't matter so much I just thought it would be the easiest and most versatile?

j-money
  • 509
  • 2
  • 9
  • 32

1 Answers1

-1

If you would only save it as png, I would just say you to create a foreignObject inside an svg and render it on canvas, but since you want to convert that to pdf, I will do something that I rarely like doing. Try jsPDF, it should come in handy:

https://parall.ax/products/jspdf

ibrahim tanyalcin
  • 5,643
  • 3
  • 16
  • 22
  • I am not opposed to some other formats, if you think a png would be easier I would be more than happy with that, I will also look through the link you posted :) – j-money Jun 03 '19 at 19:36
  • pdf is generally safe, this library is good with it. If you want to create png, 1st create an svg element. 2nd create a foreignObject inside svg. 3rd Inside the foreignObject, clone the html and put it there. 4th convert the entire svg to data-url. 5th create an image element and supply the data-url as src attribute. 6th Draw the image on canvas and convert to data-url and give it to an a element with download attribute or ms-save-blob. To refer to how to save canvas I've written something a couple of years ago: https://github.com/IbrahimTanyalcin/SVG-TO-PIXELS/blob/master/svgToPixels.js – ibrahim tanyalcin Jun 03 '19 at 19:41