Keskustelu: Nettisivujen teko: Tiedoston lataaminen linkistä JavaScriptillä

Auttakaa ihmeessä vasta-alkajaa hädässä. Pitäisi saada linkistä pdf-tiedosto latautumaan niin, että sen voi tallentaa omalle tietokoneelle haluamaansa paikkaan. Ja tämä pitäisi tehdä nimenomaan JavaScriptillä. Googlailu tuottaa toinen toistaan sekavampia tuloksia, jotka käyttävät buttonia tai iframea.

Index.html:ssä olisi <a href="#" onclick="download()">Lataa tiedosto</a> tai ehkä mieluiten tuonkin voisi sanoa .js tiedostossa, niin että .html-tiedostossa olisi vain sitä itseään. Jonkun id:n tuolle voi tietenkin antaa.

Ja millainen funktion pitäisi olla? Siitä kiikastaa.

Kiinnnostaa mahdollisimman lyhyt ja yksinkertainen ratkaisu, joka käyttää pelkkää JavaScriptiä (sitä vanillaa).

Kiitos!

Miksi siihen pitää käyttää JavaScriptiä? Miksi tavallinen linkki ei kelpaa?

<a href="x.pdf" download>Lataa</a>

Jos tiedosto luodaan jotenkin dynaamisesti JS:llä, on mahdollista tehdä näin:

function onclick() {
  a.href = "data:...";
}

MDN:ssä on tästä esimerkki, jossa canvas tallennetaan PNG-kuvana.

Koska se on JavaScript-harjoitus :)

Kiitti.

Sain lopulta toimimaan myös window.locationilla (ensin getElementById ja event listener), mutta se vain avaa tiedoston - niin kuin tavallinen linkki tekisi. Miten saisi ilmaantumaan latausikkunan/popupin, josta voisi valita, mihin tallentaa, niin että alkuperäinen sivu pysyisi näkyvissä?

Tiedosto pitäisi lukea mm. PHP:lla ja laittaa sen header-tietohin tiedosto liitteenä:

<?php
$name = 'file.pdf';
//file_get_contents is standard function
$content = file_get_contents($name);
header('Content-Type: application/pdf');
header('Content-Length: '.strlen( $content ));
header('Content-disposition: inline; filename="' . $name . '"');
header('Cache-Control: public, must-revalidate, max-age=0');
header('Pragma: public');
header('Expires: Sat, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
echo $content;
?>

Ratkaisu on kerrottu jo edellisessä viestissäni: linkkiin laitetaan download-attribuutti. Siihen voi halutessaan laittaa ehdotuksen tiedostonimeksi. JavaScriptia ei kuulu sekoittaa tähän. Myöskään walkoutin ehdottamia PHP-kikkailuja ei tarvita (ja tuossakin on puolet turhaa).

Kuten jo sanoin, ainoa järkevä JS:llä tehtävä asia tässä tapauksessa on linkin kohteen vaihtaminen, jos siihen on jokin syy. Jos ei ole mitään syytä, niin sitten JavaScriptin käyttö tähän asiaan on puhdasta typeryyttä.

Tässä on kokonainen esimerkki:

<a
	class="tallennuslinkki"
	href="data:text/html,<h1>moi</h1><p>peelo</p>"
	download="moi.html"
>Lataa tästä moi.html!</a>

Jos tehtävän tarkastaja vaatii, että siinä on JavaScriptia, ehdotan seuraavan skriptin lisäämistä:

// Tämä täysin turha koodilohko on lisätty tehtävän tarkastajan vaatimuksesta.

Tai jos on oikeasti aihetta muuttaa linkin sisältöä JavaScriptilla, voi tehdä näin:

window.addEventListener("load", e => {
	let a = document.querySelector("a.tallennuslinkki");
	a.addEventListener("click", function(e) {
		this.href = "data:text/plain,huijasin, ei tullut html-tiedostoa!";
		this.download = "huijaus.txt";
	});
});

Tietysti on olemassa JavaScriptin ikivanha vaihtoehto eli erillisen popup-ikkunan avaaminen (window.open). En tiedä, voiko siinä pakottaa tallennusta. Joka tapauksessa se on huono ratkaisu, koska selaimet yleensä nykyään estävät popuppien avaamisen.

Luonnoksena on olemassa myös FileWriter-rajapinta, mutta sitä ei ainakaan vielä ole selaimissa.

Kiitos. Kieltämättä hölmö JS-tehtäväksi.