Read the PDF response and display the PDF though ajax - ajax

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.

Related

How to upload file in cypress test? once we select file in file open explorer then DOM directly uploading the file

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 });

Chrome App: launch link in Chrome rather than Safari

I'm developing a Chrome (packaged) app which maintains a set of bookmarks. This opens in its own small window. Clicking on a bookmark opens it in a browser using a link with target set to '_blank'.
On Mac OS X, these open in Safari. Is there anyway of having them open in Chrome?
When you click on a link with target="_blank" in a packaged app, Chrome respects your choice of the default browser and opens the link externally in whatever it is, not necessarily Chrome. In your case, the default system browser must be Safari.
The easy way to open such links in Chrome would be to make it the default browser instead.
If you don't want to do that, but still for some reason insist that your links open in new tabs specifically in Chrome, here is one (perhaps the only) way to achieve that:
Write a companion extension to your app and have your users install it.
In the app, attach an onclick handler to every link, and use chrome.runtime.sendMessage() to send a request to the extension to open the link's URL (in order to do that, you will have to find out your extension's ID and bake it into its manifest, as described here: http://developer.chrome.com/apps/manifest/key.html):
var link = ...;
link.addEventListener('click', function(e) {
e.stopPropagation();
e.preventDefault();
chrome.runtime.sendMessage(
yourExtensionId, { url: link.href }, function(response) {}
);
};
In the extension, define a chrome.runtime.onMessageExternal(data) handler (it will intercept sendMessage() requests from the app), and use chrome.tabs.create() in there to open a new tab:
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
// Don't forget to make sure that |sender| is you app here.
chrome.tabs.create({ url: request.url }, function() {
// If you need to notify the app when the tab opens:
sendResponse(true);
});
// 'true' means that your response is sent asynchronously.
return true;
}
);

How to return pdf document from controller with ajax call in MVC app

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.

Chrome extension AJAX/XHR request handling

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));

jQuery load() not working in Internet Explorer

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")

Resources