I have an #Html.Action link that currently works for returning the user a pdf document from the controller. I want to be able to use an ajax call to perform the same function but I'm stuck on how or even if this can be done. I have tried several different iterations but I never get the pdf to download from the browser window. Here is what I have so far:
$('#Button1').click(function () {
var poNum = "51970";
$.ajax({
type: "GET",
data: "id= " + poNum,
url: '#Url.Action("PoReport", new { controller = "LogisticsTools"})'
});
});
I can copy the Request URL from the Headers window in Chrome Dev Tools and paste it into a new page and the pdf is downloaded. I can see the pdf code in the Response window also but it just doesn't get downloaded when the button is clicked. What am I missing?
You don't want to ajaxify this. Put the URL in an anchor tag and let the browser do the rest. If the browser doesn't recognise the document type or it is configured to force file downloads, the file will download as you expect (i.e. the user will see the download dialog). If the document is recognised, can be opened in the browser, and the browser is configured to open files, the file will open in the browser.
<a href='#Url.Action("PoReport", new { controller = "LogisticsTools"})'
title="Click to Download/Open">
Download
</a>
You can't download PDF file while using the ajax request to server. So instead of that you should use html actionlink. for example
#Html.ActionLink("Convert Data into PDF", "PDFView", null, new { #class= "btn btn-info" });
Above code will generate a link button and you can access Action Method of controller. Also you can use any technique to return PDF file from controller for example you can return PDF file using FileResult class.
Related
There is a button in UI, it will open file open explorer, once we select file and click open, then DOM directly uploading the file,
Upload Document Pop Up
selecting the file and click open
file directly getting uploaded
tried all possible ways suggested in cypress-file-upload package. not working,
background there is an API POST request which is actually uploading the file, but that API URL is dynamic(URL includes the user authentication login token, and upload key, and user id), so it is not possible to generate/recreate the upload API URL
Can't able to access the file open explorer? In this scenario, how to perform file upload using CyPress?
You should be able to use a RegEx in the RouteMatcher for the intercept on the Upload API. If you need help creating your Regex, I suggest using Regex101 as a scratch pad. Slightly modified from the cypress-file-upload documentation:
// intercept the API endpoint
cy.intercept({
method: 'POST',
url: /.*my-api.com.*/
}).as('upload');
const fileName = 'upload_1.xlsx';
cy.fixture(fileName, 'binary')
.then(Cypress.Blob.binaryStringToBlob)
.then(fileContent => {
cy.get('#input_upload_file').attachFile({
fileContent,
fileName,
mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
encoding:'utf8',
lastModified: new Date().getTime()
})
})
// wait for the 'my-api.com' request, and leave a 2 minutes delay before throwing an error
cy.wait('#upload', { requestTimeout: 120000 });
Issue is with displaying the PDF response as PDF in new tab. I am trying to do something like this: Trying to hit a url\ gives the reponse something in %PDF-1.4 1 0......%%EOF
Code I wrote is
$.ajax({
type: 'GET',
url: url,
headers: {
'Content-Type': 'application/pdf'
},
success: function(data, status, xhr){
var newWindow = window.open("", "new window", "width=200, height=100");
newWindow.document.write(data); // displays the result in new window
},
}
But the Output i am expecting is to view the PDF in the new tab. Not the result of the call in the new tab.
That's quite difficult, but just because of the browser configuration. Some browsers (most of them), when you try to open a PDF in the current tab or in a new one just download it automatically, so, first you should take a look to your browser settings.
Once browser settings are correctly configurated I really suggest to open the PDF as the result of a form action and not with ajax. A form action with a target="_blank" will open the PDF in a new tab.
If that doesn't work because the browser still download the PDF and you need to display it on a new tab, I would create a view in html/css by passing all data you want to display and visually styled as the pdf. I would also include a "download" flat button or icon, that calls the creation and download the real PDF.
Hope this helps you.
Using jQueryMobile I am downloading a file using #Url.Action and a FileStreamResult in the controller class.
Controller Method
public ActionResult DownloadPDF()
{
var stream = myHandler.getFileStream("myfile.pdf");
return File(stream, "application/pdf", "myfile.pdf"));
}
Html code
<a href='#Url.Action("DownloadPDF", "Home">
<div>
<!-- HTML Content -->
</div>
</a>
Works great!
But how may I know when the download is complete, to add a wait-spinner?
I want to use the FileStreamResult as the file is not stored on the webserver (stored in db).
Is it possible to "know" when the file is downloaded by using Url.Action?
It's not possible to do this, as the page does not know anything about the request (which technically is another page entirely).
You can register that a user clicked on the link, but it is not possible to find any more information about the download request - whether it completed, cancelled or errored.
Couple questions about the implementation of the XHR request:
I am trying to make a form in popup.html that allows for the filling of a box with text (in popup.html) and submits that to a remote website using get and replaces the contents of the box with the return of the php (json).
Heres the code so far:
Any idea why when I click submit nothing happens?
Also the manifest permissions:
"permissions": [
"https://*/",
"https://*/*"
]
}
forms don't need permissions at all to do a cross domain post (in theory). That being said, the popup.html never reloads in a browser action (or page action) when a form is submitted.
An easy thing to do is to capture onsubmit on the form and simply do an XMLHttpRequest attaching the form as per the Mozilla MDC site.
Which in summary is (copied from mozilla):
var formElement = document.getElementById("myFormElement");
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitform.php");
xhr.send(new FormData(formElement));
I am trying to use jQuery load() function to get content from another page via AJAX. It works on Firefox, Google Chrome, but not in Internet Explorer 7 & 8.
Here is the page I am developing: http://139.82.74.22/70anos/no-tempo
All the jQuery code is working normally in Internet Explorer, but the specific part that should bring the destination page isn't. To understand the problem, one must click the "Há 80 anos" or "Há 70 anos" block and click any of the links inside it. It should open a panel underneath the timeline with the content of the block.
Here is the code that pulls the external content:
jQuery('a.link-evento').click(function() {
var strUrl = jQuery(this).attr('href');
var objBlocoConteudo = jQuery(this).parents('div.view-content').next().find('div.conteudo-evento')
objBlocoConteudo.css('display','block').animate({ opacity: 1}, {duration: 350}).load(strUrl + ' #area-conteudo-evento');
return false;
});
With this code I am grabbing the URL of the destination page and telling the browser not to do a normal request, but to open it using jQuery load() function.
Any help appreciated fixing this IE... Thank you.
I'm pretty sure AJAX requests have to be made to a domain name in IE as a security precaution. If you map a domain to your 139.82.74.22 address your problem should go away.
You cant make an .Load(http://139.82.74.22/..), it would have to be .Load("http://mysite.com/mypage")