Download file not appear using jQuery

Question

There are two objectives that I want, 1st is to hide the URL when mouse hover (Success). 2nd is to download the file when <a> is clicked.

Current problem is when I click at the <a> tag, an error appear.

My Reference

What I have tried as below:

console when click at Download

At Inspect > Element:

Code:

$('#myTable').DataTable({
    ...
    columns: [
        { data : "filename",
            render: function (data){
                var test = 'uploads/upload_file/'+filename;
                console.log(test); // I got uploads/upload_file/TEST 1.pdf
                return "<a href='javascript:void(0)' onclick='location.href="+test+"'>Download</a>"
            }
        },
    ],
});

Your error is because of last `+` in your render function `return "" +` statement. To hide url, put redirect same way as you do with `TEST 1.pdf` — Justinas, Mar 18 '21 at 07:25
I've update the posting, already remove `+` and still no download triggered. For the hide url is success. — mastersuse, Mar 18 '21 at 07:33

score 0 · Answer 1 · edited Mar 18 '21 at 08:40

Finally, I solved by try this solution.

THE ANSWER

Create a php file called file_download.php

header('Content-Type: application/octet-stream'); header('Content-Disposition: attachment; filename='.$_REQUEST['f']); readfile('uploads/upload_file/'.$_REQUEST['f']); exit;

Put this in jQuery function

function downloadFile(filename){ window.location.href = 'file_download.php?f='+ filename; }

Download file not appear using jQuery

1 Answers1