"In my AngularJS application, I am facing an issue with the PDF overview links not

Utilizing PDF.js, my web application loads PDFs directly in the browser by fetching them from a REST API.

This single-page AngularJS web app allows users to navigate through various sections and access different PDF files. However, there seems to be an issue with accessing relative links within the Outline of the first PDF once it's opened.

Interestingly, when I directly access the PDF through the REST API URL like api.example.com/rest/my-pdf.pdf using Firefox, everything works fine including the relative links within the Outline.

I suspect this problem might be due to my web app being on a different origin than the server hosting the PDFs via the REST API.

Each OutlineItem contains an action dictionary with related relative links. The dictionary specifies an ActionType (S) as Launch, along with a FileStream (F) value as shown below.

https://i.sstatic.net/5idLf.png

To view the PDFs, I'm utilizing the viewer.html file provided by PDF.js through an iframe setup:

<iframe src="/path/to/pdfjs/viewer.html?file=http://api.example.com/rest/my-pdf.pdf">

Any suggestions on how I can resolve the issue with relative links not working properly would be greatly appreciated.

P.S. For confidentiality, I've obscured only the actual filenames in red, while keeping the path intact for reference purposes.

javascriptangularjsrestpdfpdf.js

Answer №1

give this technique a shot

onclick=" window.open('../../resources/python/python.pdf'); return true;"

Fingers crossed that it does the trick for you.

Answer №2

The issue arose when the PDF outline contained links with a "Launch ActionType".
PDF.js is unable to handle these types as it cannot launch external programs, given that it operates within a browser environment.

As a workaround, PDF.js treats the "Launch" type as a "GoToR ActionType" (Go To Remote).
This approach works effectively when the URL hosting the PDF matches the origin from which PDF.js is loaded.

In scenarios where this alignment is not present, such as in my application (where PDF.js runs within an iframe inside an Angular app), PDF.js struggles to resolve the URLs, resulting in blank links.

  1. Section 8.5 of the PDF Reference offers insight into actions within PDFs.
  2. The PDF.js source file outlines the processing of different ActionTypes.

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

Ways to change attributes of deeply embedded objects?

Imagine having a complex object with nested properties like this: const obj = { Visualization: { Lower: [{ name: "Part", selectedValue: "60-000" }], Upper: [{ name: "Part", selectedValue: "60-000" }], ...

javascriptarraysobject

Rails javascript not triggering even after the page is loaded with `page:load`

My experience with using Stripe in Rails has been smooth, except for some issues with Ajax calls not working properly after page refresh. I suspect this might be related to Turbolinks as the 'ready page:load' event doesn't behave as expected ...

javascriptjqueryruby-on-railsajaxturbolinks

Selecting a default option in Angular when the value is present and repeated

My goal is to pass a parameter in the URL to a page where a select element is populated dynamically. The parameter that needs to be passed is customerProfile.id. I want to find this id in the select options and have it selected by default. How can I achiev ...

javascriptangularjsangular-ngmodelng-options

How can I store items in a JavaScript array so that they are accessible on a different page?

I'm running into an issue with my PHP website. Each item has a "request a quote" button that, when clicked, is supposed to add the item name to an array using JavaScript. This array should then be added to the "message" field on the contact.php form. ...

phpjavascriptarrays

What is preventing me from using bracket notation with a variable to assign a property to an object?

I am a complete beginner when it comes to Vuex, and I am currently facing an issue with assigning a value to a Vuex state, specifically state.map.status.isReady. To make my code more reusable, I decided to create a function called changeMapStatus(state, k ...

javascriptvue.jsvuejs2vuex

Please refresh the page after acknowledging the error

I am facing an issue with my PHP page that triggers a javascript alert upon encountering an error. if (strpos($this->color,':') !== false) { echo '<script type="text/javascript">alert("Please use the RBG format of 255:2 ...

javascriptphp

JavaScript Accordion malfunctioning

I'm attempting to implement an accordion feature for each row of an HTML table using the script provided below HTML <table class="list" id="table" data-bind="visible: !loading()"> @*<table class="productTable" data-bind="sortTable:true" ...

javascriptjqueryhtmlcss

Guide on transferring Vue form input data to Adonis controller through an http request

I have a Vue component that prompts the user to enter their email address. I've utilized v-model for data binding. <template> <input v-model="email" type="text" placeholder="Email" /> <button class="tiny">Send</button> ...

javascriptvue.jsaxiosvuexadonis.js

Incrementing the index in Javascript when an event occurs

I am currently working on a project that involves incrementing an index of an array based on certain events, such as a left mouse click over a designated area. The code snippet provided below initializes all values to zero and briefly changes the relevan ...

javascriptarraysindexingincrementquartz-composer

When filtering an array in JavaScript, ensure to display a notification if no items match the criteria

In React/Next, I have an array that is being filtered and sorted before mapping through it. If nothing is found after the filters run, I want to display a simple message in JSX format. The message should be contained within a span element. Here is the str ...

javascriptreactjsnext.js

Integrate properties into a React component using an object as the representation

Can props be added to a component represented by an object? I am looking to add these props just once, within the map function, if possible. children: [ { id: '1', isActive: false, label: 'Home', component: & ...

javascriptreactjs

Tips for preventing click events from interfering with execution in React

On my screen, there is a specific image I am looking to prevent all actions while a process is running. When I trigger the Execute button, it initiates an API call that can take 4-5 minutes to complete. During this time, I need to restrict user interacti ...

javascriptreactjsmaterial-ui

Cannot load JSON file from Visual Studio 2013

I am currently working on building a drag-able network diagram using d3.js, and I've come across an unusual issue. Whenever I try to run the page from Visual Studios 2013, I encounter the following error: "Unhandled exception at line 25, column 13 in ...

javascriptasp.netjsond3.js

What is the best way to determine the amount of distinct elements in an array of objects based on a specific object property?

I am working with an array called orders. orders = [ {table_id: 3, food_id: 5}, {table_id: 4, food_id: 2}, {table_id: 1, food_id: 6}, {table_id: 3, food_id: 4}, {table_id: 4, food_id: 6}, ]; I am looking to create a function that can calculate ...

javascripttypescriptecmascript-6

React-Select for Creating a Dynamic Multi-Category Dropdown Menu

I am looking to incorporate react-select into my project for a multi-category dropdown list. Specifically, I need the ability to select only one option at most from each category. To better illustrate this requirement, consider the following example wher ...

javascriptreactjsmaterial-uireact-select

Methods for retrieving and persisting the data from a particular row within a table using JavaScript or jQuery

Is there a way to store the selected row values of a table in an array of arrays using JavaScript / jQuery? Check out this JSFiddle I believe that we should listen for the event when the 'Show selected' button is clicked. For instance, in Java ...

javascriptjquery

Determine who the creator of the clicked div is

I'm sorry if my explanation is a bit difficult to comprehend. Here is the code snippet in question: names.push(newName); var strName = newName; var newName = document.createElement('p') newName.setAttribute('id', newName); documen ...

javascriptjqueryhtmlcssarrays

Using JavaScript to retrieve and compare element values for a total sum

Given two arrays, the goal is to determine if any two numbers in the array add up to 9. The function should return either true or false. For example: array1 [1, 2, 4, 9] has no pair that sums up to 9, so it returns false array2 [1, 2, 4, 5] does have a ...

javascriptarrays

Importing JSON data into JavaScript

For the past few hours, I've been attempting to load a JSON file into JavaScript to feed map coordinates to the Google Maps service. Unfortunately, my script is incomplete and I cannot obtain any results. Here's what I have so far: <script&g ...

javascriptjson

Obtain the text that is shown for an input field

My website is currently utilizing Angular Material, which is causing the text format in my type='time' input field to change. I am looking for a way to verify this text, but none of the methods I have tried give me the actual displayed text. I a ...

javascriptcssangularjsseleniumangular-material