Angular.js is a great tool for showing PDF files on a

I am facing a challenge while trying to incorporate a PDF file into my Angular.js website. The PDF is stored as a blob in a MySQL database and I want to display it as one of the partial views that appear on the main page when a link is clicked. Unfortunately, I haven't been able to find clear guidance on how to achieve this. Below is the code snippet from my controller and I also have a PHP script that retrieves the file from the database. Any assistance on this matter would be highly appreciated.


var about = angular.module('about', []);
app.controller('aboutController', function($scope, $http) {
    $http.post('PHP/aboutSearch.php', {responseType: 'arraybuffer'})
        .success(function(response){
            var file= new Blob([response], {type: 'application/pdf'});
            var fileURL = URL.createObjectURL(file);
            $scope.content = $SCE.trustedAsResourceURL(fileURL);
        });
});


<?php
    $query = mysqli_query($con, "SELECT doc FROM tbl_docs WHERE id = 1");
    $row = mysqli_fetch_array($query);
    $content = $row['doc'];
    header('content-type: application/pdf');
?>

Answer №1

For a potential solution, consider utilizing the angularjs-pdf directive which leverages mozillas pdf.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

Disabling Angular from executing on hidden DOM elements

Imagine a scenario where the HTML structure looks like this: <myHandler> <element_1 ng-controller="..." ng-init=""> content </element_1> <element_2 ng-controller="..." ng-init=""> content </elemen ...

What could be causing the javascript slidetoggle function to keep closing?

I have a link on a page that toggles the search form on and off. Let's say you search for Spring term classes, then you want to search for a new term and click "Start a new Search." The link works great and toggles just fine...BUT the toggle automatic ...

Showing information from a table for editing purposes with the use of HTML input tags

As I navigate my way through the complexities of HTML and PHP coding, I’m faced with a challenge in displaying database content on an editable table within my web page. Clicking the edit button should lead to a separate page where data can be modified. ...

Tips for passing registration form data, uploading images, and implementing validation via Ajax in CodeIgniter

As I work on creating a comprehensive registration form with all necessary data and input tags, I encountered an issue while attempting to pass the image upload value to the next page through AJAX. I need assistance in resolving this problem specifically r ...

Adjusting ES2015 Map to accommodate the expected functionality

Exploring the capabilities of ES2015 Maps has been quite exciting, as I'm starting to see its potential. However, I've encountered a use case that has me stumped on whether Maps can handle it. Let's take a look at my class: class A { ...

Webpack fails to handle CSS background images

I'm having trouble with my Webpack configuration as it's not processing CSS images set in the background property: background: url('./hero.jpg') no-repeat right; This is resulting in an error message that reads: ERROR in ./src/app/comp ...

It appears that the NodeJs Express 4 async function in the model is returning before completion

I'm currently working on organizing my project by splitting the logic into different folders such as routes, views, models, and controllers. Within a model named data (models/datamodel.js), I have implemented two methods to retrieve data for populati ...

What is the best way to add or delete data when specific radio buttons are chosen?

Hey there, I'm facing an issue where the data is being appended regardless of which radio button is selected. Can someone help me with a solution on how to properly add and remove data based on the selected radio button? $( document ).ready(functio ...

The website is failing to extend and reveal content that is being concealed by jQuery

I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am ut ...

Route parameter in JavaScript: only accept numerical values

Is it possible to restrict parameter types to only accept digits? If a letter or other character is inputted, I want to fallback to a default scenario. Below are the two attempts I've made. app.get('/multi/:num?', function (request, respons ...

Managing JavaScript expiration time in API responses

Seeking help with a JavaScript API I'm new to. The response I received contains a timestamp, which seems like it's in milliseconds. I want to format this time for a countdown but I'm not sure what these milliseconds are referring to. I know ...

cross-domain policy file

Currently, I am attempting to make a web service call from JavaScript using AJAX: $.ajax({ type: "GET", url: "http://[REMOTE-SERVER-IP]:8080/api/service", contentType: "application/jsonp", crossDomain: true, success: successFunc, ...

most effective method for establishing a relationship between a variable and its corresponding identification number

When retrieving results from a database with a simple PHP while loop, one of the data pieces includes a number that links to another table where the corresponding value is stored. While there are various ways to link this information and display the relate ...

How to incorporate template literals when sending JSON responses in Node.js?

Utilizing express and aiming to return some JSON, I am considering using a template literal. Here is my current approach: resp.status(201).json({ message: "Customer added to database", url: "http://localhost:5000/Customer/" + doc._id ...

Ways to prevent my website from being accessed through the Uc Browser

Is there a way to prevent my website from functioning on UC Browser using HTML or JavaScript? ...

Invoke the forEach method within a lambda function and assign the output to a variable

In order to achieve my goal, I am looking for a way to take an array as input and save the result for future use. Unfortunately, I do not have permission to create additional functions. As a result, the code must accurately reflect what result should be. l ...

Avoid triggering react-query to fetch data on page load, but instead set up a manual refetching mechanism

Currently, I'm utilizing react-query v3.13 for retrieving information from an API. Instead of fetching data immediately when calling useQuery, my goal is to fetch the API periodically starting from a specific point (such as clicking a start button). ...

Designing a mobile user interface for time intervals

Currently, I am utilizing a datetimepicker for inputting a duration of time within a form. While the UI functions smoothly on a desktop, it struggles in a mobile setting. Despite my efforts, I have yet to discover a suitable alternative that seamlessly ope ...

Transferring items between containers with stylish animations in AngularJS

Two of my divs have different contents, with one initially empty and the other filled with items. By clicking on an item in the first list, I want to transfer it over to the second list through a visual animation that implies movement from right to left. W ...

Developing a dynamic horizontal bar chart in d3 using a multidimensional array or nested JSON dataset

I am in the process of creating a straightforward d3 bar chart () by utilizing this specific nested json file. { "clustername": "cluster1", "children": [ { "neighborhoodname": "Shaw", "children": [ { "totpop2000": "1005", "children": [ ...