How to send jspdf to nodejs server from angular-CodePudding

type here

Hi I want to convert html to pdf in angular using jspdf and send to nodejs server

Can anyone help me?

Or give me advice please

I have this code saved in the browser and I want to send it to the nodejs server

public openPDF(): void {
    let DATA: any = document.getElementById('content');
    html2canvas(DATA).then((canvas) => {
      let fileWidth = 208;
      let fileHeight = (canvas.height * fileWidth) / canvas.width;
      const FILEURI = canvas.toDataURL('image/png');
      let PDF = new jsPDF('p', 'mm', 'a4');
      let position = 0;
      PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);
      PDF.save();
      
    });
  }

CodePudding user response：

To convert HTML to PDF in Angular using jspdf, you can follow these steps:

Install jspdf and html2canvas packages using npm:

npm install jspdf html2canvas

Import the jspdf and html2canvas packages in your component:

import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

Use the html2canvas function to convert the HTML element with the ID content to a canvas element:

let DATA: any = document.getElementById('content');
html2canvas(DATA).then((canvas) => {
  // code to generate PDF goes here
});

Use the jsPDF constructor to create a new PDF object with the desired dimensions (in this case, A4):

let PDF = new jsPDF('p', 'mm', 'a4');

Use the addImage method to add the canvas element to the PDF as a PNG image:

PDF.addImage(canvas, 'PNG', 0, 0, canvas.width, canvas.height);

Use the save method to save the PDF to the user's device:

PDF.save();

To send the generated PDF to a Node.js server, you can use the httpClient module in Angular to make a POST request to the server, along with the PDF data as the request body.

import { HttpClient } from '@angular/common/http';

constructor(private httpClient: HttpClient) {}

public sendPDF(): void {
  let DATA: any = document.getElementById('content');
  html2canvas(DATA).then((canvas) => {
    let fileWidth = 208;
    let fileHeight = (canvas.height * fileWidth) / canvas.width;
    const FILEURI = canvas.toDataURL('image/png');
    let PDF = new jsPDF('p', 'mm', 'a4');
    let position = 0;
    PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);
    // get the PDF data as a base64-encoded string
    const pdfData = PDF.output('datauristring');

    // send the PDF data to the server
    this.httpClient.post('https://your-server.com/pdf', pdfData)
      .subscribe(response => {
        // handle the response from the server
      });
  });
}

On the server side, you can use the Buffer class from the Node.js buffer module to convert the base64-encoded PDF data to a binary buffer, which can then be saved to a file or sent as a response to the client.

const buffer = require('buffer');

app.post('/pdf', (req, res) => {
  const pdfData = req.body;
  // convert the base64-encoded PDF data to a binary buffer
  const pdfBuffer = buffer.Buffer.from(pdfData, 'base64');

  // save the PDF buffer to a file
  fs.writeFileSync('file.pdf', pdfBuffer);

// send the PDF file as a response to the client
res.sendFile('file.pdf');
});

I hope this helps!

CodePudding user response：

this is my app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private httpClient: HttpClient) {}

  public sendPDF(): void {
    let DATA: any = document.getElementById('content');
    html2canvas(DATA).then((canvas) => {
      let fileWidth = 208;
      let fileHeight = (canvas.height * fileWidth) / canvas.width;
      const FILEURI = canvas.toDataURL('image/png');
      let PDF = new jsPDF('p', 'mm', 'a4');
      let position = 0;
      PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);
      // get the PDF data as a base64-encoded string
      const pdfData = PDF.output('datauristring');
  
      // send the PDF data to the server
      this.httpClient.post('http://localhost:3000/pdf', pdfData)
        .subscribe(response => {
          // handle the response from the server
          console.log(response);
        });
    });
  }

}

CodePudding user response：

This is my server app.js

const express = require('express')
const app = express()
const port = 3000
const buffer = require('buffer');

app.post('/pdf', (req, res) => {
  const pdfData = req.body;
  // convert the base64-encoded PDF data to a binary buffer
  const pdfBuffer = buffer.Buffer.from(pdfData, 'base64');

  // save the PDF buffer to a file
  fs.writeFileSync('file.pdf', pdfBuffer);

// send the PDF file as a response to the client
res.sendFile('file.pdf');
});

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})