Is there a way to convert a dynamically generated HTML table into a PDF and also have the ability to print it using Angular 2 and Typescript?
Is there a way to convert a dynamically generated HTML table into a PDF and also have the ability to print it using Angular 2 and Typescript?
To use JSPDF with Angular 2, you'll first need to obtain the definitions from dt~. Import the library by following this syntax:
import * as jsPDF from "jspdf";
.
.
.
let doc = new jsPDF();
// Include a title in your PDF
doc.setFontSize(30);
doc.text(12, 10, "Your Title");
// Construct your table here (The dynamic table must be converted to canvas).
let element = <HTMLScriptElement>document.getElementsByClassName("pvtTable")[0];
html2canvas(element)
.then((canvas: any) => {
doc.addImage(canvas.toDataURL("image/jpeg"), "JPEG", 0, 50, doc.internal.pageSize.width, element.offsetHeight / 5 );
doc.save(`Report-${Date.now()}.pdf`);
})
Update your system.js, in the map section, with this line:
"jspdf": "<myLibs>/jspdf.js",
Currently, I am in the process of developing my portfolio website using Angular 2 and I want to incorporate a skill matrix. For testing purposes, I am using a square provided by font-awesome as an example. <tbody *ngFor="let skill of skills"> <tr ...
Background / Need As part of a collaborative effort on a web application using Node.JS and Express, our group is seeking the ability to create printable reports and forms in both hard copy and PDF formats. Ideally, we would like to dynamically generate PD ...
I have a unique singleton implementation: class UniqueSingleton { private static instance: UniqueSingleton; private constructor() { // Only allows instantiation within the class } public static getInstance(): UniqueSingleton { if (!Unique ...
I've encountered an issue with my pipeline. While I am aware that my current Karma tests are not working properly, there seems to be a discrepancy between running the tests on my local machine and on DevOps pipelines. karma.conf.ci.js // Configurat ...
Trying to incorporate the express-openid-connect library for authentication backend setup with a "simple configuration," an issue arises when attempting to access the oidc object from express.Request: app.get("/", (req: express.Request, res: express.Respon ...
Having an issue with TypeScript (TS2531) and its non-null type checking. Here's the scenario: if (this.formGroup.get('inseeActivityCode') !== null) { mergedCompanyActivity.inseeActivityCode = this.formGroup.get('inseeActivityCode&ap ...
I am encountering an issue with my DELETE mapping export async function DELETE({params} : {params: {id: string}}) { try { const loanToDelete = await prisma.loan.findUnique({ where: { id: parseInt(params.id) } }) if (!loanToDelete ...
I have the following data in Angular that I need to pass to a Node API. The data includes a JSON object that is being sent to the Node API using the POST method. var myData = { "que": { "id": 1, "status": 1, "option": [ ...
My custom decorator named "User" is quite simple: export const User: () => ParameterDecorator = createParamDecorator( (data: any, req): UserIdentity => { const user = getUser(req); return user; }, ); Now, I'm in need of validating ...
I have successfully printed the following JSON data in Angular from a local file: [{ "Firstname": "Steve", "Lastname": "Jansson" }, { "Firstname": " ...
I am new to working with ghostscript. I have a PDF file that includes a card, and I am trying to crop that specific card out of the document. So far, I have managed to convert the PDF to an image using ghostscript, but I am struggling to figure out how t ...
I am currently working on developing an Angular web application with a specific theme that requires the inclusion of CSS and JS files. Majority of the JS files needed are jquery plugins, so I made sure to install them using the following commands: npm i j ...
Is there a way to remove the warning messages that pop up in Angular when installing packages? npm WARN @auth0/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b7b8b1a3bab7a4fbbca1a296e3f8e6f8e4">[email protected]</a ...
I have an array of observables that I need to subscribe to one at a time, waiting for each to finish before moving on to the next. If any of the observables fail, I want to retry them a few times before moving on. I am struggling to find an efficient way t ...
I searched extensively online and came across resources like this: https://www.typescriptlang.org/docs/handbook/enums.html, but none provided an answer to my specific inquiry. Within the enum generated by typescript-generator, I have the following: type ...
I attempted to execute a small cypress test by trying to navigate to a lazy loaded page, but unfortunately it did not work as expected. The URL path I aimed for was: 'angular-page/angular-page-content1' My approach: describe('1st. test&apos ...
How can I efficiently utilize classes from a namespace that may be the same or different from the current file's namespace? I currently have the following two files. TypeA.ts: export namespace Game { @ccclass export class TypeA extends cc.Component ...
It appears that in the realm of JavaScript, one has the capability to execute: function extendPromise(promise) { return promise.then(new Promise(() => {})); } However, when incorporating types into the mix, such as function extendTypeScriptPromis ...
As I embark on incorporating ngrx into a new enterprise Angular application, I am faced with the task of loading data into the store using a simple effect that triggers a service call. The response from the server upon successfully calling this service co ...
Struggling with TypeScript and trying to understand a specific issue for the past few days. Here is a simplified version: type StrKeyStrVal = { [key: string]: string }; function setKeyVal<T extends StrKeyStrVal>(obj: T, key: keyof T, value: str ...