One of the most important parts of our application is to be able to save the resume as a PDF. After all, we want users to be able to apply with this resume. The user can send this resume digitally, via email, LinkedIn, etc, or even print it out.

One option would be to let the user print the resume directly from the app with the browser’s window.print() API. The problem is that this will often distort the look of the resume, for example, by adding a default header and footer, decreasing the quality, etc. Every browser has a different default setting, so it is hard to provide this functionality in a good way for all users.

The better option is to export the resume pdf with a library.

We want to add an "Export as pdf" button. Since we will use more buttons in further lessons, we will create a 

 component first. This way, we can add a scoped button style to this component, and all the CustomButtons will look similar. We create a 

 file in the components directory. In the template section, we add button tags. Inside this button, we add a slot. This way, the content of the button can be passed in from the parent component.

 and another dynamic class for the button type.
We can add a dynamic class attribute in addition to the static one, with 

. As a value, we pass in the name of the computed property.

In order to generate the custom class, we will receive the prop 

. We set an empty string as a default value to make this prop optional.

The prop value will be "primary" or "secondary", for example, and we want to generate classes such as 

. For that, we add a computed property where we concatenate the string 

computed: {
    customClass() {
        if(this.btnType) {
            return 'btn-' + this.btnType
        }
    }
}

For those classes, we add some styling as well in the scoped styling section.
All buttons will get default styling with the 

 class, but the buttons that also get a custom class, such as 

Now that we have a standardized button component, we will create an 

 component.
As we did before many times in the 

 component, we first import the component, register it in the components object,
and then we can use it in our template.
We add the text "Export as pdf" to be rendered inside the slot and add the prop 

.
The button gets an event listener that listens to the 

 event and calls an event handler that we will call 

<template>
    <CustomButton @click="exportPdf" btn-type="primary">
        Export resume pdf
    </CustomButton>
</template>

<script>
import CustomButton from './CustomButton.vue';

export default {
    components: {
        CustomButton
    }
}
</script>

 method that fires when the button is clicked, one thing I want to do is see this component displayed. For that, we need to import the 

 component and register it. For now, we will just add it somewhere in the sidebar.

Before triggering the export, we need to make sure that the editing mode is off. Otherwise, the resume would be exported with all those buttons and editing visualization. One way to achieve this is by adding a 

 directive to the components tag. Now, the user can only use the export pdf button when editing mode is toggled off.

 to the elements in the sidebar that should only be visible when editing is on. This way, all those configuration options will be removed when edit mode is off, and the user can focus on the export options.

To clarify to the user that they have to toggle the switch to see the export options, we want to display "Edit mode" on one side of the switch and "Export mode" on the other. To accomplish this, we add the prop 

 component and pass "Export mode" as its value to the 

---
title: Export resume as PDF
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/qYwDIb12lHJ7ZkV5NbCQKa00FsMA6aGWUEvb01WHuI8Qk.m3u8
description: Add an export as PDF functionality to the resume builder. Integrate the jsPdf library into your app.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-10-starting-code?ref_type=heads
---

## Export resume as PDF

One of the most important parts of our application is to be able to save the resume as a PDF. After all, we want users to be able to apply with this resume. The user can send this resume digitally, via email, LinkedIn, etc, or even print it out.

One option would be to let the user print the resume directly from the app with the browser’s window.print() API. The problem is that this will often distort the look of the resume, for example, by adding a default header and footer, decreasing the quality, etc. Every browser has a different default setting, so it is hard to provide this functionality in a good way for all users.

The better option is to export the resume pdf with a library.

We want to add an "Export as pdf" button. Since we will use more buttons in further lessons, we will create a `CustomButton` component first. This way, we can add a scoped button style to this component, and all the CustomButtons will look similar. We create a `CustomButton.vue` file in the components directory. In the template section, we add button tags. Inside this button, we add a slot. This way, the content of the button can be passed in from the parent component.

```html
<template>
    <button>
        <slot></slot>
    </button>
</template>
```

All the buttons will get the class `btn` and another dynamic class for the button type.
We can add a dynamic class attribute in addition to the static one, with `v-bind:class` or `:class`. As a value, we pass in the name of the computed property.

```html
<template>
    <button
        class="btn"
        :class="customClass"
    >
        <slot></slot>
    </button>
</template>
```

In order to generate the custom class, we will receive the prop `btnType`. We set an empty string as a default value to make this prop optional.

```javascript
<script>
    export default {
        props: {
            btnType: {
                type: String,
                default: ""
            }
        }
    }
</script>
```

The prop value will be "primary" or "secondary", for example, and we want to generate classes such as `btn-primary` and `btn-secondary`. For that, we add a computed property where we concatenate the string `btn-` with the prop value.

```javascript
computed: {
    customClass() {
        if(this.btnType) {
            return 'btn-' + this.btnType
        }
    }
}
```

For those classes, we add some styling as well in the scoped styling section.
All buttons will get default styling with the `.btn` class, but the buttons that also get a custom class, such as `btn-primary`, will overwrite the default styling.

Now that we have a standardized button component, we will create an `ExportPdf` component.
In the `ExportPdf` component, we will use the `CustomButton` component.
As we did before many times in the `App` component, we first import the component, register it in the components object,
and then we can use it in our template.
We add the text "Export as pdf" to be rendered inside the slot and add the prop `btn-type="primary"`.
The button gets an event listener that listens to the `click` event and calls an event handler that we will call `exportPdf`.

```html
<template>
    <CustomButton @click="exportPdf" btn-type="primary">
        Export resume pdf
    </CustomButton>
</template>

<script>
import CustomButton from './CustomButton.vue';

export default {
    components: {
        CustomButton
    }
}
</script>
```

Before we add the `exportPdf` method that fires when the button is clicked, one thing I want to do is see this component displayed. For that, we need to import the `ExportPdf` in the `App` component and register it. For now, we will just add it somewhere in the sidebar.

Before triggering the export, we need to make sure that the editing mode is off. Otherwise, the resume would be exported with all those buttons and editing visualization. One way to achieve this is by adding a `v-if="!editing"` directive to the components tag. Now, the user can only use the export pdf button when editing mode is toggled off.

```html
<Sidebar>
	...
	<ExportPdf v-if="!editing"/>
</Sidebar>
```

While we are at it, we will add `v-if="editing"` to the elements in the sidebar that should only be visible when editing is on. This way, all those configuration options will be removed when edit mode is off, and the user can focus on the export options.

To clarify to the user that they have to toggle the switch to see the export options, we want to display "Edit mode" on one side of the switch and "Export mode" on the other. To accomplish this, we add the prop `offLabel` to the `ToggleSwitch` component and pass "Export mode" as its value to the `ToggleSwitch` component. 

Katharina

Add an export as PDF functionality to the resume builder. Integrate the jsPdf library into your app.

Export resume as PDF

One of the most important parts of our application is to be able to save the

After all, we want users to be able to apply with this resume.

The user can send this resume digitally via email, LinkedIn, etc.

One option would be to let the user print the resume directly from the app with

window print API. The problem is that this will often distort the look of the

For example, by adding a default header and footer, decreasing the quality, etc

Every browser has a different default setting, so it is hard to provide this

The better option is to export the resume with the PDF library.

Since we will use more buttons and future lessons,

we will create a custom button component first.

This way, we can add a scope button style to this component,

and all the custom components will look similar.

We create custom button.view file in the components directory.

In the template section, we add button tags.

This way, the content of the button can be passed in from the parent component.

All the buttons will get the class button and another dynamic class for the

As a value, we pass in the name of the computed property.

In order to generate the custom class, we will receive the prop button type.

We set an empty string as a default value to make this prop optional.

The prop value will be primary or secondary, for example,

and we want to generate classes such as button primary and button secondary

For that, we add a computed property where we concatenate the string button

For those classes, we add some styling as well in the scoped styling section.

All buttons will get default styling with the button class.

For those classes, we add a similar color to the color.

But the buttons that also get a custom class, such as button primary, will

Now that we have a standardized button component, we will create an export PDF

In the export PDF component, we will use the custom button component.

As we did before, many times in the app component, we first import the

register it in the components object, and then we can use it in the template.

We add the text export resume as PDF to be rendered inside the

The button gets an event listener that listens to the click event and calls an

Before we add the implementation of the export PDF method that fires when the

one thing I want to do is to see the component displayed.

For that, we need to import the export PDF in the app component and register it

For now, we will just add it somewhere in the sidebar.

Before triggering the export, we need to make sure that the editing mode is off

One way to achieve this is by adding a vif directive to the components text.

Now, this component is only shown if editing is false because we can negate the

So the user can only use the export PDF button when editing mode is toggled off

While we are added, we will add vif editing to the elements in the sidebar that

This way, all those configuration options will be removed when editing mode is

and the user can focus on the export options.

To clarify to the user that they have to toggle the switch to see the export

we want to display edit mode on one side of the switch and export mode on the

To accomplish this, we add the prop off-label to the target switch component.

In the component, we register the prop and display it on the left side of the

Since we are using the target switch component also for the image toggle,

we make this prop optional and only displays value if it is passed down.

And pass export mode as its value to the target switch component.

Now that we have taken care of displaying the PDF export button,

we will turn our attention to adding the functionality.

To facilitate the conversion of the resume into PDF, we will be using the HTML

which is a popular library for exporting PDFs on the client side.

We will add the library with the CDN link.

There are different versions, but we will be using version 0.9.3 of the library

I will just add the CDN link underneath our main.js script in the index.html

You can just copy the link from the video script.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript