PdfMake's loading speed is significantly impacted by the use of customized fonts in large sizes

After customizing the font in pdfMake, I encountered an issue. I successfully customized the font and generated a new vfs_fonts.js file containing Roboto and simfang (Chinese font). However, the file size is about 15MB, causing the system to load very slowly for the first time as it takes a significant amount of time loading that font (as observed in the network tab). This results in long waiting times, especially on production. Does anyone have a solution for this?

Answer №1

An alternative approach involves dynamically creating font packages that only include the necessary words, though there may be room for improvement in this method. I am currently exploring more effective strategies...

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

JavaScript function dysfunction caused by global variable fatality

While attempting to update a global array using JavaScript, I encountered an issue where I couldn't access anything about it within a function. Removing the if/else statement allowed the alert for new_time to work, but the final alert did not display. ...

What steps should be taken to safely sanitize untrusted JSON data before parsing it with JSON.parse method

How can we properly sanitize a user-provided JSON string to prevent any vulnerabilities before executing JSON.parse(untrustedString)? My main concern revolves around prototype pollution, but I'm also interested in knowing about any other potential ri ...

Guide on adding an additional key:value pair to a sub document in a MongoDB collection

I'm facing difficulties trying to add a new key:value pair to an existing object in a MongoDB document. I've experimented with $each, $push, and $addToSet, but it seems like those are intended for arrays. I then attempted $set, but that only upd ...

Tips for showcasing JavaScript alert rather than a yellow-page error

I need to limit the file size that users can upload on a specific page. To achieve this, I have configured it in web.config as follows: <location path="SubSection/TestPage"> <system.web> <httpRuntime maxRequestLength="2048" /> ...

JSP Implementation of a Gravity-Driven Dynamic List

I am looking for a way to automatically populate a dropdown list within a JSP page form using values retrieved from a database query. The challenge is that only a limited number of rows are being pulled from the database based on other form inputs. I am no ...

Incorporating elements with wrapping capabilities in ExtJS

I'm puzzled by what should be a straightforward issue. I am trying to place items (buttons, specifically) on a panel so that they are displayed side-by-side and wrap once they reach the end of the panel... Appreciate any insights, JJ ...

Vue: Load page content only after the route change is complete

Every time I visit a new route within the current session, I notice that the page loads and then takes about 2 seconds for the styles to be applied. This delay causes what is commonly known as CSS flashing or FOUC (Flash of Unstyled Content), which ultimat ...

Elevate your website design by adding interactive Ripple Buttons using a combination of Javascript and

Recently, I came across a script that allows for an animation to occur when a button is clicked. However, I have encountered an issue where the script does not redirect to a link. (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, rip ...

Interactive Javascript Dropdown Selection

I'm currently developing a registration page for a website and I've added a drop-down box that explains to users why we need their birthday. However, I seem to be having issues with my code. Take a look at the script below: <script language=& ...

Is it possible to simultaneously toggle buttons and submit a form?

I am currently working on a functionality that involves toggling the display of two buttons and submitting a form. Code toggleButtons() { var btn1 = document.getElementById("start"); var btn2 = document.getElementById("pause"); if (btn1.style. ...

How to retrieve the parent index from within a nested forEach loop in JavaScript

var game_board = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ]; (function iterate() { game_board.forEach((row, i) => { row.forEach((value, j) => { // accessing indexes i and j console.log(i, j); }); }); })() I have a two-dimens ...

Ways to retrieve information from a different website's URL?

Having a bit of an issue here. I'm currently browsing through some reports on webpage #1 () and I have a specific requirement to extract the object named "data" from webpage #2 (). However, the code I've used seems to fetch the entire webpage ins ...

Combining Paper.JS Canvas with VivaGraphJS Graph: Capturing Interactions

I find myself in a unique and challenging position. Utilizing VivaGraph JS for rendering Conceptual Graphs on the web using SVG as my main graph DOM element. While creating edges between nodes, I incorporated a piece of code from Paper.JS which leverages ...

What is the best way to remove a parent app.js element from a child component?

When I click the delete button, my intention is to filter an array in the parent app.js component and remove a specific item. However, I keep encountering a Typescript error stating Cannot assign to read only property 'message' of object 'Sy ...

Nuxtjs is incorporating the Vue-pano component for enhanced functionality

When using vue-pano with Nuxtjs, I encountered the error message: "window is undefined". If I import it like this: <script> import Pano from 'vue-pano' export default { components: { Pano } } </script> I then tried using a ...

Acquiring the item by referencing one of its property's values

Imagine you have a JSON structure that looks like this: [ { "name":"Foo" "nickname":"Lorem Ipsum" }, { "name":"Bar" "nickname":"Dolor S ...

Utilize the directive solely when the preceding element is not in a disabled state

Situation: Here is an example of an Inputfield: <ion-input class="item item-input"> <ion-label>Field</ion-label> <input type="text" ng-disabled="someCondition" model="somemodel" /> <directive-elemen ...

Establish a pathway based on an item on the list

I need to create a functionality where I can click on a fruit in a list to open a new route displaying the description of that fruit. Can someone guide me on how to set up the route to the 'productDescription.ejs' file? app.js: const express = ...

Apply a specific class to the input field when the name matches x

I have a website that loads a JavaScript file from a commercial service, so I am unable to customize this file. The output of this JavaScript file is a form with various input fields, all of which have the class name "wf-input". I now want to add a jQuery ...

The CSS and Bundle script path may need adjustment following the creation of the index.html file by WebPack

There seems to be an issue with webpack trying to add 'client' to the href of script tags for my CSS and bundle files. This is causing a problem as it's incorrect and I'm unsure how to remove it. Prior to switching to webpack, here&apo ...