The browser sends a request for a file, the server then downloads a pdf, and finally, the

Here is the process I am trying to achieve: 1) A browser sends an ajax request to the server, requesting a pdf file. 2) The server downloads the pdf file and returns it for display. 3) The browser then displays the downloaded pdf in an existing iframe.

Below you will find the code I am using. It seems to be encountering an issue at the point of displaying the pdf in the iframe, indicating a potential problem with how the pdf is being sent.

Code in the browser's index.html file:

var uri = '/viewer/loaddrawing/';
$.getJSON(uri, {key:value}, function(data, jqXHR){
    document.getElementById("iframetitle").src = uri;               
});

Code in the Django server's views.py file:

import requests
def loaddrawing(request):
    value = request.GET.get('key')
    # The key is used to generate a unique URL, but for testing purposes, we'll use the URL provided below
    url = "http://cbmeturkey.com/media/109/test.pdf"
     response = urllib2.urlopen(url)
     some_data = response.read()
    return HttpResponse(some_data, mimetype='application/pdf')

EDIT:

I am facing one final issue: I would prefer not to use the following code in my index.html file because I want to download the pdf once and reuse it. Currently, the pdf is redownloaded each time the iframe is shown, due to the code below.

var uri = '/viewer/loaddrawing/';
document.getElementById('iframetitle').src = uri + '?key=' + value;

SOLVED: The previous issue was resolved with the guidance of Augusto. Below is the updated index.html code that loads the pdf only once. Please note that I am now modifying a div element named "divtitle" instead of an iframe:

var uri = '/viewer/loaddrawing/' + '?key=' + value;
var htm = '\<iframe src="' + uri +'" onload="downloadComplete()">\</iframe>';
document.getElementById('divtitle').innerHTML = htm;

Answer №1

Perhaps what you were looking for is:

let link = '/files/loadpdf/';
document.getElementById('pdfFrame').src = link + '?id=' + identifier;

In this case, JSON is not used, so the PDF will be loaded directly into the iframe. Keep in mind that users need a PDF viewer plugin in order to display the file, otherwise the browser will prompt for a download.

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 update the div's color according to a specific value

Below are the scripts and styles that were implemented: <script src="angular.min.js"></script> <style> .greater { color:#D7E3BF; background-color:#D7E3BF; } .less { color:#E5B9B5; background-co ...

Transferring multiple data between PHP and JavaScript

Here is the code I am using for the on change event: <script> $('.BIR').change(function() { var id = $(this).val(); //get the current value's option $.ajax({ type:'POST', dataType: "json", ...

Solving issues with Dreamhost, Passenger, and Django

I had a website that was successfully running on Dreamhost with Passenger and Django for many years. However, recently, without any notification, it seems that Dreamhost updated Passenger, causing my website to go down last Thursday. This is the installed ...

Transferring a header across a series of interconnected services

I have a script that calls two services, combines their results, and displays them to the user. The services are: Service 1 (hello) and Service 2 (world), resulting in "Hello world". I want to include an ID in the headers to track the route of the calls. ...

Is there a reason why async functions do not function properly within a controller's get() handler?

Utilizing Node and Express along with the mssql npm package, I establish a connection to an SQL Server database in my app.js file by setting up a global variable that creates a connectionPool (I've excluded some boilerplate code for brevity): const m ...

Incorporate an image into a Component template by utilizing a URL that is provided as a property of the Component in Vue and Vite

One of the challenges I faced was setting the 'src' attribute of an image in a Component's template from a property value. Initially, I attempted to do this as follows: Gallery View, where the Component is called multiple times <script s ...

The content inside a Textbox cannot be clicked on. I am seeking help with implementing JavaScript to enable it to be

As a newcomer in the world of programming, I am sharing a snippet of my JavaScript and HTML code with you. I am facing an issue where I want to enable users to start typing in a text box upon clicking on the text "User Name", without deleting any existing ...

Checking the image loading functionality with Cypress

I am interested in testing Cypress to verify that an image is successfully loaded onto a page. Here is a snippet of my source code: import React from "react"; export default class Product extends React.Component { render() { return ( <div ...

The response from the XHR object is coming back as "Object Object

Recently, I've been faced with the challenge of working with an API that provides articles. Within the array returned by the API, there are attributes like author, title, and description. However, despite my efforts, each time I attempt to retrieve th ...

Tips for sending an input file to an input file multiple times

As a developer, I am facing a challenge with a file input on my webpage. The client can add an image using this input, which then creates an img element through the DOM. However, I have only one file input and need to send multiple images to a file.php i ...

unable to transfer PHP variable into a JavaScript function

I am having trouble invoking a JavaScript function when trying to pass a PHP array element as an argument. Despite my efforts, I have not yet found the solution. Here is the snippet of PHP code where the issue arises: var_dump($theRow[11]); $htmlBuffer = ...

Transform JSON structure (Group data)

Here is the JSON object I am working with: [{ "name" : "cat", "value" : 17, "group" : "animal", }, { "name" : "dog", "value" : 6, "group" : "animal", }, { "name" : "snak", "value" : 2, "group" : "animal", }, { "na ...

Guide to building a React project with an outdated edition of Create React App

Currently, I'm following an older tutorial to learn React, and as a result, I need to set up a project using Create React App version 1.5.2. I successfully installed <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="204352454 ...

Navigating through elements in an array in node.js

Within my array, I store the languages that users prefer. Here is an example: let language = [] var Lang = "it" language.push(Lang) This process is repeated with various languages. The array would eventually contain these values: language ...

Tips for accessing hidden field values in a second jsp page

I have a webpage called page1.jsp where I am including hidden fields. Here is the code snippet: <form action = "page2.jsp" method = "post" id = "hiddenValuesForm"> <input type = "hidden" name = "userData" value="" id = "useDataID"> <input t ...

Import a picture file into Photoshop and position it at a designated location

I need assistance with developing a function that can load an image and position it at specific x, y coordinates in Photoshop. Below is the code I have so far: var docRef = app.activeDocument; function MoveLayerTo(fLayer, fX, fY) { var Position = fLaye ...

The parameters passed in an axios get request are not carried over to a create request

Exploring the capabilities of the YouTube API with ReactJS While working with the YouTube API, I came across the create method in axios. However, I faced an issue where the params were getting overwritten. What am I missing here? I have a file named yout ...

Retrieve the user profile in Django using python-social-auth

In my Django application, I have implemented the functionality for users to log in using their Google or Facebook profiles by integrating python-social-auth with Django. After a user logs in, I am wondering if there is a way to obtain a link to their prof ...

Attempting to interpret HTML in Javascript

I have a text string that contains HTML tags. Initially, I attempted to insert this using innerHTML, but the tags were displayed as plain text. After some troubleshooting, I realized that I needed to properly parse the HTML content. Although jQuery prov ...

having difficulty sending a post request with Angular

Submitting form data via HTTP post will look like this: saveDataFile(mutlidata,id,value): Observable<Response> { var _url = 'http://xxxx.xxx.xxx'; var saveDataURL = _url + '/' + id; var _this = this; ...