Issue with ngx-extended-pdf-viewer when using URL

I'm struggling to display my PDF file on a viewer using a URL in TypeScript. I am utilizing ngx-extended-pdf-viewer.

Below is a snippet of my code with the URL replaced:

<ngx-extended-pdf-viewer 
*ngIf="!isFirefox"  
  [src]="'http://www.childrensbooksforever.com/Childrenpics/A%20COOL%20KID%20LIKE%20ME.pdf'"
  useBrowserLocale="true" 
  backgroundColor="#000000" 
  height="100%">            
</ngx-extended-pdf-viewer>

An error message is displayed in the viewer:

PDF.js v2.1.266 (build: 81f5835c)
Message: Failed to fetch

within the PDF viewer.

While I am able to view the PDF by placing it in the assets folder, the URL doesn't seem to work. Instead, an empty frame is shown. What could I be doing wrong?

angulartypescriptpdf.jsngx-extended-pdf-viewer

Answer №1

My best guess is that the issue you're encountering is related to CORS. Security measures in modern browsers prevent certain types of attacks by blocking requests to or from different URLs.

Since you mentioned that accessing local files is working, using a proxy might be a solution. You could try configuring the proxy-conf.json file in the Angular CLI, for example.

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

What are some best practices for integrating ES2020 into an Angular project?

Below is the content of my tsconfig.json file: { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap&q ...

angulartypescriptecmascript-nextecmascript-2020

Revamp label titles in Ionic/Angular by incorporating a hyperlink for updating the image

Seeking guidance on changing labels in an Ionic/Angular app from 0, 1, 2 to Profile, Group, and Friend. Despite utilizing resources like Google and YouTube, I've struggled for days to make this adjustment without success. Any assistance would be great ...

angularionic-frameworkionic4

Ways to obtain a reference to a different component

In my code, I have a component called componentA that displays the text "hello world". What I want to achieve is opening this component within another component named componentB by calling a function. Let's take a look at the code below: ComponentB. ...

angular

Deducing the return type of asynchronously generated functions

My expectation is to automatically determine the return type of async functions when they are yielded as values from a generator. In the following example, the inference of the type of the yielded async functions appears to work correctly (detected as () ...

typescript

How to Maintain Default Styling in Next.js with Material UI When Disabling Accordion Feature

I am currently working on a project using Next.js and incorporating Material UI for the user interface elements. One particular challenge I am facing is with an Accordion component that needs to be disabled under specific conditions, but still appear witho ...

reactjstypescriptnext.jsmaterial-ui

Only the final defined document is instantiated by the Swagger-ui-express module

Currently, I am working on a Typescripted nodejs server and facing an issue with defining different swagger paths for separated controllers. The problem is that the swagger-ui-express module only displays the last defined document in the specific route. I ...

node.jstypescriptsingletonswaggerswagger-ui

Issue with MongoDB $push within an Array of Arrays: The shorthand property 'elements' does not have a value available in scope

I am encountering an issue while trying to insert data into Elements in MongoDB using TypeScript. Any suggestions on how to resolve this problem? Attempt 1 Error: I am receiving an error message stating "No value exists in scope for the shorthand property ...

databasemongodbtypescriptmongodb-querypush

ng-select issue: list not refreshing

I am encountering an issue with the method below that updates the modules array. Even though the console displays the result correctly, the ng-select does not update the list accordingly. I attempted to use this.modules=[...elements], but it did not work ...

angulartypescriptangular-ngselect

Encountering Error with NodeJS Typescript: Issue with loading ES Module when running sls offline command

I have come up with a unique solution using NodeJS, Typescript, and Serverless framework to build AWS Lambdas. To debug it locally in VS Code, I use the serverless-offline library/plugin. You can find my project on GitHub here However, when I run the comm ...

javascriptnode.jstypescriptecmascript-6serverless-framework

In Angular/Typescript, dynamically add a class to a `td` element when it is clicked. Toggle the class on and off

My problem arises when trying to individually control the arrow icons for each column in my COVID-19 data table. By using Angular methods, I aim to show ascending and descending arrows upon sorting but run into the challenge of changing arrows across all c ...

javascripthtmlangularreactjstypescript

Contrasting router and router-deprecated in angular2

After upgrading from version "beta.17" to "2.0.0-rc.1", I am a bit confused about when to use router and when to use router-deprecated. Can someone help clarify this for me? ...

angularangular-routing

How to minimize xAxes labels in Chart.js

As a newcomer to Chart.js, I am encountering some challenges. My goal is to create a bar chart that displays hourly information. However, when attempting to show data for a week, a month, or an extended period, I face issues with reducing the labels on the ...

angulartypescriptchart.js

How to ensure Service is loaded before App Component in Angular 6?

My Data service is responsible for fetching the JSON Object value, however all components load before the data service finishes loading. This results in undefined values when I call the service method from components. ...

angulartypescript

The journey of communication: uncovering the essence of @input between parent and

I'm diving into Angular and currently working on the @Input phase. Within my main app, there's a child component. Inside app.component.ts, I've declared a test variable that I wish to pass from app.component.ts to child.component.ts. // ap ...

angulartypescriptinputangular7angular8

Library types for TypeScript declaration merging

Is there a way to "extend" interfaces through declaration merging that were originally declared in a TypeScript library file? Specifically, I am trying to extend the HTMLCanvasElement interface from the built-in TypeScript library lib.dom. While I underst ...

typescripttype-declaration

Leverage the power of Angular CLI within your current project

I am currently working on a project and I have decided to utilize the angular cli generator. After installing it, I created the following .angular-cli file: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": " ...

javascriptangularangular-cli

The ASP .Net Core 3.1 Angular template is malfunctioning

https://i.sstatic.net/T3hFx.pngAfter creating a new Web Project using the .Net Core with Angular template in Visual Studio 2019, I encountered an error when trying to build the solution. The error message stated: An unhandled exception occurred while proce ...

angularasp.net-core

The 'items' property cannot be linked to 'virtual-scroller' as it is not a recognized attribute

I'm currently facing an issue with integrating virtual scroll into my Ionic 4 + Angular project. Previously, I relied on Ionic's implementation of virtual scroll (ion-virtual-scroll) which worked well initially. However, I encountered a major dr ...

angulartypescriptionic-frameworkvirtualscroll

Angular 4 incorporates ES2017 features such as string.prototype.padStart to enhance functionality

I am currently working with Angular 4 and developing a string pipe to add zeros for padding. However, both Angular and VS Code are displaying errors stating that the prototype "padStart" does not exist. What steps can I take to enable this support in m ...

angulartypescriptecmascript-2017

When the route changes, routerCanReuse and routerOnReuse are not invoked

I am currently exploring the functionalities of Angular2's Router, specifically focusing on OnReuse and CanReuse. I have followed the documentation provided here, but I seem to be encountering difficulties in getting the methods to trigger when the ro ...

typescriptangularangular2-routing