I want to create an URL that when clicked upon opens a tab, downloads a file, and closes that tab. Do you guys know how to do it?
Following is an example: https://cdn.discordapp.com/attachments/850262728428748830/937385812671209502/vineboom.ogg
I am quite new to this and overwhelmed to know where to start. Can somebody assist me with this?
I tried messing with Anchor tag but that is not the answer. According to my research figured it has something to do with NodeJS and ExpressJS. Still no idea of what to do.
Create require variables as shown and then created a function with whatever name you like, here I am using "onLoad" as the name. This function just checks for the file name in the URL's file parameter specified then tries to find it in the server.
var url_string = window.location; //window.location.href
var url = new URL(url_string);
var file = url.searchParams.get("file");
var dFile = file;
function onLoad() {
var hiddenElement = document.createElement('a');
hiddenElement.href = `${dFile}`;
hiddenElement.target = '_blank';
hiddenElement.download = `${dFile}`;
hiddenElement.click();
close()
}
Make sure to add onLoad function into the body with event listener of "onload"
<!DOCTYPE html>
<body onload="onLoad()">
</body>
Related
Hello I'm trying getElementById to change text inside my html web page. below you can find my 1st attempt
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
var net = require('net');
var sleep = require('sleep');
var element = document.getElementById("demo");
element.innerHTML = "Hello JavaScript!";
</script>
This code doesn't work because I can see the:
Use JavaScript to Change Text
This example writes "Hello JavaScript!" into an HTML element with id="demo":
but the:
"Hello JavaScript!"
is missing.
Changing the positions of the vars at the beginning of the js script makes the code working:
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
var element = document.getElementById("demo");
element.innerHTML = "Hello JavaScript!";
var net = require('net');
var sleep = require('sleep');
</script>
Why? I need both sleep and net later on when I'll write other parts of the code but I need to manipulate again the "demo" html as well.
There is a problem with both lines. The require() function is not a client side function, recognized by the browser. Typically require() is used in server side NodeJS code, but there is a require.js library file that you can add...
var net = require('net');
var sleep = require('sleep');
Add this to your project:
http://requirejs.org/docs/release/2.2.0/minified/require.js
And take a look at this :
http://requirejs.org/docs/api.html
Source :
Javascript require() function giving ReferenceError: require is not defined
It seems likely that the lines with
var net = require('net');
var sleep = require('sleep');
are actually causing an error, which in turn causes the JS to stop evaluating, so that it doesn't hit the getElementById line. You can check this in you browser's developer tools, in the console.
Is it possible to fetch data from MongoDB and render a html template on the server side itself for a node-js project?
As of now in my serverside js file I've done the following.
//Failing array will be populated by a db.find later on.
var failing = [
{ name: "Pop" },
{ name: "BOB" }
];
/*Now i have to send a mail from the server for which I'm using nodemailer.
Where do i store the template ? This is what I've done in the same file */
var template = "<body>{#failing} <p>{.name}</p> {/failing}</body>"
// Add this as the body of the mail and send it.
I'm not sure how to render the data and how to get it displayed. I'm aware storing the template in the variable isn't right but I'm not sure what else to do.
If your template is that short, you can store it in a variable without problem. Obviously, you can store it in a file also.
Let's say you decide to store it in a file index.dust:
<body>{#failing} <p>{.name}</p> {/failing}</body>
Now, in your node controller you need to load the file and generate the html content from it:
const fs = require('fs');
const dust = require('dustjs-linkedin');
// Read the template
var src = fs.readFileSync('<rest_of_path>/index.dust', 'utf8');
// Compile and load it. Note that we give it the index name.
var compiled = dust.compile(src, 'index');
dust.loadSource(compiled);
// Render the template with the context. Take into account that this is
// an async function
dust.render('index', { failing: failing }, function(err, html) {
// In html you have the generated html.
console.log(html);
});
Check the documentation in order not to have to compile the template every time you have to use it.
Basically I am trying to get the image src from a webpage so I can then download the image. Everything I have tried does not work.
Also, I am fairly new to node.js and cheerio, so bear with me.
var DilbertURL = 'http://Dilbert.com/strip/' + getDateTime();
request(DilbertURL, function (error, response, body) {
var $ = cheerio.load(body);
$('div.container-fluid').each(function(i, element){
var src = $('.img-responsive img-comic').attr("src");
console.log(src);
});
});
Everything I have tried to get the src of the dilbert image does not work. it all comes back 'undefined'. The html for the image goes like this...
<img alt="Wally's Passion - Dilbert by Scott Adams"
class="img-responsive img-comic" height="280" src="http://assets.amuniversal.com/dc0c4f80fd6e0132ef1a005056a9545d"
width="900">
What exactly am i doing wrong?
change this line to
var src = $('.img-responsive img-comic').attr("src");
this
var src = $('.img-responsive.img-comic').attr("src");
The selector will now work as intended! no space is needed to show that both classes belong to the same element rather than something with .img-responsive with a child element called img-comic which clearly wont exist!
Cheers
I have the following code in my server.js
var cddata = [];
body.rows.forEach(function(doc) {
cddata.push([{id: doc.id, name: doc.key, text:doc.value.Time, group: 1}]);
});
response.render('timeline', {cddata: JSON.stringify(cddata)});
and I have the following in my Jade view file
script(src='vis/dist/vis.js')
link(rel="stylesheet", href="vis/dist/vis.css", type="text/css")
script.
//alert(cddata);
var options = {};
var data = new vis.DataSet(cddata);
var container = document.getElementById('visualization');
new vis.Timeline(container, data, options);
However, nothing related to the chart is rendered. I presume the object is not correctly passed to the jade file. Please help!
Also, is there a way to verify the incoming object in Jade? Alerts dont seem to work.
thanks
The <script> in your jade is a browser side script so won't be able to access variables in the templates generation scope. You'll need to output your data as JSON and read it in using browser side JavaScript, something like this:
script(src='vis/dist/vis.js')
link(rel="stylesheet", href="vis/dist/vis.css", type="text/css")
script.
var chartData = JSON.parse('#{cddata}')
var options = {};
var data = new vis.DataSet(chartData);
var container = document.getElementById('visualization');
new vis.Timeline(container, data, options);
After much deliberation, the following worked to pass object from node server to client side server scripting on Jade file.
on the server.js, where dbdata is an array of JSON objects
response.render('timeline', {dbdata:dbdata});
On the jade file,
script.
var chartData = !{JSON.stringify(dbdata)};
Thanks,
I'm working on an app that creates a PDF document on the server, then displays a Download Here button. When I click the button, the process appears to work. When I inspect the Network>Preview and Network>Headers tabs in the Chrome console I can see that the file has definitely been returned.
The problem is, it does not display and it does not offer the option to save. Am I missing a client side step here? My preferred outcome is either to give the user the option to save the file or to automatically begin the download to their default path.
Here is relevant the server code:
exports.show = function(req, res) {
var file = req.params.id;
var filePath = __dirname + '../../../lib/completedforms/';
var thisPath = path.resolve(filePath + file);
res.attachment(thisPath);
res.setHeader('Content-Type', 'application/pdf');
res.setHeader("Content-Disposition", "attachment");
res.download(thisPath);
};
Thanks in advance for any guidance here.
There's no need for both res.attachment() AND res.download(). Just use the latter.
Also, res.download() already sets the Content-Disposition header, so you can remove that too.
You can also simplify your path generation:
var thisPath = path.resolve(__dirname, '../../../lib/completedforms/', file);
Although you should probably sanitize file and/or check that thisPath is not some location where it shouldn't be. This will prevent someone from supplying a potentially malicious req.params.id value like ../../../../../../../etc/passwd.