We are migrating an ASP.NET MVC application, which had the feature to open PDF in a new tab via FileContentResult.
return new FileContentResult(byteArray, "application/pdf");
Now we are migrating this app to React and from from the API (server side), we are sending back the response as below :-
response.Content = new ByteArrayContent(pdfByteArray);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
On the React UI side, we are using the response as below :-
postData(POST_API_ENDPOINT, requestData, ((err, data) => {
if (data.ok) {
data.blob().then(function(myBlob) {
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
return window.navigator.msSaveOrOpenBlob(myBlob, "sample.pdf");
}
else {
var objectURL = URL.createObjectURL(myBlob);
return window.open(objectUrl);
}
});
}
}));
Now, i understand that msSaveOrOpenBlob would always prompt the user to "open/save" within IE11. What other options do i have if i need to open the PDF in a different tab without the prompts?
I guess there is another way to do that via the below manner, but again the URL length limits that.
window.open("data:application/pdf;base64, " + base64EncodedPDF);
IE does not allow us to open Data URL in new tab (possibly security reason) and there no workaround - faced same issue earlier.
We use msSaveOrOpenBlob - found no alternative.
Related
I am developing a chrome extension.
In my web application, there is a JavaScript embedded in a HTML page which tries to interact with my extension.
let extId = "extension id";
var extPort = chrome.runtime.connect(extId);
extPort.postMessage({from: "WebServer", fn: "greeting"});
In my extension - background script, event listener is set to handle the message.
chrome.runtime.onConnectExternal.addListener(function(port) {
port.onMessage.addListener(function(message, sender) {
if (message.from == "WebServer") {
if (message.fn == "greeting") {
console.log("Message from Web Server");
}
}
});
});
Besides, there is a function in the background script to use XHR to GET the HTML page. The function works fine.
Question: The message (which is shown in console log) can be got only when I visit the HTML page in browser but not when the page got by XHR. Why? (Sorry I am new to JavaScript and Chrome Extension)
I'm trying to implement HTML5 Notification API in my chat application. When I'm working on my localhost, everything works fine (The browser prompts me whether i need to allow notification from this site or not).
But when i try to access my application running in my local machine from some other machine which all connected in the same network. The browser is not prompting anything.
To Sum up my problem:
http://localhost:3000/home - This works!
http://10.1.0.126:3000/home - This doesn't works this way. (Even if try my from my computer or from other computer)
This is the code I'm using for notification api implementation
function createNotification(response){
if(!('Notification' in window)){
console.log("This browser does not Notification")
}else{
if(Notification.permission === 'granted'){
createNotification(response) // function to createNotification from response
}else if(Notification.permission !== 'denied'){
Notification.requestPermission((permission) => {
if(permission === 'granted'){
createNotification(response)
}
})
}
function createNotification(response){
// Construct the Notification
let title = response.sender_name
let notificationOptions = {
body: response.message,
icon: default_profile_pic
}
// Close the Notification after 3 seconds
let notification = new Notification(title, notificationOptions)
setTimeout(notification.close.bind(notification),3000)
}
P.S: I'm using ReactJS, Redux for my front-end development.
In Chrome 62 and newer you cannot request notification api at all unless the site is https:// secured. (see issue 779612) If you do have https on the site you should be able to use notifications and background push notifications.
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
I have a web page where I implement ADAL.JS.
When browsing the page via the web it works perfectly; however when I try to view it on an iPhone, and I have saved it as a shortcut on the desktop using the Add to Homescreen button, things go haywire.
The initial page (index.html) shows correctly using the apple-mobile-web-app-capable meta tag; however, when the authentication is invoked, I am taken to a real browser window. Once redirected back to index.html, I am still in the separate browser window not the Web App view.
Ultimately, I want to have this as an offline web site with all page functionality running in the view produced by apple-mobile-web-app-capable. Any other ideas as to how to implement this are appreciated.
Thanks in advance.
This is one of the big problems currently existing in iOS webapps. Every link or redirection opens up in a new window.
You can fix it changing window.location.href with JavaScript.
Seem to be missing something...I get at urlNavigate not defined error...suggestions?
alert('Running Auth');
online = navigator.onLine;
authContext = new AuthenticationContext({
tenant: azureTenant,
clientId: azureClientId,
postLogoutRedirectUri: window.location,
//redirectUri: "https://shlpkpiapi.azurewebsites.net/kpiapp/test.html"
});
authContext.config.displayCall=function(url){
if (urlNavigate)
{
this.info('Navigate to:' + urlNavigate);
window.location.href=urlNavigate;
}
else
{
this.info('Navigate url is empty');
}
}
if (authContext.isCallback(window.location.hash)) {
authContext.handleWindowCallback();
var err = authContext.getLoginError();
if (err) {
alert('Error on callback')
}
}
else {
var user = authContext.getCachedUser();
if (user) {
//We have a user in cache and are using those credentials
console.log('Signed in as: ' + user.userName);
} else {
console.log('Not signed in.')
if (online)
{
alert('signing in');
authContext.login();
}
else
{
alert('currently offline');
}
}
}
Ok...I made the change and the error is gone but I don't understand how this is supposed to address the issue. When I add my page to my IPhone home screen (https://xxxxx.azurewebsites.net/app/test.html) and then click on the tile I am taken to the test.html page. On that page page there is an auth function that executes which uses adal.js and takes me to "https://login.microsoftonline.com/xxx.onmicrosoft.com/oauth2...". This shows up in the scope of my IOS Web app and has my account listed and the Use another account option. I click on my account or choose the Use another account option and I am taken to another page that is opened in Safari.
I'm trying to use chrome.identity with VK api for standalone app, which requires setting redirect url to "https://oauth.vk.com/blank.html". Chrome can't parse with url, and doesn't return token. Is there any other way to do this in chrome app? May be i can create popup window, and handle by myself, if it is possible to catch redirect in js code?
Thanks to Xan, there is <webview> solution.
my code:
webview.addEventListener("loadredirect", function(e) {
if(e.newUrl.indexOf('access_token') > -1) {
var result = e.newUrl.split('#')[1].split('&');
app.token = result[0].split('=')[1];
app.expires = result[1].split('=')[1];
app.user_id = result[2].split('=')[1];
}
});
I am trying to open files in their native application from my app.
Windows.Storage.ApplicationData.current.localFolder.getFileAsync("downloads\\" + fileName).then(
function (file) {
var options = new Windows.System.LauncherOptions();
options.displayApplicationPicker = true;
options.desiredRemainingView = Windows.UI.ViewManagement.ViewSizePreference.useHalf;
Windows.System.Launcher.launchFileAsync(file, options).then(
function (success) {
if (success) {
//File launched
} else {
// File launch failed
}
});
});
I tried using the LauncherOptions.DesiredRemainingView to make sure every launch would have the apps split screen (50/50) and the native apps still open at whatever size they default to. Reader(50%), Photos(70%).
In the Windows Dev Center - Windows Store apps there is a sample for launching that includes the different enumerations of DesiredRemainingView and none of the enumerations worked when I built the downloaded sample.
Are there other options (LauncherOptions) that I need to modify/set?