How to set download url in a table row

Question

I've this javascript function that takes the ajax call's result and build a html table with it. This table rapresents list of reports.

Each row of a table is composed by report's filename and date of creation, and when I click over it a new browser page is opened showing me the document. But I want to download it. How can I get it?

Code:

function report_call(){

    $.ajax({
        type: 'GET',
        url: "/rest/v2/reports/",
        dataType: 'json',
        success: function (data) {
            $("#modal-body").html('')
            const YOURREPORTS_ROW = "yourReportRow";
            const YOURREPORTS_TABLE = "yourReports-table-content";
            let table = $(`#${YOURREPORTS_TABLE}`);

            table.html('')
            for(const key in data) {

                if(data[key].length == 0){
                    continue
                }

                data[key].forEach(report_type => {

                    let url = report_type[2]  // take file url

                    let fname = report_type[0];
                    let fname_td = $(`<td>${fname}</td>`);

                    let date = report_type[1];
                    let date_td = $(`<td>${date}</td>`);

                    let onclick = "";

                    if(url !== ""){
                        onclick = `onclick="window.open('${url}', '_blank');"`;
                    }

                    let row = $(`<tr class="${YOURREPORTS_ROW}" [data-file="${fname}"] data-date="${date}" ${onclick}>`);
                    row.append(fname_td);
                    row.append(date_td);

                    table.append(row);
                    })
                }
            }
    })
}

On the web I read that I can use "download" keyword in tag , but here the situation is different. I try in this way, it does not work.

Sorry for the ignorance.

Answer 1

Use an anchor tag with download attribute like below. You can also add another td for the download link. Remove the onClick event in row.

let date_td = $(`<td>${date} <a href=${url} download>Download</a></td>`);