Create a PDF file discreetly

Currently, I am working on a classic asp page that generates a PDF and serves it to the browser. My goal is to create a loading page that preloads the PDF in the background before presenting it to the user, along with a visually appealing indication of ongoing progress.

I have explored options like the Yahoo progress bar, but I couldn't find a way to seamlessly integrate serving the PDF afterwards.

If anyone has any suggestions or insights on how this can be achieved, I would greatly appreciate it. I believe someone must have implemented something similar in the past.

Answer №1

After encountering a similar situation, I discovered a solution utilizing iframes that may not be traditional ASP, but seems to be effective. You can find the article that helped me here.

An additional code update has been made:

The container page that your application calls:

<head runat="server">
    <script language="javascript" type="text/javascript">
        function BuildPDF() {
            var iframe = document.createElement("iframe");
            iframe.src = "BuildPDF.asp?" + <any arguments you require>;
            iframe.style.display = "none";
            document.body.appendChild(iframe);
        }

        function UpdateProgress(message) {
            document.getElementById('txtStatus').value = message;
        }

        function SetDisplayFileName(fileName) {
            var viewFrame = document.createElement("iframe");
            viewFrame.id = "viewFrame";
            viewFrame.src = "WhateverTheNameOfYourPDFViewASPPageAndArgs";
            viewFrame.style.width = '100%';
            viewFrame.style.height = document.documentElement.clientHeight - 20;
            document.body.appendChild(viewFrame);
        }

        function ResizeFrame() {
            var viewFrame = document.getElementById("viewFrame");
            viewFrame.style.height = document.documentElement.clientHeight - 20;
        }
    </script>
</head>
<body onload="BuildPDF();" onresize="ResizeFrame();">
    <form id="form1" runat="server">
    <input type="text" id="txtStatus" style="width:80%; font-family: Tahoma, Verdana; font-size: small; font-weight: bold;" readonly="readonly" />
    <br />    
    </form>
</body>

In your BuildPDF.asp file, include a function like the following to update the status message whenever required:

function UpdateProgress(message)
    Response.Write("<script>parent.UpdateProgress('" & message & "');</script>")
    Response.Flush()
end function

The referenced page in the "viewFrame" section should stream ContentType as "application/pdf." Although I implemented this in ASP.Net, there should be no hindrance in adapting it for classic ASP use.

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

Possible problem that may arise when using Express without Jade

I've been experimenting with Express for my latest project, and I came across the suggestion to use the Jade template engine for views like this: /* GET home page. */ router.get('/', function(req, res, next) { res.render('index' ...

I need to update my database by sending requests to my API, as the changes are not being reflected in the current database state. I am eager to see the

Struggling to grasp the concept of making requests to an API that uses express for CRUD operations. In the code snippet below, .get(/bears) displays a form and in app.post('/bears'), I'm using the 'request' module to send a request ...

The inefficiency of invoking Jquery on elements that do not exist for the purpose of caching

What is the impact if JQuery attempts to access elements that do not exist? Will there be any significant CPU overhead other than script loading? Does it matter if this is done for a class or an id? For optimization purposes and to minimize simultaneous c ...

Error: Jest react testing encountered an issue when attempting to read the property 'type' from an undefined value

While conducting tests on my app components created with the material UI library using jest and enzyme, I encountered an error in one of my packages. Here is a screenshot of the error: Click here to view ...

Strange occurrences of radio buttons in AngularJS

When working with radio buttons, I noticed a strange behavior that I wanted to share. My goal was to have Radio Button 1 selected if the array is undefined, and Radio Button 2 selected when the array is defined. In the initial state, the array is indeed ...

When trying to access the DOM from another module in nwjs, it appears to be empty

When working with modules in my nwjs application that utilize document, it appears that they are unable to access the DOM of the main page correctly. Below is a simple test demonstrating this issue. The following files are involved: package.json ... "ma ...

What is the best way to toggle the visibility of a dynamically created HTML element in ASP.NET?

I'm working on a program that displays two different prices depending on whether the user is registered or not. Registered users will see both the normal price and the discounted price, while unregistered users will only see the normal price. I need t ...

Blog entries alternating between a pair of distinct hues

I want to create a design where each post container has a different color from the one next to it. Essentially, I would like the containers to alternate between two distinct colors. The left side shows how it currently appears, while the right side depict ...

Generating a dynamic form by utilizing a JavaScript JSON object

I need assistance with creating an html form based on a JSON object’s properties. How can I target multiple levels to generate different fields and also drill down deeper to access field details? I am open to suggestions for alternative formats as well. ...

Tips for concealing the HTML tag in JSF in order to output solely JSON data

Currently, I am utilizing JSF along with Facelets 1.1.14 to handle an ajax request where I need to send back a JSON response. However, instead of just the JSON data, I am receiving HTML tags as well. Is there a way to only return the JSON data and hide the ...

Utilize the Tab key in Textarea fields to insert a tab character ( ) instead of navigating to the

My current issue involves utilizing an HTML textarea named userInput. Whenever I press the tab key, it simply shifts focus to the next element instead of inserting a tab character or some spaces within the textarea. Is there a way for me to configure the ...

Debugging TypeScript on a Linux environment

Approximately one year ago, there was a discussion regarding this. I am curious to know the current situation in terms of coding and debugging TypeScript on Linux. The Atom TypeScript plugin appears promising, but I have not come across any information ab ...

Exploring the JSON Structure in NodeJS

My current json array is structured in the following way: [{"id": 1, "meeting": "1/3/2015 12:30:00 PM", "name": "John"}, {"id": 1, "meeting": "1/3/2015 13:30:00 PM"}, "name": "John"}, {"id": 2, "meeting": "1/5/2015 7:00:00 AM"}, "name": "Peter"}, {"id": 2 ...

Updating a user's password in Node.js using an AJAX request from a bootstrap form

I've been encountering a POST /user?userid=something 404 error while attempting to enable users to update their password without reloading the page. Can someone point out what I might have done incorrectly? Thank you. Utilizing Bootstrap modal ...

The 'RegExpExecArray | null' type is required to include a method '[Symbol.iterator]()' which returns an iterator to iterate through its values

As someone who is new to TypeScript, I have a good understanding of the basics but recently came across a typecast error that I am struggling to solve. const [full, id]: string | null = /.*media\/[^\/]+\/(.*)/.exec(item.uri) When it comes t ...

Adding an Item to the Cart in React.js

Currently, I am delving into react.js and endeavoring to incorporate a fundamental add to cart feature. My aim is to maintain simplicity in order to grasp the entire process. The setup involves two cards - one showcasing the items and another where the sel ...

Maximizing Input Field Utility in React JS

I have a challenge with retrieving values from the input field and passing it to the useEffect. I specifically want the search to be triggered only after pressing the onSearch function. The issue is that I can only capture the value using the onChange func ...

Material UI - sending an icon as a property

I need help with inserting a material-ui icon into my component using props. Can you please advise on what I might be doing wrong? I am struggling with passing the icon down in JSX, and here is the attempt that is not working: This code snippet shows me t ...

Determine the date 7 days before today using JavaScript

I've been trying to calculate the date that is 12 days before today's date, but I'm running into an issue where it's not returning the correct result. For instance, if today is November 11, 2013 (mm/dd/yyyy), the code returns October 30 ...

Tips for sending information to an Express API through AJAX

While working on a website using Express and EJS, I encountered an issue with calling an API via AJAX. The problem arises when passing two values to the AJAX data upon button click, resulting in errors. Despite trying various solutions, I'm still stru ...