html - Hur skapar man en PDF med innehåll från en Angular-vy?

Jag har en Angular-app som använder ngx-charts för att rendera några diagram, till exempel:

Nu vill jag exportera denna vy och dess diagram till en PDF-fil, men för tillfället är jag inte säker på hur jag ska ta itu med detta.

Finns det ett sätt att exportera HTML för den här vyn till PDF, eller finns det andra sätt att skapa PDF-filer baserat på en vy?

Ytterligare fråga: tänk dig att jag måste rendera vyn och generera PDF:en på serversidan, utan användarinteraktion, hur skulle du hantera detta?

Svar #1

Tillsammans har du de bästa chanserna med detta bibliotek: jsPDF

eller du kan försöka göra något från den här koden :

print(){  
  var canvas = document.getElementById(id) as HTMLCanvasElement;
  var dataURL = canvas.toDataURL();
  let popupWin,printContents;
  popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
  popupWin.document.open();
  popupWin.document.write(`
    <html>
      <head>
        <title>${title}</title>
        <style>
        </style>
      </head>
  <body width="100%" height"="100%" onload="window.print();window.close()"><img src="${dataURL}" width="600px" height="auto"></body>
    </html>`
  );
  popupWin.document.close();
  }

kort sagt, skapa en canvas och skriv ut den (och spara som pdf)

Relaterade artiklar