Javascript 从HTML元素创建pdf

我想做的是，让用户动态创建一个图像，比如一个名字标签，然后我想将图像以pdf格式保存到服务器上，然后通过emil将pdf发送给我自己或其他人

到目前为止，我能够动态地创建名称标签，并且我能够在按下按钮时发送电子邮件。现在我似乎找不到的是如何将元素保存为pdf格式

我的代码：

处理发送电子邮件的端点

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);

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

处理按钮单击以发送电子邮件的javascript

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);

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

在编辑之前先删除html

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

如果您只想将其保存为png，我只想说您要在svg中创建一个foreignObject并在画布上渲染它，但由于您想将其转换为pdf，我将做一些我很少喜欢做的事情。试试jsPDF，它应该会派上用场：

我并不反对其他格式，如果你认为png更容易，我会非常高兴，我也会查看你发布的链接：）pdf通常是安全的，这个库很好用。如果要创建png，请首先创建svg元素。第二，在svg中创建一个外来对象。在foreignObject内部，克隆html并将其放在那里。第四，将整个svg转换为数据url。创建一个image元素，并将数据url作为src属性提供。第六，在画布上绘制图像，并将其转换为数据url，然后将其交给具有下载属性的a元素或ms save blob。关于如何保存画布，我在几年前写了一些东西：