如何将使用 html2pdf 和 Node 生成的 pdf 保存在本地？

Question

我正在用html2pdf生成pdf，并且我已经成功生成了pdf，但是现在我需要将此pdf发送到我的节点中的服务器或直接将其保存在我的服务器上的文件夹中，现在pdf已下载到路径中由客户端指示，但我需要在我的服务器上有一个副本，我已经尝试使用输出参数但我没有取得任何成果，这是我当前的代码：

 document.addEventListener("DOMContentLoaded", () => {
        // Escuchamos el click del botón
        const $boton = document.querySelector("#btnCrearPdf");
        $boton.addEventListener("click", () => {
            const $elementoParaConvertir = document.body; // <-- Aquí puedes elegir cualquier elemento del DOM
            html2pdf()
                .set({
                    margin: 1,
                    filename: 'documento.pdf',
                    image: {
                        type: 'jpeg',
                        quality: 0.98
                    },
                    html2canvas: {
                        scale: 3, // A mayor escala, mejores gráficos, pero más peso
                        letterRendering: true,
                    },
                    jsPDF: {
                        unit: "in",
                        format: "a3",
                        orientation: 'portrait' // landscape o portrait
                    }
                })
                .from($elementoParaConvertir)
                .save()
                .output('./123123123.pdf', 'f')
                .then(pdfResult => {
                     console.log(pdfResult);
                })
                .catch(err => console.log(err)); 
        });
    });

但是我不知道如何将pdf发送到服务器或直接从前端保存它，有谁知道如何保存在我的服务器上生成的pdf？非常感谢。

Answer 1

您需要创建例如后端服务器上的 PUT 端点，并将生成的文件从客户端发送到服务器。

可以使用如下方式发送数据：

const filename = 'documento.pdf';

html2pdf()
    .set({
        filename,
        // other options...
    })
    .from($elementoParaConvertir)
    .toPdf()
    .output('datauristring')
    .then(function(pdfBase64) {
        const file = new File(
            [pdfBase64],
            filename,
            {type: 'application/pdf'}
        ); 

        const formData = new FormData();        
        formData.append("file", file);

        fetch('/upload', {
          method: 'PUT',
          body: formData,
        })
        .then(response => response.json())
        .then(result => {
          console.log('Success:', result);
        })
        .catch(error => {
          console.error('Error:', error);
        });
    });

有用的帖子：

• 将html2pdf生成的pdf发送回服务器
• html2pdf#181 - 将生成的 pdf 作为电子邮件附件发送
• html2pdf#271 - 将 PDF 保存到本地服务器

Answer 2

在@mojoaxel 给出的设置文件发送后。首先，您必须设置文档存储操作。我使用

multer

来存储 pdf，您可以使用其他库。 请参阅下面的代码来配置文档保存功能。

var multer = require("multer");
var fs = require('fs');
    var Storage = multer.diskStorage({
     destination: function (req, file, cb) {
      let dir = 'document/' + 'Home'; // Your directory
      if (!fs.existsSync(dir)) {         // check whether directory exists or not if not then create new directory
        fs.mkdirSync(dir);
      }
      cb(null, dir);
     },

    filename: function (req, file, cb) {
      let inputData = Common.isEmpty(req.body.data) === false ?  JSON.parse(req.body.data) : req.body; // check if you send formData or not if yes then parsing data else send as it is
      cb(null, file.originalname);
    }

});

var upload = multer({
  storage: Storage
});

router.post("/callurl", upload.array('file') ,function(req, res){
 // your code here
})

Answer 3

function savePdf() {
    console.log('hi');
    var element = '';    element = document.getElementsByName('mycontents')[0];
    var opt = {
        margin: [2, 2, 2, 2],
        filename: 'myfile',
        image: { type: 'jpeg', quality: 0.7 },
        html2canvas: { scale: 2, useCORS: true },
        jsPDF: { format: 'a4', unit: 'mm' },
        //  pagebreak: { before: '.i-pdf--page' },
    };

    
    html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {

        pdf.setFontSize(10);
    }).get('pdf').then(function (pdf) {

        console.log('hi');
        var pdfBase64 = pdf.output();
        console.log(pdfBase64);
        var pdfcontent = {};

        pdfcontent.PDFBase64 = pdfBase64;
        pdfcontent.FileName = fileName;


        $.ajax({
            type: "POST",
            url: "/pdf/savepdf",
            data: "{pdfcontent:" + JSON.stringify(pdfcontent) + "}",
            contentType: "application/json;charset=utf-8",
            datatype: "json",
            complete: OnComplete
        });
    })
}

这里是 C#、JavaScript 的完整代码 在 C#、MVC、html2pdf、Ajax 中保存从 html2pdf 生成的 PDF