Is it possible for pdfjs-dist to be used with Typescript?

Is there a way to preview a PDF as a canvas without importing pdfjs-dist into my project?

I have already used the command $yarn add pdfjs-dist to install pdfjs-dist.

Do I need to include any additional imports?

import pdfjsLib from "pdfjs-dist/build/pdf"; //<-- This is where I am facing an issue.

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

Could not find a declaration file for module 'pdfjs-dist/build/pdf'. 'd:/pdf-genarator/node_modules/pdfjs-dist/build/pdf.js' implicitly has an 'any' type.

If I remove ../build/pdf;

import pdfjsLib from "pdfjs-dist";

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

No errors show up at this point, but when I run it, the console displays:

Uncaught TypeError: Cannot read properties of undefined (reading 'GlobalWorkerOptions') . . .
typescriptvue.jspdfpdfjs-dist

Answer №1

Experiment with using imports :

import * as pdfjs from 'pdfjs-dist/es5/build/pdf';
import pdfjsWorker from 'pdfjs-dist/es5/build/pdf.worker.entry';

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
const pdfLibrary = pdfjs;

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

Traverse through an object's array in Vue.js

Having a major issue :( I'm developing a booking app and trying to loop through Dates in one option and Times in another. The times should have the same Id as the Date for the corresponding times. I am fetching dates and times from an API, and the dat ...

vue.jsvuejs2vue-component

Encountering issues with accessing a variable before its initialization in the getServerSideProps function in

Currently, I am working on setting up Firebase and configuring the APIs and functions to retrieve necessary data in my firebase.tsx file. Afterwards, I import them into my pages/index.tsx file but I am encountering an issue where I cannot access exports af ...

typescriptfirebasegoogle-cloud-firestorenext.js

Receiving undefined when subscribing data to an observable in Angular

Currently, I am facing an issue in my Angular project where subscribing the data to an observable is returning undefined. I have a service method in place that retrieves data from an HTTP request. public fetchData(): Observable<Data[]> { const url = ...

javascriptangulartypescriptobservablesubscribe

Utilizing next/image as a backgroundImage in a div container

Currently, I am working with nextjs and I am trying to set a background Image for a specific div using next/image. Most of the sources I found only explain how to implement full screen background images with next/image, not for a single div. I stumbled upo ...

javascriptcssreactjstypescriptnext.js

What is the best way to include bootstrap using webpack?

I am currently building a webapp using Typescript and webpack. I have been able to successfully import some modules by including them in my webpack.config.js file as shown below. However, no matter how many times I attempt it, I cannot seem to import the b ...

javascripttypescriptwebpack

Finding the current HTML page URL in Ionic 2: A step-by-step guide

Can the URL of the current HTML page be obtained and then converted to PDF using the cordova-pdf-generator package? ...

htmlpdfnpmionic2

Demonstrating various elements within an application using Vue3

I created two components and attempted to display them in a Vue 3 application. Here is my HTML code: <div id="app"> <image_preview> URL: [[image]] </image_preview> <file_uploader> Counter:[[coun ...

javascripthtmlvue.jsvuejs3

The step-by-step guide to fixing a Gigwage client eslint error using nestJS

Whenever I utilize the gigwage client for my services, I encounter the following eslint error: TS2742: The inferred type of 'findAll' cannot be named without a reference to '@gigwage/client/node_modules/axios'. This is likely not porta ...

typescriptnestjs

Tips for preventing the "Error: Avoided redundant navigation to current location: "/inside/home" when the authentication guard restricts access to the route

Upon logging out, I would like Vue to automatically navigate to the default landing page. The current behavior is causing Vue to redirect to the existing route instead. This redirection gets intercepted by a guard that prevents it and sends the user back ...

vue.jsvuejs3vue-routervue-router4

Leveraging Vuetify on a standalone .html document

I am currently working on a personal project where I am experimenting with avoiding a full npm build process. Instead, I am trying to work within a single .html file that utilizes Vue 3 and Vuetify. Below is the complete HTML code which can be simply dropp ...

javascriptvue.jsvuetify.js

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

javascriptcssvue.jsfrontendvuetify.js

Utilizing the "as" keyword for type assertion in a freshly created react application using create-react-app leads to the error message `Parsing error: Unexpected token, expected ";"`

After creating a new CRA project using yarn create react-app my-app --template typescript, I encountered an error when trying to run the development server with yarn start: src/App.tsx Line 5:24: Parsing error: Unexpected token, expected ";" ...

typescriptcreate-react-apptype-assertion

What could be causing the error message "@vue/composition-api/dist/vue-composition-api.mjs Not Found" to appear every time I

I received a Vue.js project from my vendor and have downloaded all the necessary packages using npm install. However, when I attempt to run npm run dev, I consistently receive the following error message: This dependency was not found: @vue/composition-a ...

vue.jsnpmvuejs2

Closing a tab in another part of the session using Typescript and Angular

Looking for a solution on how to close a tab within an Angular session that was opened from somewhere else in the same session. For instance: In Component A this.window = this.windowToken.open('Some URL', 'Some Tab Name', 'Some ...

angulartypescript

Setting the initial state for your ngrx store application is a crucial step in ensuring the

I'm completely new to ngrx and I'm currently exploring how to handle state management with it. In my application, each staff member (agent) is associated with a group of customers. I'm struggling to define the initial state for each agent ob ...

javascriptangulartypescriptngrxngrx-store

What is the best way to insert information into my SQLite database?

Hey there! I'm new to programming and recently started working on an IONIC App. However, I've hit a roadblock. My goal is to create a phone book feature where users can get random JSON contacts and save them to their sqlite database. Here's ...

sqliteangulartypescriptionic-framework

What is the best way to link the :style attribute with object syntax and incorporate multiple background images?

I'm experiencing an issue trying to bind CSS style with the object syntax to an image. The style object includes the CSS property background which refers to multiple background images, but unfortunately, these images are not showing up. Template < ...

javascriptvue.jsvuejs2vuetify.js

When attempting to print a Rectangle on my webpage using JavaScript and taking user input, I encountered an error stating that 'str' is not defined

I'm trying to implement a feature where clicking on the "try it" button will prompt the user for the number of lines and then print that many lines in the form of a rectangle. However, when I run my code, nothing appears on the DOM and there is an err ...

javascripthtmlnode.jsreactjstypescript

What is the best way to disable a collapsed section in VS Code using comments?

I'm wondering how to properly comment out a "folded" section of code using VS Code. For instance, I want to comment out the collapsible region: if (a == b) { dance(); } I am familiar with the keyboard shortcut for folding regions: Ctrl + Shift + ...

typescriptvisual-studio-codecomments

Measuring the success of Vuejs app

Seeking performance metrics for a Vue application. Interested in metrics for the entire app as well as specific components. I am aware of using Vue.config.performance = true; to enable performance monitoring through dev tools, and I have considered utiliz ...

javascriptperformancevue.jsfrontendvuex