Guidelines for transforming an array into a personalized PDF document file

function generateCoverLetter(){
    const selectedRows: IUnprintedLookupResult[] = this.getSelectedRows()
    const doc = DocumentCreator.prototype.create(selectedRows);
    Packer.toBlob(doc).then(blob => {
      console.log(blob);
      saveAs(blob, "CoverLetter_" + this.label2 + ".docx");
    );
  }

By utilizing the code above, I was able to convert the selected array into a doc file as shown below:

[]

We can successfully generate the cover letter. However, my goal is to enable users to download it directly as a PDF and open it in a new tab when clicking on a button. Any ideas?

typescriptvue.jspdfblob

Answer №1

If you are interested in creating PDFs using jsPDF, check out the documentation at https://www.npmjs.com/package/jspdf

import { jsPDF } from "jspdf";

var pdfDocument = new jsPDF();
pdfDocument.setFontSize(22);
pdfDocument.text(20, 20, selectedRows.map(element => JSON.stringify(element)));
pdfDocument.save("myarray.pdf");

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

Trouble with invoking a function within a function in Ionic2/Angular2

Currently, I am using the Cordova Facebook Plugin to retrieve user information such as name and email, which is functioning correctly. My next step is to insert this data into my own database. Testing the code for posting to the database by creating a func ...

angulartypescriptionic2http-postcordova-plugins

What is the best way to send a value from a child component to a parent component using this.$emit

I am currently working on passing the const randomNumber from a child component [src/components/VueForm/FormQuestion.vue] to the parent component [src/App.vue]. I am using $emit to pass the data, but as a newcomer to this concept, I could use some guidance ...

vue.js

Setting a data value once the v-if condition has been fulfilled

Looking to accomplish a seemingly simple task, but struggling to find a native solution. I have multiple divs on a page with v-if conditions acting as filters for data (similar to filtering a table by select boxes). Here's a basic example: I want to ...

javascriptvue.js

Tips for passing and receiving objects as props in Vue.js

I am currently working on passing a Product object from an API call in my parent component to the child component called SoldTickets. Here is how I have set up my parent component: <template> <section id="cart-page" class="row&q ...

vue.jsvuejs2vue-componentvuex

Advantages of creating model classes in Angular 2 and above

When developing a service for my domain, I discovered that I could easily implement the service using any type like this: list(): Observable<any> { const url = this.appUrlApi + this.serviceUrlApi; return this.http.get(url, { headers: this.he ...

angulartypescript

Tips on sorting through an array using Angular 11 and data

I'm working on a subpage that contains a large amount of detailed data in the form of thousands of records. I want to filter this data based on the "id" from my route, which is also included in the dataset. However, I've run into some difficultie ...

angulartypescriptfilteringngfor

What methods can I employ to optimize the efficiency of this code?

Currently, I'm in the process of learning Vue.js and working on a website where I utilize LocalStorage for data storage. I've written some code that seems a bit clunky and redundant: <script> const app = new Vue({ el:'#app', ...

vue.jslocal-storagecode-cleanup

Version 1 of Vue.js is not compatible with Ajax-loaded HTML files

Currently, I am encountering a minor issue with loading content through ajax requests. I am in the process of developing a web application where everything is located on one page without any reloading. To achieve this, I have split the content into separa ...

javascripthtmlajaxvue.jsaxios

How can I resolve the issue of a React hook being called within a callback function when working with TypeScript and React?

I am trying to display the names of company and owner when sharing an item, but I am encountering an error that says "React hook cannot be used in callback function. React hooks must be called in a react functional component or a custom react hook function ...

reactjstypescript

Vue: Exploring the process of integrating E2E tests into a Vue project that was not set up with them initially in the

When I first started my project, I initiated it using vue init webpack my-project, but I decided not to include E2E tests at that time. Now, I have changed my mind and want to add E2E tests to my project. How can I go about doing this? For those intereste ...

vue.jstestingwebpackvue-clitestcafe

Utilizing Conditional Aurelia Validation Based on Element's Display Status

Currently, I am in the process of setting up a license subscription form using Aurelia and the Aurelia Validation plugin. Within this form, there is a fieldset dedicated to personal information which contains mostly required fields that are validated by Au ...

validationtypescriptaurelia

Developing applications using Angular/Ionic framework that follows a component-based architecture

I currently have 2 child components displayed below. Child component 1: https://i.sstatic.net/JKzGy.png Child component 2: https://i.sstatic.net/u0YpX.png The styles, positions, and other aspects are identical in both components. However, the content ...

angulartypescriptionic-frameworkionic5

Issue with Angular Checkbox: Inconsistencies in reflection of changes

I'm encountering a challenge with my Angular application where I have implemented multiple checkboxes within an options form. The issue arises when changes made to the checkboxes are not consistently displayed as expected. Below is the pertinent code ...

angulartypescript

Navigating Fragment GET parameters in Vue Router — Tips and Tricks

Having experimented with integrating Gitlab's OAuth using Web Application Flow in the backend, I am now exploring Implicit Grant in my Vue frontend. The access code provided by the API is in fragment URL parameter format, utilizing the hash symbol #f ...

vue.jsoauth-2.0gitlabvue-router

Ensuring the correct order of script, template, and style tags in Vue using a linter

Looking to implement a new linter rule that verifies the sequence of tags: <script>, <template>, and <style>. By default, Vue places <template> first, but I believe <script> should come first as it holds more importance. It w ...

vue.jseslintlint

Vue composition API's readonly target is designed to restrict changes to a specific

My "Generateur" component is successfully passing props to my "Visionneuse" component. Although everything is working fine in the browser, I am encountering this message in the console: Set operation on key "texteEnvoye" failed: target is readonly. I am c ...

vue.jsvuejs3vue-composition-apivue-reactivityvue-props

Example TypeScript code: Use the following function in Angular 5 to calculate the total by summing up the subtotals. This function multiplies the price by the quantity

I have a table shown in the image. I am looking to create a function that calculates price* quantity = subtotal for each row, and then sum up all the subtotals to get the total amount with Total=Sum(Subtotal). https://i.stack.imgur.com/4JjfL.png This is ...

javascripthtmlangulartypescript

Is it Possible for Angular Layout Components to Render Content Correctly even with Deeply Nested ng-container Elements?

Within my Angular application, I have designed a layout component featuring two columns using CSS. Within this setup, placeholders for the aside and main content are defined utilizing ng-content. The data for both the aside and main sections is fetched fr ...

javascriptangulartypescriptrxjs

Converting RTF to PDF in Linux using Java programming language

Having created a Java code to convert RTF format documents to PDF, I encountered an issue where the program runs smoothly on Windows but throws errors on Linux. Can someone kindly help me identify and resolve the problem in the code below? Java code: impo ...

javapdfrtfdocuments4j

TS2322: Subclass missing property, yet it still exists

In my project, I have defined two Angular 4 component classes. The first class, referred to as the superclass: export class SectionComponent implements OnInit { slides: SlideComponent[]; constructor() { } ngOnInit() { } } And then there&apo ...

angulartypescript