загрузить файл Excel и загрузить его в таблицу html

Question

Мне нужна помощь с загрузкой файла Excel (.xlsx) и отображением всех значений в таблице html, я не могу понять это. Я могу загрузить его только в том случае, если файл Excel уже находится в папке проекта, а также когда файл загружается в таблицу, его необходимо редактировать на столе. Если можно также, как скачать html таблицы в файл Excel. извините за мой плохой английский sh.

HTML коды:

<table id="tabledata" border=1>
<tr><td>X</td><td>Y</td><td></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX1"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY1"></td><td><button onclick="remove(1)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX2"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY2"></td><td><button onclick="remove(2)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX3"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY3"></td><td><button onclick="remove(3)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX4"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY4"></td><td><button onclick="remove(4)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX5"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY5"></td><td><button onclick="remove(5)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX6"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY6"></td><td><button onclick="remove(6)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX7"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY7"></td><td><button onclick="remove(7)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX8"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY8"></td><td><button onclick="remove(8)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX9"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY9"></td><td><button onclick="remove(9)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX10"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY10"></td><td><button onclick="remove(10")>Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX11"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY11"></td><td><button onclick="remove(11)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX12"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY12"></td><td><button onclick="remove(12)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX13"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY13"></td><td><button onclick="remove(13)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text" onkeyup="" id="dataX14"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY14"></td><td><button onclick="remove(14)">Remove</button></td></tr>
<tr><td class="tabledatacell"><input type="text"onkeyup=""  id="dataX15"></td><td class="tabledatacell"><input type="text" onkeyup="" id="dataY15"></td><td><button onclick="remove(15)">Remove</button></td></tr>
</table>
</td></tr>
</table>

<form id="upload"><input type="file" id="fileSelect" accept=".xlsx, .xls, .csv"/>
<button onclick="">Upload</button>
</form>

javascript коды:

$('#upload').on('submit', function(e){
    e.preventDefault();
    $.ajax({
        url: 'http://127.0.0.1:5000/upload/',
        data: {},
        method: 'POST',
        success: function(data) {
            var arrayX = [];
            var arrayY = [];
            var shape = "";
            var i;
            for (i = 1; i < 16; i++) {
            var Xdata = "X" + String(i)
            var Ydata = "Y" + String(i)
            arrayX.push(Xdata)
            arrayY.push(Ydata)
            var checkX = data[arrayX[i-1]]
            var checkY = 500 - data[arrayY[i-1]]
            var datatextX = "dataX" + String(i)
            var datatextY = "dataY" + String(i)
            var bug = 0
            if (checkX == null) {
                checkX = ""
                bug = 1
            }
            if (checkY == null) {
                checkY = ""
                bug = 1
            }
            if (bug == 1){
                shape += ""
            } else if (i == 1) {
                shape += checkX + ", " + checkY
                document.getElementById(datatextX).value = checkX
                document.getElementById(datatextY).value = 500 - checkY
            } else if (i < 15){
                shape += ", " + checkX + ", " + checkY
                document.getElementById(datatextX).value = checkX
                document.getElementById(datatextY).value = 500 - checkY
            }
            }
            //shape = data[arrayX[0]] + ", " + data[arrayY[0]]
            $('#uploadtxt').html(shape)
            var elem = document.getElementById('edit-star');
            elem.setAttribute("points", shape);
            let sns='http://www.w3.org/2000/svg',
            xns='http://www.w3.org/1999/xlink',
            root = document.getElementById('svg-edit-demo'),
            star = document.getElementById('edit-star'),
            rootMatrix,
            originalPoints = [],
            transformedPoints = [];
            for (let i = 0, len = star.points.numberOfItems; i < len; i++, numPoint+=1) {
               let handle = document.createElementNS(sns, 'use'),
               point = star.points.getItem(i),
               newPoint = root.createSVGPoint();

               handle.setAttributeNS(xns, 'href', uniqueClass);
               handle.setAttribute('class', uniqueID);

               handle.x.baseVal.value = newPoint.x = point.x;
               handle.y.baseVal.value = newPoint.y = point.y;

               handle.setAttribute('data-index', numPoint)

               originalPoints.push(newPoint)

               root.appendChild(handle);
             }
        }
    });
});

и мои python коды:

import openpyxl
from flask import jsonify


@app.route('/upload/', methods=['POST'])
def upload():
    book = openpyxl.load_workbook('Sample.xlsx') #read'Sample.xlsx'
    sheet = book.active #read
    X1 = sheet.cell(row=1, column=1) #read
    X2 = sheet.cell(row=2, column=1) #read
    X3 = sheet.cell(row=3, column=1) #read
    X4 = sheet.cell(row=4, column=1) #read
    X5 = sheet.cell(row=5, column=1) #read
    X6 = sheet.cell(row=6, column=1) #read
    X7 = sheet.cell(row=7, column=1) #read
    X8 = sheet.cell(row=8, column=1) #read
    X9 = sheet.cell(row=9, column=1) #read
    X10 = sheet.cell(row=10, column=1) #read
    X11 = sheet.cell(row=11, column=1) #read
    X12 = sheet.cell(row=12, column=1) #read
    X13 = sheet.cell(row=13, column=1) #read
    X14 = sheet.cell(row=14, column=1) #read
    X15 = sheet.cell(row=15, column=1) #read

    Y1 = sheet.cell(row=1, column=2) #read
    Y2 = sheet.cell(row=2, column=2) #read
    Y3 = sheet.cell(row=3, column=2) #read
    Y4 = sheet.cell(row=4, column=2) #read
    Y5 = sheet.cell(row=5, column=2) #read
    Y6 = sheet.cell(row=6, column=2) #read
    Y7 = sheet.cell(row=7, column=2) #read
    Y8 = sheet.cell(row=8, column=2) #read
    Y9 = sheet.cell(row=9, column=2) #read
    Y10 = sheet.cell(row=10, column=2) #read
    Y11 = sheet.cell(row=11, column=2) #read
    Y12 = sheet.cell(row=12, column=2) #read
    Y13 = sheet.cell(row=13, column=2) #read
    Y14 = sheet.cell(row=14, column=2) #read
    Y15 = sheet.cell(row=15, column=2) #read


    data = {"X1": X1.value, "X2": X2.value, "X3": X3.value, "X4": X4.value, "X5": X5.value, "X6": X6.value, "X7": X7.value, "X8": X8.value, "X9": X9.value, "X10": X10.value, "X11": X11.value, "X12": X12.value, "X13": X13.value, "X14": X14.value, "X15": X15.value, "Y1": Y1.value, "Y2": Y2.value, "Y3": Y3.value, "Y4": Y4.value, "Y5": Y5.value, "Y6": Y6.value, "Y7": Y7.value, "Y8": Y8.value, "Y9": Y9.value, "Y10": Y10.value, "Y11": Y11.value, "Y12": Y12.value, "Y13": Y13.value, "Y14": Y14.value, "Y15": Y15.value}
    data = jsonify(data)
    return data