angularjs download file via POST on IE8/9 without page refresh - html

I'm trying to download a dynamically generated file from the server using a hidden form.
Below is the angular function that I'm using to submit the hidden form
$scope.downloadCsv = function() {
var dataset = JSON.stringify($scope.dataset);
var body = $('body');
var reportParamJson = angular.toJson($scope.dataset);
var hiddenForm = "<form action='/Reports/SaveTestCsv' method='POST' target='_blank'><input type='hidden' name='dataset' value='" + dataset + "'/ ><button id='submitCSV' type='submit'></button></form>";
body.append(hiddenForm);
$('#submitCSV').click();
}
Below is the .net mvc method to generate the response with the file
[HttpPost]
public ActionResult SaveTestCsv(string dataset)
{
var data = JsonConvert.DeserializeObject<MyObject>(dataset);
var binary = getTestCSV(data);
var file = File(binary, "text/csv", "test.csv");
return file;
}
Below is the relevant html code from the partial html page that I'm including in the view using ng-include
<div>Download CSV</div>
<div ng-grid="gridOptions"></div>
.
When I click on "Download CSV", Chrome, FF and IE10 prompts me to save the file without refreshing the page/view, but on IE8/9, the page is refreshed, so the content from the ng-include tag is gone, in particular the html I posted above is no longer present.
I'm wondering if this has something to do with the hashbang in the url from IE8/9 and is there any way to fix this?
Edit
I ended up removing routing from angular completely and just use .net MVC to do the routing for me, and then it's working on IE8

Related

NodeJS load a json from a file selector without reloading webpage

Has anyone done this?
I need to be able to grab a JSON file from a input file selector from HTML, after that read it, parse it and show it in the webpage.
The page cannot reload and I don't need to upload/copy it to any of my folders. I just need to read it and show it without reloading the webpage.
Any ideas? I'm on Nodejs. I'm serving static html pages. Apparently it's simple but I'm struggling a lot.
HTML:
<input type="file" onchange='getContent(this)' />
<div id="file-content"></div>
JS:
function getContent(content) {
if (content.files && content.files[0]) {
var contentReader = new FileReader();
contentReader.onload = function(e) {
var output = e.target.result;
document.getElementById('file-content').innerHTML = output;
};
contentReader.readAsText(content.files[0]);
}
}
You can see live preview here

Css stylesheet loaded as html in Firefox

I've got a css file injected into my asp.net web form application page through a base page. The method I use look like the following:
private void InjectLocalStyleSheet()
{
if (this.Page.Header == null)
return;
Literal cssFile = new Literal()
{
Text =
#"<link rel=""stylesheet"" type=""text/css"" href=""" + Page.ResolveUrl("~/Common/Theme.css") +
#""" />"
};
Page.Header.Controls.Add(cssFile);
}
When I run the page in firefox, that css file gives me a 302 warning. Apparently, firefox view this file as html type while I've specified the type to be "text/css".
snap of request and response headers
I also run the web page in Chrome and get "Failed to load resouce: net::ERR_TOO_MANY_REDIRECTS"
Anyone has an idea about what is going on? Please help. Thank you.

WinRT 8.1 WebView Content Type

I'm trying to load a webview using HttpRequestMessage in Windows Phone 8.1. The problem is that the Content-Type header is missing in the content headers when checked in Fiddler.
byte[] postData = GetWebviewPostDataBytes();
HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Post, prepareUri(url));
var httpContent = new HttpBufferContent(postData.AsBuffer());
httpContent.Headers.Add("Content-Type", GetContentType());
request.Headers.Add("User-Agent", GetUserAgent());
request.Content = httpContent;
webView.NavigateWithHttpRequestMessage(request);
I found some links where this is posed as an internal bug. Can someone tell me a workaround to this?
The only solution I've found for this is to use a form to load your page.
I'm loading a local HTML page which I'm generating with my POST parameters. This page contains an hidden HTML form which I will submit once the page will be loaded.
The web page loading is then:
generate a local HTML page with a form and your parameters in hidden input fields
load this page in your webview
once the page is loaded, request a submit of the form using the webpage postContent() function
the webview will then navigate to the expected webpage with the content-type header set
This sample code is in WinJS but it can easily be transposed in C# since it is the same webview component.
var htmlContent = "<html><head><script type='text/javascript'>function postContent(){document.getElementById('postForm').submit();}</script></head><body><form id='postForm' action='{targetUrl}' method='post'>{inputFields}</form></body></html>";
var inputFields = "";
var iterator = payloadContent.first();
while(iterator.hasCurrent)
{
inputFields += "<input hidden='on' name='{n}' value='{v}'/>".replace("{n}", iterator.current.key).replace("{v}", iterator.current.value);
iterator.moveNext();
}
var htmlContent = htmlContent.replace("{targetUrl}", "YOUR URL HERE").replace("{inputFields}", inputFields);
this._webviewElement.navigateToString(htmlContent);
In the page loaded event you will then have to request the webview to execute the 'postContent()' javascript function to submit the form.
this._webviewElement.invokeScriptAsync("postContent");
Hope this helps.

refresh data read from text file with out page refresh

i am a novice at Java and JS so this will be very basic.
I've got this code that creates a text file in a specific directory. i only got as far as creating an actuale file, however, as the text file will be frequantely updated, i need the page to refresh/reload the text file and display it's data (just in the blank page). How do i do this, with out user needed to click refresh (auto refresh in sense, however, i've tried auto refresh and it does not seem to reload JS and/or display text file's content)
Create Text file/Read/Display content/Refresh and/or Reload - no user refresh
<script>
function createFile()
{
var object = new ActiveXObject("Scripting.FileSystemObject");
var file = object.CreateTextFile("C:/Documents and Settings/galimbek.sagidenov/My Documents/Practice HTML_Photoshop_java/BroadcastTest.txt", false);
file.WriteLine('Hello World');
file.WriteLine('Hope is a thing with feathers, that perches on the soul.');
file.Close();
}
</script>
this will not accomplished by using client side javascript only you have to use server side code:
server ex (using node.js):
server :
var http = require("http"),
fs=require("fs");
http.createServer(function(request, response) {
fs.writeFileSync("C:/Documents and Settings/galimbek.sagidenov/My Documents/Practice HTML_Photoshop_java/BroadcastTest.txt", 'Hello World\r\nHope is a thing with feathers, that perches on the soul.');
}).listen(8888);
client
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$.get("http://localhost:8888",function(){
console.log("writing to file successeded");
})
})
</script>

HTML to PDF Solution (Handling Content, Headers and Footers)

I'm trying to create a "report" by generating a PDF based on HTML.
At first, I simply attempted to write raw encoded HTML to a document and then print that document using Javascript. However, this gave me little to no control involving headers and footers.
I attempted using thead and tfoot elements, which worked reasonably well in most browsers, however I wasn't able to get the formatting that I was looking for.
Currently - I am trying to work on a server-side solution using iTextSharp in MVC3, however I am a bit lost as to how to proceed, having not worked with iTextSharp much.
Input and Description of Output:
There will be 4 items used in creating the Report:
Report Content (which is currently encoded HTML, as I am unsure if decoding will change any formatting)
Report Title (will simply be the name of the PDF generated)
Report Header (will be displayed at the upper-left of each page)
Report Footer (will be displayed at the lower-left of each page)
Controller Action:
//This will be accessed by a jQuery Post
[HttpPost]
public FileStreamResult GeneratePDF(string id)
{
//Grab Report Item
ReportClass report = reportingAgent.GetReportById(id);
Document doc = new Document();
//Do I need to decode the HTML or is it possible to use the encoded HTML?
//Adding Headers / Footers
//Best method of returning the PDF?
}
iTextSharp cannot convert HTML to PDF. It's not what it was designed to do. It was designed to create PDF files from scratch, not converting between various formats into PDF. If you want to convert HTML into PDF you could for example use the the flying-saucer library which is based on iText. I have blogged about how this could be done in .NET using IKVM.NET Bytecode Compiler (ikvmc.exe).
So your controller action might look something along the lines of:
[HttpPost]
public FileStreamResult GeneratePDF(string id)
{
ReportClass report = reportingAgent.GetReportById(id);
return PdfResult(report.Html);
}
where PdfResult could be a custom action result taking the raw HTML and outputting the PDF into the response stream:
public class PdfResult : ActionResult
{
private readonly string _html;
public PdfResult(string html)
{
_html = html;
}
public override void ExecuteResult(ControllerContext context)
{
var response = context.HttpContext.Response;
response.ContentType = "application/pdf";
var builder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
using (var bais = new ByteArrayInputStream(Encoding.UTF8.GetBytes(_html)))
using (var bao = new ByteArrayOutputStream())
{
var doc = builder.parse(bais);
var renderer = new ITextRenderer();
renderer.setDocument(doc, null);
renderer.layout();
renderer.createPDF(bao);
var buffer = bao.toByteArray();
response.OutputStream.Write(buffer, 0, buffer.Length);
}
}
}