Writing HTML into a new tab - html

In my extension, I'm creating a new tab and would like to write my own html to it - that's generated dynamically.
Can it be done.
I'm calling chrome.tabs.create() to create a new tab - now I just need to write my data as an HTML file to it.

Easiest way to do this would be using a data: URL. E.g. something like this:
var htmlCode = "<html><body>Hi!</body></html>";
var url = "data:text/html," + encodeURIComponent(htmlCode);
chrome.tabs.create({url: url});

Related

How would you create a downloadable pdf in a client side app?

One of our requirements for an admin tool is to create a form that can be filled and translated to a downloadable pdf file. (A terms and condition with blank input fields to be exact).
I did some googling and tried creating a form in html and css and converted it into a canvas using the html2canvas package. Then I used the jspdf package to convert it into a pdf file. The problem is that I cannot get it to fit and resize accordingly to an a4 format with correct margins. I'm sure I can get to a somewhat working solution if I spend some time on it.
However, my real question is how would you guys solution this? Is there a 3rd party app/service that does this exact thing? Or would you do all this in the server side? Our current app is using angular 7 with firebase as our backend.
Cheers!
I was able to use the npm package pdfmake to create a dynamic pdf based on user information the user provided while interacting with my form. (I was using React) It opened the pdf in a new tab and the user is able to save the pdf. In another application (still React),
I used the same package to create a receipt so you can customize the size of the "page". We created the pdf and used the getBase64() method and sent the pdf as an email attachement.
My service function:
getEvidenceFile(id: number, getFileContent: boolean) {
return this.http.get(environment.baseUrl + ‘upload’ + ‘/’ + id , {responseType: ‘blob’ as ‘json’})
.map(res => res);
}
My component function called from the selected item of a FileDownload…
FileDownload(event: any) {
// const blob = await this.callService.getEvidenceFile(event.target.value, true);
// const url = window.URL.createObjectURL(blob);
this.callService.getEvidenceFile(event.target.value, true).subscribe(data => {
var binaryData = [];
binaryData.push(data);
var downloadLink = document.createElement(‘a’);
downloadLink.href = window.URL.createObjectURL(new Blob(binaryData));
document.body.appendChild(downloadLink);
downloadLink.click();
});
}

Flying Saucer - Open an attachment from pdf link

I would like to know if there is a way to create a link (Using HTML) to open an attachment embedded in the pdf document.
Something like this...
Open the attachment file or Open the attachment file
Any suggestion or recommendation?
Thanks
I have been able to implement this scenario after reading the next useful post
https://groups.google.com/forum/#!topic/flying-saucer-users/KuwPoTjaQYU
Steps:
Check out the next repository https://github.com/osnard/flyingsaucer
Analyse the file ITextOutputDevice.java, method processLink(RenderingContext c, Box box)
Make changes based on your needs
Build the project and use the jar file generated
Here the code to create an embedded file based on base64 content.
Java
...String doEmbedFile = handler.getAttributeValue( elem, "data-fs-embed-file" );
if ("true".equals(doEmbedFile.toLowerCase())) {
String fileName = new File(uri).getName();
String content = handler.getAttributeValue( elem, "content" );
com.lowagie.text.Rectangle targetArea = checkLinkArea(c, box);
if (targetArea == null) {
return;
}
try {
if (!_attachments.contains(fileName)) {
byte[] fileBytes = Base64.getDecoder().decode(content.getBytes("UTF-8"));
PdfFileSpecification fs = PdfFileSpecification.fileEmbedded(_writer, null, fileName, fileBytes);
fs.addDescription(fileName, true);
_writer.addFileAttachment(fs);
_attachments.add(fileName);
}
targetArea.setBorder(0);
targetArea.setBorderWidth(0);
//This only works on Adobe Acrobat Reader
PdfAction action = PdfAction.javaScript(
"this.exportDataObject({cName:\"" + fileName + "\", nLaunch:2});",
_writer
);...
HTML
<body><div id='div1'><p><a href='test.png' data-fs-embed-file='true' content='iVBORw0KGgoAAAANSUhEU...'>open test.png file</a></p></div><div id='div2'><p><a href='test.pdf' data-fs-embed-file='true' content='JVBERi0xLjUNCiW1tbW1D...'>open test.pdf file</a></p></div><div id='div3'><p><a href='test.txt' data-fs-embed-file='true' content='VEVFRUVFRUVFRVNUIFRYVA=='>open test.txt file</a></p></div></body>
*base64 content truncated
Output
Greetings and I hope it can help others
just open it on new tab, add attribute target="_blank" in your anchor tag
Open attachment

C# Get full html document from site

I tried to use GetStringAsync
using (var client = new HttpClient())
{
var html = await client.GetStringAsync(url);
richTextBox1.Text = html.ToString();
}
and DownloadString
System.Net.WebClient wc = new System.Net.WebClient();
string webData = wc.DownloadString(url);
richTextBox1.Text = webData;
But it doesn't give me full html document like Google Chrome F12. How can I get full html code of url using C#?
Need this url: http://poeplanner.com/ but it doesn't show me even a single table when Chrome F12 does.
My guess is that the code you don't see is a code that added with javascript. So you need use a browser program to get this code too.
This app will run the javascript too and you can ask from it the final html.
If I'm right, try to use phantomjs.
Related question on PhantomJS

how to modify url string of html extension pages

i am asking a very basic question. my problem is that i want to write url string like below
http://example.com/index.html/sometext
but when i write url like index.html/ it results in page not found. if url only upto index.html then it works. is there any way to write it in html pages. Please help Thanks
The URL you provided is not valid. The .html extension would be the end of the URL... with the format you've specified, it implies that another folder exists under index.html, which would never be possible. However, if you want to add parameters to the URL, you can add them like this:
http://example.com/index.html?text=sometext
You can then capture that data in your code.
EDIT
To answer the second question of how to pickup the URL parameters, you can use the method shown in this post:
http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
Basically, create a function as follows...
function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}​
And you can use it like this:
var text = GetURLParameter('text');
You either want to use a QueryString like http://example.com/index.html&someVar=sometext
Or you will want to enable mod_rewrite to transform incoming urls to something that your backend technology understands.
There are lots of frameworks that enable you to use those fancy URLs like http://example.com/index/someText, for example Laravel for PHP or, ASP.NET MVC, or ...

How to pass data back to webpage?

I am working on a WP8 application, containing the WebBrowser control in which I open a html page, containing javascript. The javascript contains the following function:
function send(data) {
windows.external.notify(data);
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getresponse', false);
xhr.send(null);
var result = xhr.responseText;
if (result) {
return JSON.parse(result);
}
}
Basically this function calls the native C# side of the app, where I run some functions and I need to be able to return some data from the native side to the send function. I wanted to use an XMLHttpRequest for this, where my idea was to "intercept" the request url (in this case 'getresponse') and return the data I want by including it in the response.
Is this please possible on Windows Phone 8 using the WebBrowser control?
Once again, all I need to do is this:
Have a javascript function (in this case called "send") which connects to the native app (using windows.external.notify) and pass data back to this "send" function so that it can return it (and so that other JS function can use it).
Is this please possible? If not using the XMLHttpRequest, maybe using another technique?
Thank you all for your help!
You are looking for InvokeScript.
If you have full control over the page that is displayed inside the WebBrowser (e.g. the server is your's), you can define the JS-function to be called:
webBrowser.InvokeScript("yourJSFunction", "param1", "param2");
If you display a website from a foreign webserver you can inject JS like this (this uses jQuery):
webBrowser.InvokeScript("eval", "window.youInjectedFunction = function() {" +
"window.external.notify('and_notify_back');" +
"}; " +
"window.readyStateCheckInterval = setInterval(function() {" +
"window.external.notify('timer');" +
"if (document.readyState === 'complete') {" +
"clearInterval(window.readyStateCheckInterval);window.yourInjectedFuntion();" +
"}}, 100);" +
"");
I used the timer, as you can not be certain if the InvokeScript is called after the page is completely loaded.
If you can control the source, you should definitely go for option 1.