Differences in rendering of jsPDF across various operating systems

Currently, I am working on an Angular project in Linux and have had great success with the jsPDF library. The PDF export generated on Linux is exactly what I hoped for: Linux Export - good

However, when I ran the same code on Windows and Mac machines, the exported PDF file turned out to be about 200% larger than expected as shown here: Windows/Mac Export - bad

I spent a considerable amount of time adjusting scaling, implementing a scaled ratio, managing to get the first page to display correctly. Unfortunately, subsequent pages got clipped starting from the halfway point of the previous page. Additionally, the fix that worked on one machine looked terrible when viewed back on the Linux system.

Do you have any insights on why there may be differences in rendering between the various operating systems? Has anyone else faced this issue before? Could it be a known bug with the library or did I miss something while reading its documentation?

Below is a snippet of the code responsible for exporting the PDF in my genreateReport.ts file:

[Code snippet from genreateReport.ts]

Here's how the generateReport.html file looks:

[HTML structure from generateReport.html]

If you're feeling adventurous, here's some CSS you can play around with:

[CSS styles for the design elements]
angulartypescriptpdfoperating-systemjspdf

Answer №1

I'm encountering the identical problem. I inserted an image using the addImage function with specified X and Y coordinates, but the result varies depending on the operating system (Windows/Mac).

I've scoured through various resources, including GitHub issues, but have been unsuccessful in finding a solution.

Has there been any development regarding this issue?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlocking the value of the "input" field within an EventListener function in Angular directly from the DOM

In my "characters" module, there is a form with a text field and a button. When the button is clicked, it triggers a function but I am struggling to retrieve the current input text and pass it to the async function. HTML: https://i.sstatic.net/DMF8w.png ...

javascriptangulartypescript

Store a collection of objects in Firebase while ensuring that the keys are unique and not numbered sequentially

I have an array of JavaScript objects structured like this: jsObjFromCsv = [ { "J251525" : { "APPROVER" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8edac1c3cec3cfc7c2a0cdc1c3">[email pr ...

javascriptangularfirebasefirebase-realtime-databaseangularfire2

Discover the key to ensuring that optional peer dependencies are genuinely optional

My NPM package offers both core functionality in the form of React hooks and UI components that utilize these core features. Originally, I planned to create two separate packages - one for the core functionality and another for the components. However, upo ...

reactjstypescriptnpmes6-modulespeer-dependencies

Leveraging Sat-popover within *ngFor loop in Angular 6

I have been attempting to implement sat-popover within an *ngFor loop in order to display multiple instances of sat-popover for various buttons. Here is the link to sat-popover However, I am encountering issues with getting it to work properly. Assistanc ...

angular

Despite being listed in the entry components, HelloComponent is not actually included in the NgModule

Check out my StackBlitz demo where I am experimenting with dynamically instantiating the HelloComponent using the ReflexiveInjector. The HelloComponent is added to the app modules entryComponents array. Despite this setup, I am still encountering the foll ...

javascriptangulartypescript

"Utilizing the same generic in two interface properties in Typescript necessitates the use of the

I have created an interface as follows: interface I<T>{ foo: T arr: T[] } After defining the interface, I have implemented an identity function using it: const fn = <T>({foo, arr}: I<T>) => ({foo, arr}) When calling this function l ...

typescripttypescript-generics

Tips on deleting a nested JSON key?

Here is an example of my JSON structure: var data = [{ "ID" : 3, "discRec" : "Some sample record", "Tasks" : [{ "ID" : 7, ...

javascriptjsontypescript

Integrate Bootstrap 4 with your Angular 6 or Angular 7 application

Currently working on an Angular project that utilizes Bootstrap 4. Seeking assistance with incorporating SCSS into my Angular application. The question at hand is: Are the steps for adding Bootstrap 4 SCSS in Angular 6 and Angular 7 identical? For exa ...

angularnpmbootstrap-4angular-cliangular7

Can you explain the significance of using '&' in the TypeScript statement 'export type T1 = object & ComponentOptions<T1, T2>'?

I am a newbie to TypeScript and currently exploring the source code of Vue. However, I'm a bit confused about the grammar used in the code snippet below. Can anyone explain what '&' means in the following code? Also, could someone guide ...

typescriptvue.js

What function does the ng-template serve when encapsulated within an ng-select component?

Upon observing various instances of ng-select, I've noticed that it often involves wrapping a ng-template, as exemplified below: <ng-select [items]="cities" [(ngModel)]="selectedCity" bindLabel="name" bindV ...

angulartypescriptangular-ngselectng-template

An issue occurred while attempting to toggle the drawer navigation. It seems that the ToggleDrawer function is

I'm currently utilizing stack navigation in my application, but I have made the decision to add a Drawer for the user's menu. While I was able to incorporate the Drawer into my pages, some of them contain MapView content, causing the user to be ...

typescriptreact-nativenavigation-drawerreact-typescript

Prior to the loading of the AppModule in Angular, make sure to load

Consider the following situation (Angular v7): Retrieve configuration settings (API server URL and Auth server URL) from an external source (JSON), prior to loading the AppModule Provide configuration to the AppModule (OAuth2 module) Compile the applicat ...

angulartypescript

Subscribing to an RxJs Subject and receiving multiple values

In my Angular Service, there is a Subject defined like this: private sub = new Subject(); sendSub(page: page) { this.sub.next(page); } getSub(): Observable<any> { return this.sub.asObservable(); } In the parent component, I have subscribe ...

angularrxjssubject-observer

Function 'await' fails to execute

Within this function, I am iterating through an array of strings, each representing a user's UID. The goal is to access each user's profile, retrieve the most recent reputation (similar to SO), and then add a map of the UID and reputation to a ne ...

node.jstypescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions

The correct method for handling arrays with overlapping types and narrowing them down again

When working with arrays containing different types in TypeScript, I often encounter issues with properties that are not present on all types. The same challenge arises when dealing with various sections on a page, different user roles with varying proper ...

typescriptunion-types

Tips for organizing a multi-dimensional array based on various column indexes

I am looking to organize a multidimensional array by multiple column index. Take, for instance, the test data provided below: var source = [ ["Jack","A","B1", 4], ["AVicky","M", "B2", 2], [ ...

javascriptarraystypescript

Using Mongoose with TypeScript: Receiving an error message stating "Expected 0 arguments, but received 1" while trying to construct an ObjectId... surprisingly,

Encountering an issue where I receive the error message "Expected 0 arguments, but got 1" on this line (idProduct is a string) : |new mongoose.Types.ObjectId(idProduct) Interestingly, even though it's underlined, the code still functions correctly.. ...

node.jstypescriptmongodbmongoose

The Angular5 code is unable to execute the POST request, while it functions properly when triggered from Postman

Frontend: Angular5 Backend: Java (Operates on a Wildfly 8.x server) When sending an HTTP POST request from my Angular application to the server with content-type: 'application/json', I encounter the following error: Failed to load http://loc ...

angularcorshttp-postpostman

Typescript: The art of selectively exporting specific types

As I develop a Typescript component library, the API consists of two named exports: the component itself and a helper function to create an object for passing as a prop. The process is straightforward. For this library, I utilize an index.ts file as the m ...

typescript

Using Nest JS to create two instances of a single provider

While running a test suite, I noticed that there are two instances of the same provider alive - one for the implementation and another for the real implementation. I reached this conclusion because when I tried to replace a method with jest.fn call in my ...

javascriptnode.jstypescriptjestjsnestjs