Looking to switch up the font style in your tables? Perhaps you've noticed that using setFont() only alters the

I've been working on a Vue method that creates a PDF file from my data. I'm currently attempting to use the font type 'newFontType' for the text within the table.

        generatePDF() {
            let doc = new jsPDF({ orientation: 'l', format: 'a4' });
            doc.addFileToVFS('NEWFONT.TTF', NEWFONTS);
            doc.addFont('NEWFONT.TTF', 'newFontType', 'normal');
            doc.setFont('newFontType');
            doc.setFontSize(20);

            let header = ['id', 'name', 'quantity'];
            const title = 'All Data';
            const titleWidth = (doc.getStringUnitWidth(title) * doc.internal.getFontSize()) / doc.internal.scaleFactor;
            const xPos = (doc.internal.pageSize.getWidth() - titleWidth) / 2;
            const yPos = 20;
            doc.text(title, xPos, yPos);
            doc.setFont('newFontType', 'normal');
            doc.table(10, 30, this.data, header);

            doc.save('Report1' + '.pdf');

            doc = null;
        },

I attempted using `doc.table(10, 30, this.data, header, styles: { font:'newFontType'});` but it did not work as expected. Can someone please assist me with this? Thank you!

javascriptvue.jsjspdf

Answer №1

There appears to be a small issue with how you are specifying the font for the table text. Below is the revised version of your code:


    generatePDF() {
        let doc = new jsPDF({ orientation: 'l', format: 'a4' });
        doc.addFileToVFS('NEWFONT.TTF', NEWFONTS);
        doc.addFont('NEWFONT.TTF', 'newFontType', 'normal');
        doc.setFont('newFontType');
        doc.setFontSize(20);
    
        let header = ['id', 'name', 'quantity'];
        const title = 'All Data';
        const titleWidth = (doc.getStringUnitWidth(title) * doc.internal.getFontSize()) / doc.internal.scaleFactor;
        const xPos = (doc.internal.pageSize.getWidth() - titleWidth) / 2;
        const yPos = 20;
        doc.text(title, xPos, yPos);
        
        // Remove the line below as it is unnecessary
        doc.setFont('newFontType', 'normal');
        
        doc.autoTable({
            startY: 30,
            head: [header],
            body: this.data,
            theme: 'grid',
        });
    
        doc.save('Report1' + '.pdf');
    
        doc = null;
    },

The issue stemmed from the line 

doc.setFont('newFontType', 'normal');
. This particular line can be removed since you have already set the font to 'newFontType' earlier using doc.setFont('newFontType');. The autoTable function in the jsPDF-AutoTable library that you are utilizing to create the table will automatically inherit the current font settings, eliminating the need to redeclare it.

With this corrected approach, the text within the table will also utilize the 'newFontType' font. Your remaining code seems solid for generating a PDF file containing a table and custom font through the use of jsPDF in a Vue application.

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

Is it possible to retrieve specific elements from another html file using AJAX?

Looking to use vanilla JS for loading content dynamically without needing a page refresh. The goal is to retrieve content from another HTML file when a menu option is selected, while targeting either the body or a specific class. Is it possible to achieve ...

javascriptajax

What sets the HTML5 cross-browser compatibility saga apart from that of CSS/JS?

Back when CSS and JS became popular, the major issue was that each browser interpreted them differently leading to limited functionality across different browsers. Now as HTML5 gains traction, it seems like we might be headed towards a similar situation, b ...

javascriptcsshtmlcross-browser

Watch as objects materialize after using the zoom function in THREE.JS

I am facing an issue with THREE.JS involving the addition of 3D text to my scene using the following code: var loader = new THREE.FontLoader(); loader.load( '3rdparty/three.js/fonts/helvetiker_regular.typeface.json',function ( font ) { var ma ...

javascriptthree.js

Expo + tRPC: Oops! Looks like the application context couldn't be retrieved. Don't forget to wrap your App inside the `withTRPC` HoC for

I'm currently working on a straightforward tRPC server setup: // server.ts import { initTRPC } from "@trpc/server"; import { z } from "zod"; const t = initTRPC.create(); export const appRouter = t.router({ greeting: t.procedu ...

javascripttypescriptreact-nativeexpotrpc.io

Styling the Material UI ImageList with a fade scroll effect

I am currently working on a horizontal scrolling ImageList using Material UI V5, and I'm looking to create a smoother transition at the edges of the list. I have managed to fade the edges, but my goal is to only fade them when the user has reached the ...

javascriptcssmaterial-uiimagelistscroll-position

How to Resize a div Using Vue.js without el.style.attr Command

I've been attempting to create something similar to the image using Vue, but I'm struggling with resizing the div elements. Group of Circles: Vue Warning: Error in mounted hook: "TypeError: Cannot read property 'style' of undefined ...

javascriptvue.js

"Combining HTML, PHP, and JavaScript for Dynamic Web

Here is the PHP function that retrieves the visitor's profile image thumbnail: <?php echo voip_profile_image($visitorid,'thumb'); ?> The issue lies in the fact that $visitorid is stored in JavaScript under the sRemoteid parameter. Wi ...

javascriptphphtml

Stripping JavaScript files of their directory paths using Gulp without affecting their parent folders

Upon reading this post, checking out this package's documentation, and learning about globs here, I am struggling to figure out how to modify the code snippet below to filter only the JavaScript files without including their parent folders: gulp.task ...

javascriptnpmgulpbower

AJAX - Achieving Dual Outcomes with Page Reload

Recently, I've been working on code that pulls information from an XML feed using AJAX and displays it based on certain conditions: $.ajax({ type: "GET", url: "testxml.xml", dataType: "xml", success: function(xml) { $(xml).fin ...

javascriptjqueryxmlajax

Confirm the attributes of a table column

How can I ensure that a specific column in an HTML table is validated using a click function in JavaScript or jQuery? <table class="table table-bordered table-striped table-responsive" id="tableid"> <thead> <tr> ...

javascriptjquery

Animating jQuery Accordion in Horizontal Direction Extending to the Far Right

After implementing a horizontal accordion in jQuery based on the tutorial found at the following link: A minor issue arose during animation where a slight space was added on the far right side, causing the tabs to shift slightly. This problem is particula ...

javascriptjquerycssjquery-ui

Retrieving the updated list after a child has been deleted from the Firebase Database

According to the documentation, the DataSnapshot received in the child_removed callback contains the old data for the removed child. I have a scenario where I am adding data using push and then trying to access the next value after the top child is remove ...

javascriptfirebasefirebase-realtime-database

Error: The method _firestore.default.initializeApp is not defined as a function

I am encountering an issue in my app where "_firestore.default.initializeApp" is not recognized as a function while evaluating src/screens/Login.js, src/appNavigator.js, and App.js. I have already ensured that I have added the firebaseconfig and connected ...

javascriptreactjsfirebasereact-native

Attempting to resolve an error message with the help of JQuery

I need help figuring out how to clear an error icon when a user presses a key. ** EDIT - including the HTML code ** <input class="validate" type="text" data-type="string" id="address" /> <input class=" ...

javascriptjqueryfunction

When using PHP to echo buttons, only the value of the last echoed button will be returned in JavaScript

I am encountering an issue when trying to define a dynamic var for button value in my JavaScript code. Despite it working in PHP, the same code does not seem to function properly in JavaScript. Imagine I have three buttons echoed using PHP with values 1, ...

javascriptphpajax

text:js Using a StringBuilder

As a newcomer to the .NET platform, I am eager to learn how to pass a JS function with curly brackets as a string inside StringBuilder.AppendFormat() in C#. Below is my desired approach: StringBuilder sb = new StringBuilder(); sb.AppendFormat(@"<s ...

javascriptc#vue.jsstringbuilder

When I click on the md-select element, a superfluous "overflow-y: scroll;" gets added to the <body> of my webpage

Typically, I have the following styles on my body: element.style { -webkit-app-region: drag; } However, when I interact with a md-select element (you can observe this behavior on the provided link), additional styles are applied. element.style { -w ...

javascripthtmlcssangularjsangular-material

what's causing the tabs in bootstrap to malfunction

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootst ...

javascriptjqueryhtmlcsstwitter-bootstrap

Retrieve information from a pair of models

Hey there, I need some help. Can someone please guide me on how to obtain the 'topics' array and append it to res.view()? I've tried multiple approaches but keep getting 'undefined' in the 'topics' array. Subjects.qu ...

javascriptmysqlnode.jssails.js

Using HTML: The trick to obtaining selection offsets in relation to HTML tags

Let's say I have HTML code like this: <div> <p> start<span>span</span>end </p> </div> I am looking for a way to retrieve the offsets when text is selected, while still taking into account the presence of span ...

javascriptjqueryhtml