The AngularJS code that displays a PDF file in Google Chrome is currently not functioning, although it is working properly in Firefox

I'm encountering an issue with displaying a PDF file in Google Chrome, as the code works fine in Firefox.

HTML View

<div>
    <object ng-bind="pdfcontent" data="{{pdfcontent}}" type="application/pdf" width="100%" height="800px">
    </object>
</div>

AngularJS Code

$http.get('/myurl/', {responseType: 'arraybuffer'})
    .success(function (data) {
    var file = new Blob([data], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);
    $scope.pdfcontent = $sce.trustAsResourceUrl(fileURL);
});

Two errors are being triggered:

firebug-lite.js:18877 Uncaught InvalidStateError: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'arraybuffer').(anonymous function) @ firebug-lite.js:18877

jquery.js:2812 GET 404 (Not Found)

If you have any insights on what might be wrong with my code and how to resolve it, I would greatly appreciate your help. Thank you.

javascriptangularjsgoogle-chromefirefoxpdf

Answer №1

It seems that the issue lies in how the data attribute is bound once the object is rendered, causing the pdfcontent to not be properly binded when the request response occurs.

There are two potential solutions for this problem:

  1. You can utilize a directive for this specific purpose, as detailed in this answer
  2. Alternatively, you may opt to use an if statement as shown in the code snippet below

    $scope.downloaded = false
    $http.get('/myurl/', {responseType: 'arraybuffer'}).success(function (data) {
            $scope.downloaded = true
            var file = new Blob([data], {type: 'application/pdf'});
            var fileURL = URL.createObjectURL(file);
            $scope.pdfcontent = $sce.trustAsResourceUrl(fileURL);
        });
    <div ng-if="downloaded">
        <object ng-bind="pdfcontent" data="{{pdfcontent}}" type="application/pdf" width="100%" height="800px>
        </object>
   </div>

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

How can I disable a select element in Laravel 5?

Hey everyone! Currently using Laravel 5 and trying to style the "select" class as "selectpicker". I'm facing an issue where I want to disable or hide the selected option when clicked, as I'm creating a div with the option's content right b ...

javascriptjquerycsslaravelbootstrap-4

Discover the ins and outs of utilizing nested form associations within Phoenix

Currently diving into Phoenix 1.3 and eager to grasp ecto associations while leveraging Angularjs for the frontend. Two schemas at play: user.ex and profile.ex Both created using mix phx.gen.json user.ex schema "users" do field(:password_hash, :string) ...

angularjselixirphoenix-frameworkecto

The enigma of the mysterious karma provider error

As a newcomer to unit testing in JavaScript, AngularJS, and Karma, I have successfully written passing tests for controllers. However, when trying to test services, I encountered an error: Unknown provider <- nProvider <- User. The User service is th ...

angularjstypescriptkarma-runner

The application remains unaffected by the change in location

I'm currently working on an application that utilizes dayjs as the date-time library. I have set the default locale to "en" at the app level, and when I change the language in the dropdown menu, I update the locale accordingly. However, for some reaso ...

javascriptreactjsdayjs

The anticipated reply was supposed to consist of an array, however it ended up being an

I'm brand new to Angular and I've been searching for a solution to my issue with no luck. My app is supposed to retrieve data from a MongoDB database and display it to the user. However, I keep getting this error message: Error: [$resource:bad ...

javascriptangularjsnode.jsmongodbsingle-page-application

Ways to transform a string into a mongodb ObjectId

I have successfully inserted the following in MongoDB as a string. However, I would like it to be inserted as an objectId. parentId": "5ced2388dbbbe124d8671067" This is the parentId stored in string format. Is there a way to convert it to objectId forma ...

javascriptmongodb

Creating an IntersectionObserver with the Composition API: A Step-by-Step Guide

I am currently in the process of incorporating an IntersectionOberver that will update the url once the viewport transitions into a new section. I came across This thread and now endeavoring to apply it in vue 3 compositon api. The script is being integra ...

javascriptvue.jsvuejs3jetbrains-idevue-composition-api

The states of both components are only being updated once the second event call is triggered within React

I am currently working with 2 functions in my project. One function is triggered when I type something into the search input, while the other one is called upon selecting a category. The initial values for the search and selectedCategories variables are an ...

javascriptreactjsreact-hooksreact-component

Discovering the position of an element within a tree-like structure by considering the total number of elements

I'm searching for a solution to create a dynamic Tree-like structure from a Flat Array. Sample Input -> [1, 2, 3, 4, 5, 6, 7] Currently, I can determine the number of columns and rows needed. However, I'm struggling to find a pattern for the ...

javascriptcssalgorithmvue.jstree

Error in Rails app when incorporating Stripe API with Javascript involved

Incorporating Stripe into my rails app using the Koudoku gem has been challenging. When attempting to load the page for capturing user credit card information, I encounter an error in my JS console: Uncaught ReferenceError: $ is not defined (anonymous fun ...

javascriptjqueryruby-on-railscoffeescriptstripe-payments

Switch the functionality of a Google Chrome extension back and forth numerous times

My Google Chrome extension works by attaching event listeners to all elements on a page and inserting CSS (lol.js and style.css) when clicked. However, I am facing an issue where I cannot remove the JS and CSS upon clicking the icon again. Right now, I am ...

javascriptjquerygoogle-chrome-extension

Using Jest to mock a single function within a class

I'm a beginner when it comes to node and javascript, and I am currently attempting to create a unit test using jest where I only need to mock one function of a class (and object). Below is the code template I am using: // myModule.js class MyModule ...

javascriptnode.jsunit-testingmockingjestjs

Creating users or custom roles in MongoDB on a NodeJS server is not currently possible

I have been attempting to directly create users on my database through our Express server, utilizing MongoDB 3.4 for the backend. Below is the current code snippet from the server: const express = require('express'); const bodyParser = require(& ...

javascriptmongodbexpresscreateuser

The Material multi select is unable to show the chosen name values at this time

I'm utilizing the Material Multiple select feature to pick employees, and you can see it in action on this demo: sandbox demo However, instead of displaying the ID values of the selected employees, I want to display their names. To achieve this, I t ...

javascriptreactjsangularreact-hooksmaterial-ui

AngularJS page content dynamically updates based on the specified pages in the routing configuration

I am in the process of developing a straightforward website using AngularJS. Here is an example of my controller: NGLesson.controller('Pages_Contents', ['$scope', function ($scope) { $scope.homePage = { ...

angularjs

Break down a data structure into a type that includes multiple options

Is it possible for Typescript to support type or interface "destructuring" (if that's the right term)? I am attempting to achieve something similar to the code snippet below: type SomeRandomType = { propertyOne: string; propertyTwo: number; ...

javascripttypescript

discovering a new type of mutation through the use of Vuex

Vue Component computed: { score () { this.$store.commit('fetchCoordinates'); console.log(this.$store.getters.cordinate); } } store.js export default { state: { lat:'ok', }, getters:{ cordinate(state){ r ...

javascriptvue.jsvuejs2vue-componentvuex

What is the best way to retrieve the file name from the current document's URL using JavaScript?

I need help with a Javascript function that can extract the current file name without any parameters. $(location).attr('href').match(/([a-zA-Z\-\_0-9]+\.\w+)$/); var current_path = RegExp.$1; if ((current_path == 'index. ...

javascriptjqueryregex

Is my interpretation of this chunk of code accurate?

I have been working with a cordova sqlite plugin and while I haven't encountered any issues, there are certain aspects of the code that I would like to clarify for my understanding. My main goal is to have a better comprehension of the code structure ...

javascript

Implementing functionality: Removing a row and applying a CSS class upon button click

Check out the fiddle below: https://jsfiddle.net/shaswatatripathy/enq0kfqL/2/ I need help with creating a remove function and adding a CSS class to a clicked row. 1. When I click on "remove", the clicked row should be deleted. When I click on a row, ...

javascriptjqueryhtmlcss