时间戳

首页 > 解决方案 > 从 HTML 元素创建 pdf

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

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

$('#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>

现在用户将有一些他们可以输入的文本框，当他们单击“更新”时，无论他们在文本框中输入什么（分别命名为名称和标题），html 将如下所示

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

如何将此元素转换为 pdf 并将其保存到我的服务器，然后我可以从我的邮件客户端发送它？

编辑：我看过其他关于如何“另存为 pdf”的帖子，但在我看来，它们都保存到客户端机器上，但对于我和客户来说，如果他们可以将其保存在他们的计算机上并不重要机器，保存到服务器更重要

编辑：请注意，格式（pdf）并不重要，我只是认为它是最简单和最通用的？

标签： javascripthtmlnode.jsserver

解决方案

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

https://parall.ax/products/jspdf

推荐阅读