Customizing the file path for the PDF worker: A step-by-step guide

Incorporating the PDF Viewer Component from this source into an Angular 7 project has been a challenge. The documentation clearly states:

The default worker is loaded from cdnjs.cloudflare.com.

My goal is to load the worker from a local path within my project. Despite checking out this section of the documentation, I couldn't find specific instructions on how to achieve this.

What I've Attempted: After installing pdfjs-dist using npm install, I located a pdf.worker.min.js file which I placed in the shared folder of my project.

In my main-area.component.ts:

...
import * as pdfjsLib from 'pdfjs-dist/build/pdf';

...

ngOnInit() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = '../assets/pdf.worker.min.js';
    ....
}

Upon page load, browser's network tab indicates successful detection of the local file. However, the console displays: Warning: Setting up fake worker.
Can anyone provide guidance on setting up the worker correctly? Thank you!

Answer №1

The issue of configuring a customized path for a PDF worker was also addressed in a related discussion on the project's Github page:

https://github.com/VadimDez/ng2-pdf-viewer/issues/504

You can locate the worker file, pdf.worker.js (or its minified version, pdf.worker.min.js), inside the project's folder named node_modules, specifically at node_modules/pdfjs-dist/build/. The pdfjs-dist is a required package for ng2-pdf-viewer and will be automatically installed along with the library.

An effective solution would involve:

  1. Incorporating pdf.worker.min.js as an asset for Angular by adding it to the assets section within the angular.json file:

    "architect": {
       "build": {
         "options": {
           "assets": [
             "src/assets",
             {
                 "glob": "pdf.worker.min.js",
                 "input": "node_modules/pdfjs-dist/build/",
                 "output": "/assets/pdfjs/"
             }
         ],
         ...
    
  2. Referencing the readme (https://github.com/VadimDez/ng2-pdf-viewer#set-custom-path-to-the-worker), utilize the following code snippet within your pdf-components constructor:

    public constructor() {
      (window as any).pdfWorkerSrc = '/assets/pdfjs/pdf.worker.min.js';
    }
    

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

Styling the pseudo element ::part() on an ion-modal can be customized based on certain conditions

Looking for a solution regarding an ion-modal with specific CSS settings? I previously had the following CSS: ion-modal::part(content) { width: 300px; height: 480px; } Now, I need to adjust the height based on conditions: if A, the height should be lo ...

The most effective method for transferring a JavaScript object between a TypeScript frontend and a Node.js backend

I need some advice on how to effectively share a JavaScript object between my Angular2 with Typescript frontend and NodeJS backend in an application I'm working on. Currently, I am using a .d.ts file for the frontend and adding a module.exports in the ...

Encountering issues while attempting to transmit several files to backend in React/NestJS resulting in a BAD REQUEST error

My goal is to allow users to upload both their CV and image at the same time as a feature. However, every time I attempt to send both files simultaneously to the backend, I encounter a Bad Request error 400. I have made various attempts to troubleshoot th ...

What is the reason behind TypeScript prohibiting the assignment of a className property to a context provider?

Embarking on my first journey with TypeScript, I am in the process of reconfiguring a React application (originally built with create-react-app) to use TS. Specifically, I am working with function components and have introduced a global context named Order ...

Adding a custom source to the script tag in Angular 7

I am currently using angular cli to develop my web application. The app is being built in the dist folder as of now. This is the index.html file: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Adm ...

Why do rows in the React-bootstrap grid layout overlap when the screen is resized?

I am working on a simple layout structure with 2 rows: Row 1 consists of 2 columns Row 2 consists of 1 column The goal is to have both rows expand in width and avoid vertical scrolling of the page. However, when resizing the screen, I want the columns of ...

Unable to retrieve rxjs resource

After upgrading to rxjs 5.4.3, I encountered an error in the browser. Despite having "rxjs": "5.4.3" installed in my package.json, I cannot seem to resolve this error message. Here's the content of my ts file: import { Injectable ...

Inconsistency in product returns following promise mapping - Utilizing Ionic, Angular, and Typescript

When I retrieve items from a database for a feed, it is crucial that they remain in the same order as retrieved. However, despite mapping the array from the query, the displayed feed objects end up out of sequence. Here's the snippet of code: let ...

Is KeyValueDiffers within DoCheck limited to working with just a single object per component?

Initially, my ngDoCheck method worked perfectly with just this line: var productChanges = this.differ.diff(this.myProduct); Then I decided to add another object from my component and included the following line: var companyChanges = this.differ.diff(thi ...

The Angular CDK Dialog fails to display properly when set to a static, fixed, or absolute layout

When utilizing Angular CDK 14.2.1 with the Dialog module from '@angular/cdk/dialog', I am experiencing an issue where the dialog does not display as a native modal on top of the UI. Instead, it appears within the HTML flow, rendering downstream o ...

Using Typescript: Undefined arrays could cause issues in the array map function

Encountering a Typescript error stating that '<array name>' is possibly undefined while attempting to map over an array in Typescript. Below is an example code snippet triggering this issue: type obj = { list?: string[] }; function dem ...

Discovering the root cause of performance issues in a v14 Angular application

I am currently working on a web application built with Angular 14. During my testing with Lighthouse, I have discovered that the performance of the application is satisfactory on desktop but falls short for mobile users. The application consists of three ...

Error TS2309: TypeScript encountered an error in Types/node/index.d.ts

I recently upgraded my .Net Core Angular 2 project using SystemJs from Typings to @Types. The entire project has been rebuilt with the latest VS tooling for .Net Core 1.0.1, TypeScript 2.0.10, and Node.js 7.0.0 as of 12/21/2016. Everything was working fi ...

Efficient Loading and Smooth Scrolling with Angular2 (version 7)

I'm struggling to display a component upon the initial page load using lazy loading, where the content is only loaded when it's in view. For instance: - With 10 components on the page, I aim to show/scroll to component number 7 when the page lo ...

Strategies for evaluating a Promise-returning imported function in Jest

I am currently facing an issue with a simple function that I need to write a test for in order to meet the coverage threshold. import { lambdaPromise } from '@helpers'; export const main = async event => lambdaPromise(event, findUsers); The ...

What causes the error message "Expected ':' when utilizing null conditional in TypeScript?"

UPDATE: After receiving CodeCaster's comment, I realized the issue was due to me using TypeScript version 3.5 instead of 3.7+. It was surprising because these checks seemed to be working fine with other Angular elements, such as <div *ngIf="pa ...

Retrieve the time zone setting from either my browser or server, and then incorporate it into angular2-highcharts

My current timezone setup is done manually using the timezoneOffset function from the Highcharts API. I am currently in GMT+2 so I set it to -2 * 60. However, I encountered an issue where my setup would not work properly when the hour changes in October. T ...

Angular Error TS2339: The property 'car' is missing from type 'Array of Vehicles'

Encountering Angular Error TS2339: Property 'vehicle' is not found on type 'Vehicle[]'. The error is occurring on data.vehicle.results. Any thoughts on what could be causing this issue? Is the problem related to the Vehicle model? I hav ...

Developing a customized code editor equipped with unique regulations in Angular 13 is an art I have mastered

Hello, I go by the name of Edu and I am currently developing a web IDE specifically for RISCV Assembly. As someone who has not previously worked with a code editor in angular, I find myself in need of creating some syntax rules. Are there any recommended ...

Inheritance of Type Member in TypeScript

My data structure looks like this: export abstract class Person { ... } export class FPerson extends Person { a: A; b: B; } export class JPerson extends Person { c: C; } export class User { person: Person; } When dealing with the s ...