HTML download file

[sma0900029]

Καλησπέρα,

Η απορία που πάει να με τρελάνει είναι η εξής:

Προσπαθώ να φτιάξω ένα σύνδεσμο που όταν το πατήσει ο χρήστης να κατεβάσει ένα αρχείο. Είδα οτι η html έχει το download attribute.

Ο κώδικας στο αρχείο html  λοιπόν είναι ο εξής:

Όταν πατάω το σύνδεσμο μου ανοίγει το παράθυρο αλλά δεν το αναγνωρίζει το αρχείο σαν .pdf αλλά σαν .html

To project είναι υλοποιημένο με angular cli αν παίζει σημασία. Όταν λοιπόν ξεκινάω το project με την εντολή ng serve έχω τα παραπάνω αποτελέσματα.

Στη περίπτωση που σταματήσω το project και ανοίξω μόνο το αρχείο html (με notepad++ για παράδειγμα) και πατήσω εκτέλεση τότε δουλεύει κανονικά αλλά τρέχει μόνο το συγκεκριμένο αρχείο και όχι τα υπόλοιπα components προφανώς. Οπότε τι κάνω λάθος?? Έχει κάποιος καμιά ιδέα?

[The King]

Το σπουδαιολόγησες.

Απλά στον δικό σου υπολογιστή / εγκατάσταση Windows έχει ρυθμιστεί ο Firefox ως default PDF reader και όχι κάποιο άλλο πρόγραμμα, για αυτό σου αναφέρει ότι είναι Firefox file το οποίο σε ουδεμία περίπτωση σημαίνει ότι το αναγνωρίζει ως HTML file.

Στον δικό μου πχ θα έβγαζε ότι είναι "PDFsam Document" γιατί έχω ορίσει το αντίστοιχο πρόγραμμα ως default PDF reader.

Είσαι μια χαρά.

Επεξ/σία 7 Μαΐου 2018 από The King

[sma0900029]

7 λεπτά πριν, The King είπε

Το σπουδαιολόγησες.

Απλά στον δικό σου υπολογιστή / εγκατάσταση Windows έχει ρυθμιστεί ο Firefox ως default PDF reader και όχι κάποιο άλλο πρόγραμμα, για αυτό σου αναφέρει ότι είναι Firefox file το οποίο σε ουδεμία περίπτωση σημαίνει ότι το αναγνωρίζει ως HTML file.

Στον δικό μου πχ θα έβγαζε ότι είναι "PDFsam Document" γιατί έχω ορίσει το αντίστοιχο πρόγραμμα ως default PDF reader.

Είσαι μια χαρά.

Ξέρεις όμως τι συμβαίνει αν ήταν έτσι θα μου το άνοιγε κανονικά ή θα το αποθηκεύει σωστά. Το αρχείο είναι 2mb και αυτο το αποθηκεύει 1.4kb. Αρα κάτι άλλο πιστεύω παίζει και όχι αν θα το ανοίξει με  Firefox ή με Adobe. Το ίδιο το κάνει για οποιοδήποτε αρχείο οπως .csv .png .mp3 

[mikebol]

μηπως φταιει ο firefox, δοκιμασε με αλλο browser

[ajaxmonkey4hire]

το link σου φταίει. Αυτό είναι το ποιο πιθανό. Το backend σου δεν επιστρέφει το αρχείο με το σωστό content-type αλλά html error page μεγέθους 1.4 KB

Επεξ/σία 7 Μαΐου 2018 από ajaxmonkey4hire

[sma0900029]

6 ώρες πριν, mikebol είπε

μηπως φταιει ο firefox, δοκιμασε με αλλο browser

Δοκίμασα και με άλλο και πάλι τα ίδια.

4 ώρες πριν, ajaxmonkey4hire είπε

το link σου φταίει. Αυτό είναι το ποιο πιθανό. Το backend σου δεν επιστρέφει το αρχείο με το σωστό content-type αλλά html error page μεγέθους 1.4 KB

Ναι αυτό πιστεύω και εγω όταν χρησιμοποιώ postman εμφανίζεται κανονικά έχεις να μου προτείνεις κάποιο τρόπο να το υλοποιήσω ή κάτι να διαβάσω πως γίνεται? Γιατί οι περισσότεροι έλεγαν αυτό τον τρόπο άλλα δεν τα έχω καταφέρει 

[The King]

1. Αρχικά δοκίμασες να δεις ότι όντως το αρχείο υπάρχει μέσω του συγκεκριμένου URL δίνοντας το "καρφωτά" στον browser , δηλ να βάλεις στον Firefox να ανοίξει πχ το http://localhost:4200/files/yourfile.pdf ;
    
2. Επίσης στον κώδικα που έβγαλες screenshot είδα ότι έχεις πολλές back διαδρομές τύπου "../../.." , να υποθέσω ότι η σελίδα που περιέχει το link βρίσκεται αρκετά sub paths κάτω από τη διαδρομή του pdf αρχείου; Εάν ναι και με το 1ο που σου ανέφερα ανοίγεις το αρχείο κανονικά τότε το παιχνίδι το χάνεις κάπου στις διαδρομές (../../ ..) που έχεις βάλει στο href σου.

Επεξ/σία 7 Μαΐου 2018 από The King

[sma0900029]

15 λεπτά πριν, The King είπε

1. Αρχικά δοκίμασες να δεις ότι όντως το αρχείο υπάρχει μέσω του συγκεκριμένου URL δίνοντας το "καρφωτά" στον browser , δηλ να βάλεις στον Firefox να ανοίξει πχ το http://localhost:4200/files/yourfile.pdf ;
    
2. Επίσης στον κώδικα που έβγαλες screenshot είδα ότι έχεις πολλές back διαδρομές τύπου "../../.." , να υποθέσω ότι η σελίδα που περιέχει το link βρίσκεται αρκετά sub paths κάτω από τη διαδρομή του pdf αρχείου; Εάν ναι και με το 1ο που σου ανέφερα ανοίγεις το αρχείο κανονικά τότε το παιχνίδι το χάνεις κάπου στις διαδρομές (../../ ..) που έχεις βάλει στο href σου.

Όχι το νούμερο ένα που ανέφερες δεν το δοκίμασα θα το δοκίμασω 

Ναι το αρχείο βρίσκεται αρκετά paths πισω.

Θα το δοκιμάσω και θα σου πω.

[Predatorkill]

Εχε στα υποψην οτι οταν κανεις production build ετσι οπως εχεις τα paths μαλλον θα χασεις τη μπαλα με τον server.

Μπορει στο dev να εχεις 30 φακελους αλλα στο production θα εχεις μονο ενα φακελο build και το αμεσως προηγουμενο directory θα ειναι ο server σου λογικα.

 

ελπιζω να εγινα κατανοητος.

Edit: γιατι δεν βαζεις direct url με backticks; Δλδ

>`http:localhost:port/downloads/${this.variable}/${this.filename}

Οπου variable ( αν θες το βαζεις) ειναι ξερω γω καποιος μεταβλητος υποφακελος του στυλ userid, fileid

Edit 2: τα code tags του ινσομνια τρομπαρουν, δες εδω:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Επεξ/σία 7 Μαΐου 2018 από Predatorkill

[sma0900029]

1 ώρα πριν, sma0900029 είπε

Όχι το νούμερο ένα που ανέφερες δεν το δοκίμασα θα το δοκίμασω 

Ναι το αρχείο βρίσκεται αρκετά paths πισω.

Θα το δοκιμάσω και θα σου πω.

Μόλις το δοκίμασ και δεν το ανοίγει όχι.

[The King]

3 λεπτά πριν, sma0900029 είπε

Μόλις το δοκίμασ και δεν το ανοίγει όχι.

Δοκίμασες κατευθείαν το απόλυτο url του αρχείου όπως σου έγραψα και όχι όπως δίνεις το href στην HTML σου, δηλ http://localhost:4200/../../../grgrgr.pdf ;

Επεξ/σία 7 Μαΐου 2018 από The King

[sma0900029]

48 λεπτά πριν, Predatorkill είπε

Εχε στα υποψην οτι οταν κανεις production build ετσι οπως εχεις τα paths μαλλον θα χασεις τη μπαλα με τον server.

Μπορει στο dev να εχεις 30 φακελους αλλα στο production θα εχεις μονο ενα φακελο build και το αμεσως προηγουμενο directory θα ειναι ο server σου λογικα.

ελπιζω να εγινα κατανοητος.

Edit: γιατι δεν βαζεις direct url με backticks; Δλδ

>`http:localhost:port/downloads/${this.variable}/${this.filename}

Οπου variable ( αν θες το βαζεις) ειναι ξερω γω καποιος μεταβλητος υποφακελος του στυλ userid, fileid

Edit 2: τα code tags του ινσομνια τρομπαρουν, δες εδω:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Δεν το σκέφτικα καθόλου να το κάνω αυτό γιατι είδα οτί μπορεί να γίνει με αυτόν το τρόπο που δοκίμασα και επείδη δεν δούλευε σκάλωσα και ήθελα να βρω το γιατί. Αλλά τελικά μάλλον θα το κάνω με άλλο τρόπο γιατί δεν μπορώ να καταλάβω τι φταίει.

 

Μόλις τώρα, The King είπε

Δοκίμασες κατευθείαν το απόλυτο url του αρχείου όπως σου έγραψα και όχι όπως δίνεις το href στην HTML σου, δηλ http://localhost:4200/../../../grgrgr.pdf ;

Ναι ναι έβαλα to url του αρχείου όχι όπως στο href.
Λοιπόν να εξηγήσω τι προσπαθώ α κάνω λίγο καλύτερα γιατί πρέπει να κάνω χοντρό λάθος και δεν το βλέπω

Έχω ένα φάκελο που μέσα έχει ένα αρχείο app.js , ένα φάκελο με τα pdf, excel και αυτά και τέλος έναν δεύτερο φάκελο που είναι το project με angular cli.

Στον φάκελο που δημιούργησα το project είναι το HTML αρχείο. Αυτός είνια ο λόγος που το στέλνω και τόσο πίσω στο path.

Δοκίμασα να βάλω το αρχείο και μέσα στο φάκελο με το html για να μην πάω τόσο πίσω αλλά και πάλι δεν άλλαξε τίποτα.

12 λεπτά πριν, sma0900029 είπε

Δεν το σκέφτικα καθόλου να το κάνω αυτό γιατι είδα οτί μπορεί να γίνει με αυτόν το τρόπο που δοκίμασα και επείδη δεν δούλευε σκάλωσα και ήθελα να βρω το γιατί. Αλλά τελικά μάλλον θα το κάνω με άλλο τρόπο γιατί δεν μπορώ να καταλάβω τι φταίει.

Ναι ναι έβαλα to url του αρχείου όχι όπως στο href.
Λοιπόν να εξηγήσω τι προσπαθώ α κάνω λίγο καλύτερα γιατί πρέπει να κάνω χοντρό λάθος και δεν το βλέπω

Έχω ένα φάκελο που μέσα έχει ένα αρχείο app.js , ένα φάκελο με τα pdf, excel και αυτά και τέλος έναν δεύτερο φάκελο που είναι το project με angular cli.

Στον φάκελο που δημιούργησα το project είναι το HTML αρχείο. Αυτός είνια ο λόγος που το στέλνω και τόσο πίσω στο path.

Δοκίμασα να βάλω το αρχείο και μέσα στο φάκελο με το html για να μην πάω τόσο πίσω αλλά και πάλι δεν άλλαξε τίποτα.

Όταν το έχω με το ng serve η εικόνα είανι αυτή, και αμέσως μετά ανοίγει το παράθυρο που δεν αναγνωρίζι το αρχείο σαν pdf

Όταν τρέχω το αρχείο από το noτepad++ η εικόνα είναι αυτή

κάνοντας κλικ

εμφανίζεται το αρχείο.

Ευχαριστώ πολύ για το χρόνο σας, απλά θέλω τη βοήθειά σας γιατί θα με σκάσει η βλακεία

 

[sma0900029]

Καλησπέρα και πάλι δεν ξέρω κατά πόσο είνai σωστό αυτό που έκανα αλλά δούλεψε (αν θέλετε να μου προτείνετε κάτι διαφορετικό πείτε μου) .

Λοιπόν στο backend  έχω

Στο HTML

Το αποτέλεσμα είναι να μου ανοίγει οποιοδήποτε αρχείο και αν δεν μπορεί να το ανοίξει ζητάει να το κατεβάσει.

Απότι  κατάλαβα το λάθος ήταν ότι ετρεχα στο localhost:4200  που είνια η angular  και πήγαινα σε φάκελο που έτρεχε το node. Ναι είμαι χαζός . Ευχαριστώ όλους για την βοήθεια.

[The King]

4 ώρες πριν, sma0900029 είπε

Καλησπέρα και πάλι δεν ξέρω κατά πόσο είνai σωστό αυτό που έκανα αλλά δούλεψε (αν θέλετε να μου προτείνετε κάτι διαφορετικό πείτε μου) .

Λοιπόν στο backend  έχω

Στο HTML

Το αποτέλεσμα είναι να μου ανοίγει οποιοδήποτε αρχείο και αν δεν μπορεί να το ανοίξει ζητάει να το κατεβάσει.

Απότι  κατάλαβα το λάθος ήταν ότι ετρεχα στο localhost:4200  που είνια η angular  και πήγαινα σε φάκελο που έτρεχε το node. Ναι είμαι χαζός . Ευχαριστώ όλους για την βοήθεια.

Σωστά σκέφτηκες να φτιάξεις τα routes σου αλλά δε θα σε βολέψει για επόμενα αρχεία γιατί θα πρέπει να δημιουργείς νέο route για κάθε νέο pdf αρχείο που θες να κατεβάζει ο χρήστης μελλοντικά (σύμφωνα με τα screenshots σου).

Καλύτερα να κάνεις ένα και ενιαίο  rule στο route σου και επίσης να χρησιμοποιήσεις το res.download (αν έχεις express 4.8.0+) ώστε να μη χρειάζεται να βάζεις το download στα href σου

Ενδεικτικά και τροποποιείς κατά το δοκούν αναλόγως που βρίσκονται τα paths, τα views και τα urls σου

yourRouteFile.js -  στο παράδειγμα είναι αν έχεις τα routes σου δομημένα σε ξεχωριστά αρχεία (όπως και πρέπει) και όχι χύμα στο app.js

router.get('/pdf/:name', function(req, res, next) {
	res.download('./upload/' + req.params.name)
})

HTML

<a href="http://localhost:3000/pdf/testA.pdf">Download pdf A</a>
<a href="http://localhost:3000/pdf/testB.pdf">Download pdf B</a>
<a href="http://localhost:3000/pdf/testC.pdf">Download pdf C</a>

Αυτά ισχύουν με την παραπάνω τοποθέτηση του upload folder, αν έχεις διαφορετική τότε αλλάζεις paths & urls όπως προανέφερα

Επίσης αν το ανεβάσεις στον αέρα τότε τα href="http://localhost:3000" προφανώς και δε θα δουλεύουν, πρέπει να δίνεις paths.

Επεξ/σία 7 Μαΐου 2018 από The King
διόρθωση

[sma0900029]

3 ώρες πριν, The King είπε

Σωστά σκέφτηκες να φτιάξεις τα routes σου αλλά δε θα σε βολέψει για επόμενα αρχεία γιατί θα πρέπει να δημιουργείς νέο route για κάθε νέο pdf αρχείο που θες να κατεβάζει ο χρήστης μελλοντικά (σύμφωνα με τα screenshots σου).

Καλύτερα να κάνεις ένα και ενιαίο  rule στο route σου και επίσης να χρησιμοποιήσεις το res.download (αν έχεις express 4.8.0+) ώστε να μη χρειάζεται να βάζεις το download στα href σου

Ενδεικτικά και τροποποιείς κατά το δοκούν αναλόγως που βρίσκονται τα paths, τα views και τα urls σου

yourRouteFile.js -  στο παράδειγμα είναι αν έχεις τα routes σου δομημένα σε ξεχωριστά αρχεία (όπως και πρέπει) και όχι χύμα στο app.js

router.get('/pdf/:name', function(req, res, next) {
	res.download('./upload/' + req.params.name)
})

HTML

<a href="http://localhost:3000/pdf/testA.pdf">Download pdf A</a>
<a href="http://localhost:3000/pdf/testB.pdf">Download pdf B</a>
<a href="http://localhost:3000/pdf/testC.pdf">Download pdf C</a>

Αυτά ισχύουν με την παραπάνω τοποθέτηση του upload folder, αν έχεις διαφορετική τότε αλλάζεις paths & urls όπως προανέφερα

Επίσης αν το ανεβάσεις στον αέρα τότε τα href="http://localhost:3000" προφανώς και δε θα δουλεύουν, πρέπει να δίνεις paths.

Πολύ σωστός τι να πω χίλια ευχαριστώ δεν έχω λόγια να είσαι καλα