Нужно скачать таблицу в формате изображения (HTML + JS)

Question

у меня такое задание, нужно ввести значения в таблицу и после скачать ее по кнопке. Трудность вызывает именно скачивание. Думаю сделать через скриншот области, но как скачать получившийся скриншот не знаю, да и в принципе не уверенна в рациональности моего метода. Просто "главное чтобы работало" сказал мой препод. На данные момент у меня все работает нормально кроме кнопки "скачать", по ее нажатию выводится получившийся скриншот.

Код выложу полностью, если нужно дополнительные сведенья по заданию скажите, я просто уже мягко говоря за... задолбалась. Заранее благодарю.

подключенный файл: https://drive.google.com/file/d/1uFnsn-ZfJbZ6P9hKgn1l0sMhsEaLi3gf/view?usp=sharing

сам код (полностью):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Задание</title>
  <style>
    .box {
      width: 800px;
      height: 600px;
      border: 3px solid #0B61A4;
    }
    
    .left {
      width: 380px;
      margin-left: 10px;
      float: left;
    }
    
    .right {
      width: 380px;
      margin-right: 10px;
      float: right;
    }
    
    .total {
      margin-top: 100px;
      display: none;
      width: 300px;
      height: 200px;
      background-color: #FFBB73;
      padding-left: 12px;
      padding-top: 8px;
      border-radius: 8px;
    }
    
    h1 {
      text-align: center;
      font-size: 20px;
    }
    
    p {
      font-size: 14px;
    }
    
    .battn {
      background-color: #FFAD40;
      color: #A65F00;
      padding: 1px 10px;
      border-radius: 8px;
    }
    
    .battn:hover {
      background-color: #A65F00;
      color: #FFAD40;
    }
    
    table {
      border: 1px solid #FFA240;
      width: 300px;
    }
    
    th {
      border: 1px solid #FFA240;
      width: 10px;
    }
    
    td {
      border: 1px solid #FFA240;
      width: 10px;
    }
  </style>
  <script type="text/javascript" src="html2canvas.js"></script>
</head>

<body>
  <div class="box">
    <h1>Система проверки</h1><br>
    <div class="left">
      <p>Вывести числа через пробел не более 5</p>
      <input type="text" id='demo1'>
      <p style='margin-left: 20px;'>
        <input class='battn' type="button" id='btn' value="Дальше" onclick="dalsheOneClick()">
        <input class='battn' type="button" id='btn' value="Записать" onclick="vvodOneClick()">
        <input class='battn' type="button" id='btn' value="Стереть" onclick='oneCearClick()'>
      </p>

      <p>Вывести числа через пробел не более 5</p>
      <input type="text" id='demo2'>
      <p style='margin-left: 20px;'>
        <input class='battn' type="button" id='btn' value="Дальше" onclick="dalsheTwoClick()">
        <input class='battn' type="button" id='btn' value="Записать" onclick="vvodTwoClick()">
        <input class='battn' type="button" id='btn' value="Стереть" onclick='twoCearClick()'>
      </p>

      <p>Вывести числа через пробел не более 5</p>
      <input type="text" id='demo3'>
      <p style='margin-left: 20px;'>
        <input class='battn' type="button" id='btn' value="Дальше" onclick="dalsheThreeClick()">
        <input class='battn' type="button" id='btn' value="Записать" onclick="vvodThreeClick()">
        <input class='battn' type="button" id='btn' value="Стереть" onclick='threeCearClick()'>
      </p>
      <p style='margin-top: 130px;'>
        <input class='battn' type="button" id='btn' value="Отобразить" onclick="totalClick()">
        <input class='battn' type="button" id='btn' value="Суммировать" onclick="summClick()">
        <input class='battn' type="button" id='btn' value="Сортировать" onclick="hzClick()">
        <p></p>
        <input class='battn' type="button" id='btn' value="Нечетные" onclick="nechetClick()">
        <input class='battn' type="button" id='btn' value="Четные" onclick="chetClick()">
        <input class='battn' type="button" id='btn' value="Очистить все" onclick="allClearClick()">
      </p>
    </div>

    <div class="right">
      <div id="content">
        <table>
          <tbody>
            <tr>
              <th colspan="6">Таблица итогов</td>
            </tr>
            <tr>
              <td>Массив 1</td>
              <td id='m11'></td>
              <td id='m12'></td>
              <td id='m13'></td>
              <td id='m14'></td>
              <td id='m15'></td>
            </tr>
            <tr>
              <td>Массив 2</td>
              <td id='m21'></td>
              <td id='m22'></td>
              <td id='m23'></td>
              <td id='m24'></td>
              <td id='m25'></td>
            </tr>
            <tr>
              <td>Массив 3</td>
              <td id='m31'></td>
              <td id='m32'></td>
              <td id='m33'></td>
              <td id='m34'></td>
              <td id='m35'></td>
            </tr>
            <tr>
              <td>Сумма</td>
              <td id='m41'></td>
              <td id='m42'></td>
              <td id='m43'></td>
              <td id='m44'></td>
              <td id='m45'></td>
            </tr>
          </tbody>
        </table>
      </div>
      <br>
      <input class='battn' type="button" id='get_images' value="Сохранить" href="javascript: void(0);" style='margin-left: 210px;'>
      <p id="result"></p>

      <div class="total" id='total' onclick="totalClick()">
        <p id='t1'>Сумма: </p>
        <p id='t2'>Массивы: </p>
        <p id='t3'>Сортировано: </p>
        <p id='t4'>Нечетные: </p>
        <p id='t5'>Четное: </p>
      </div>
    </div>
  </div>

  <script>
    //СКРИН
    window.onload = function() {
      document.getElementById("get_images").onclick = function() {
        html2canvas(document.getElementById("content")).then(function(canvas) {
          var my_screen = canvas;
          document.getElementById("result").appendChild(my_screen);
        });
      };
    }

    document.getElementById('demo1').disabled = false;
    document.getElementById('demo2').disabled = true;
    document.getElementById('demo3').disabled = true;

    //ДАЛЕЕ
    function dalsheOneClick() {
      document.getElementById('demo1').disabled = true;
      document.getElementById('demo2').disabled = false;
      document.getElementById('demo3').disabled = true;
    }

    function dalsheTwoClick() {
      document.getElementById('demo1').disabled = true;
      document.getElementById('demo2').disabled = true;
      document.getElementById('demo3').disabled = false;
    }

    function dalsheThreeClick() {
      document.getElementById('demo1').disabled = false;
      document.getElementById('demo2').disabled = true;
      document.getElementById('demo3').disabled = true;
    }

    //ЗАПИСЬ
    function vvodOneClick() {
      var mass1 = document.getElementById('demo1').value;
      var m1 = mass1.split(' ').concat([0, 0, 0, 0, 0]);
      var mass2 = document.getElementById('demo2').value;
      var m2 = mass2.split(' ').concat([0, 0, 0, 0, 0]);
      var mass3 = document.getElementById('demo3').value;
      var m3 = mass3.split(' ').concat([0, 0, 0, 0, 0]);
      var mass4 = [];
      for (let i = 0; i < 5; i++) {
        mass4[i] = Number(m1[i]) + Number(m2[i]) + Number(m3[i]);
      }
      for (let i = 0; i < 5; i++) {
        if (i == 0) {
          m11.innerHTML = Number(m1[i]) + 0;
        } else if (i == 1) {
          m12.innerHTML = Number(m1[i]) + 0;
        } else if (i == 2) {
          m13.innerHTML = Number(m1[i]) + 0;
        } else if (i == 3) {
          m14.innerHTML = Number(m1[i]) + 0;
        } else {
          m15.innerHTML = Number(m1[i]) + 0;
        }
      }
      m41.innerHTML = mass4[0];
      m42.innerHTML = mass4[1];
      m43.innerHTML = mass4[2];
      m44.innerHTML = mass4[3];
      m45.innerHTML = mass4[4];
    }

    function vvodTwoClick() {
      var mass1 = document.getElementById('demo1').value;
      var m1 = mass1.split(' ').concat([0, 0, 0, 0, 0]);
      var mass2 = document.getElementById('demo2').value;
      var m2 = mass2.split(' ').concat([0, 0, 0, 0, 0]);
      var mass3 = document.getElementById('demo3').value;
      var m3 = mass3.split(' ').concat([0, 0, 0, 0, 0]);
      var mass4 = [];
      for (let i = 0; i < 5; i++) {
        mass4[i] = Number(m1[i]) + Number(m2[i]) + Number(m3[i]);
      }

      for (let i = 0; i < 5; i++) {
        if (i == 0) {
          m21.innerHTML = Number(m2[i]) + 0;
        } else if (i == 1) {
          m22.innerHTML = Number(m2[i]) + 0;
        } else if (i == 2) {
          m23.innerHTML = Number(m2[i]) + 0;
        } else if (i == 3) {
          m24.innerHTML = Number(m2[i]) + 0;
        } else {
          m25.innerHTML = Number(m2[i]) + 0;
        }
      }
      m41.innerHTML = mass4[0];
      m42.innerHTML = mass4[1];
      m43.innerHTML = mass4[2];
      m44.innerHTML = mass4[3];
      m45.innerHTML = mass4[4];
    }

    function vvodThreeClick() {
      var mass1 = document.getElementById('demo1').value;
      var m1 = mass1.split(' ').concat([0, 0, 0, 0, 0]);
      var mass2 = document.getElementById('demo2').value;
      var m2 = mass2.split(' ').concat([0, 0, 0, 0, 0]);
      var mass3 = document.getElementById('demo3').value;
      var m3 = mass3.split(' ').concat([0, 0, 0, 0, 0]);
      var mass4 = [];
      for (let i = 0; i < 5; i++) {
        mass4[i] = Number(m1[i]) + Number(m2[i]) + Number(m3[i]);
      }

      for (let i = 0; i < 5; i++) {
        if (i == 0) {
          m31.innerHTML = Number(m3[i]) + 0;
        } else if (i == 1) {
          m32.innerHTML = Number(m3[i]) + 0;
        } else if (i == 2) {
          m33.innerHTML = Number(m3[i]) + 0;
        } else if (i == 3) {
          m34.innerHTML = Number(m3[i]) + 0;
        } else {
          m35.innerHTML = Number(m3[i]) + 0;
        }
      }
      m41.innerHTML = mass4[0];
      m42.innerHTML = mass4[1];
      m43.innerHTML = mass4[2];
      m44.innerHTML = mass4[3];
      m45.innerHTML = mass4[4];
    }

    //СТЕРЕТЬ
    function oneCearClick() {
      demo1.value = '';
    }

    function twoCearClick() {
      demo2.value = '';
    }

    function threeCearClick() {
      demo3.value = '';
    }

    //СУММИРОВАТЬ
    function summClick() {
      var mass1 = document.getElementById('demo1').value;
      var m1 = mass1.split(' ').concat([0, 0, 0, 0, 0]);
      var mass2 = document.getElementById('demo2').value;
      var m2 = mass2.split(' ').concat([0, 0, 0, 0, 0]);
      var mass3 = document.getElementById('demo3').value;
      var m3 = mass3.split(' ').concat([0, 0, 0, 0, 0]);
      var mass4 = [];
      for (let i = 0; i < 5; i++) {
        mass4[i] = Number(m1[i]) + Number(m2[i]) + Number(m3[i]);
      }
      t1.innerHTML += Number(mass4[0]) + Number(mass4[1]) + Number(mass4[2]) + Number(mass4[3]) + Number(mass4[4]);
    }

    //СОРТИРОВАТЬ
    function hzClick() {
      t3.innerHTML += 'Я не знаю что это и зачем';
    }

    //НЕЧЕТНЫЕ
    function nechetClick() {
      var mass1 = document.getElementById('demo1').value;
      var m1 = mass1.split(' ').concat([0, 0, 0, 0, 0]);
      var mass2 = document.getElementById('demo2').value;
      var m2 = mass2.split(' ').concat([0, 0, 0, 0, 0]);
      var mass3 = document.getElementById('demo3').value;
      var m3 = mass3.split(' ').concat([0, 0, 0, 0, 0]);
      var o = 0;
      var t = 0;
      var th = 0;
      for (let i = 0; i < 5; i++) {
        if (m1[i] % 2 != 0) {
          o += 1;
        }
        if (m2[i] % 2 != 0) {
          t += 1;
        }
        if (m3[i] % 2 != 0) {
          th += 1;
        }
      }
      var f = o + t + th;
      t4.innerHTML += f;
    }

    //ЧЕТНЫЕ
    function chetClick() {
      var mass1 = document.getElementById('demo1').value;
      var m1 = mass1.split(' ').concat([0, 0, 0, 0, 0]);
      var mass2 = document.getElementById('demo2').value;
      var m2 = mass2.split(' ').concat([0, 0, 0, 0, 0]);
      var mass3 = document.getElementById('demo3').value;
      var m3 = mass3.split(' ').concat([0, 0, 0, 0, 0]);
      var o = 0;
      var t = 0;
      var th = 0;
      for (let i = 0; i < 5; i++) {
        if ((m1[i] % 2 == 0) && (m1[i] != 0)) {
          o += 1;
        }
        if ((m2[i] % 2 == 0) && (m2[i] != 0)) {
          t += 1;
        }
        if ((m3[i] % 2 == 0) && (m3[i] != 0)) {
          th += 1;
        }
      }
      var f = o + t + th;
      t5.innerHTML += f;
    }

    //ОЧИСТИТЬ ВСЕ
    function allClearClick() {
      demo1.value = ''; //input
      demo2.value = '';
      demo3.value = '';
      m11.innerHTML = ''; //table
      m12.innerHTML = '';
      m13.innerHTML = '';
      m14.innerHTML = '';
      m15.innerHTML = '';
      m21.innerHTML = '';
      m22.innerHTML = '';
      m23.innerHTML = '';
      m24.innerHTML = '';
      m25.innerHTML = '';
      m31.innerHTML = '';
      m32.innerHTML = '';
      m33.innerHTML = '';
      m34.innerHTML = '';
      m35.innerHTML = '';
      m41.innerHTML = '';
      m42.innerHTML = '';
      m43.innerHTML = '';
      m44.innerHTML = '';
      m45.innerHTML = '';
      t1.innerHTML = 'Сумма: '; //total
      t2.innerHTML = 'Массивы: ';
      t3.innerHTML = 'Сортированно: ';
      t4.innerHTML = 'Нечетные: ';
      t5.innerHTML = 'Четные: ';
    }

    //ОТОБРАЗИТЬ
    function totalClick() {
      document.getElementById('total').style.display = 'block';
    }
  </script>
</body>

</html>

Answer 1

const nextbtns = document.querySelectorAll(".btn-next");
    const writbtns = document.querySelectorAll(".btn-write");
    const delebtns = document.querySelectorAll(".btn-delete");
    const value_tr = document.querySelectorAll(".array-tr");
    const sum_tr   = document.querySelector(".array-tr-sum");
    const res      = document.querySelector(".result");

    for(let i = 0; i < nextbtns.length; i++){
        nextbtns[i].addEventListener("click", nextInputAvaible);
        writbtns[i].addEventListener("click", setArrayValue);
        delebtns[i].addEventListener("click", delArrayValue);
    }

    function nextInputAvaible(){
        let input = this.parentElement;
        let parent = this.parentElement.parentElement;
        let nextElem = this.parentElement.nextElementSibling;
        input.children[1].setAttribute("disabled", "disabled");
        input.children[2].setAttribute("disabled", "disabled");
        input.children[3].setAttribute("disabled", "disabled");
        input.children[4].setAttribute("disabled", "disabled");
        if(nextElem != null){
            nextElem.children[1].removeAttribute("disabled");
            nextElem.children[2].removeAttribute("disabled");
            nextElem.children[3].removeAttribute("disabled");
            nextElem.children[4].removeAttribute("disabled");
        }
        else{
            parent.children[0].children[1].removeAttribute("disabled");
            parent.children[0].children[2].removeAttribute("disabled");
            parent.children[0].children[3].removeAttribute("disabled");
            parent.children[0].children[4].removeAttribute("disabled");
        }
    }

    function setArrayValue(){
        var arrayValue = [];
        let temp = this.parentElement.children[1].value;
        let num = Array.prototype.indexOf.call(this.parentNode.parentNode.children, this.parentNode);
        arrayValue = temp.split(" ");

        checkArray(arrayValue, num);
        sumArray(arrayValue, num);
    }

    function delArrayValue(){
        let num = Array.prototype.indexOf.call(this.parentNode.parentNode.children, this.parentNode);

        for(let i = 1; i < value_tr[num].children.length; i++)
            value_tr[num].children[i].innerHTML = "";
        sumArray(num);
    }

    function checkArray(array, num){
        if(array.length != 5){
            alert("Ошибка");
            return;
        }

        for(let i = 0; i < array.length; i++){
            if(isNaN(parseFloat(array[i]))){
                alert("Ошибка");
                return;
            }else
            value_tr[num].children[i+1].innerHTML = array[i];
        }
    }

    function sumArray(num){
        let sum = [0, 0, 0, 0, 0];
        for(let i = 0; i < sum.length; i++){
            for(let j = 0; j < value_tr.length; j++){
                let temp = parseFloat(value_tr[j].children[i + 1].innerHTML);
                if(!isNaN(temp)) sum[i] += temp;
                sum_tr.children[i + 1].innerHTML = sum[i];
            }
        }
    }

    function showResult(){
        res.classList.add("show");
    }

    function showSum(){
        let elem = document.getElementById("sum"), sum = 0;
        elem.innerHTML = "";

        for(let i = 1; i < sum_tr.children.length; i++){
            sum += parseFloat(sum_tr.children[i].innerHTML);
        }
        elem.innerHTML = sum;
    }

    function showOdd(){
        let elem = document.getElementById("odd"), aux = 0;
        elem.innerHTML = "";

        for(let i = 0; i < value_tr.length; i++){
            for(let j = 1; j < value_tr[0].children.length; j++){
                let temp = value_tr[i].children[j].innerHTML;
                if(temp % 2 == 0 && temp != null && temp != ""){
                    elem.innerHTML += temp + " ";
                }
            }
        }
    }

    function showEven(){
        let elem = document.getElementById("even"), aux = 0;
        elem.innerHTML = "";

        for(let i = 0; i < value_tr.length; i++){
            for(let j = 1; j < value_tr[0].children.length; j++){
                let temp = value_tr[i].children[j].innerHTML;
                if(temp % 2 != 0 && temp != null && temp != ""){
                    elem.innerHTML += temp + " ";
                }
            }
        }
    }

    function clearAll(){
        location.reload(true);
    }

    function saveTable(){;
        var link = document.getElementById("link");
        html2canvas(document.getElementById("table"), {
            onrendered: function(canvas) {
                var img = canvas.toDataURL("image/png");
                link.insertAdjacentHTML('afterBegin', '<button class="btn"><a download="test.jpeg" href="' + img + '">Скачать</a></button>');
            }
        });
    }

body{
        margin: 0;
        width: 100%;
        min-height: 100vh;
    }

    .container{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .table-block{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .table{
        margin: 0;
        padding: 0;
        border: 1px solid #000;
    }

    .table td{
        border: 1px solid #000;
        padding: 6px 12px;
    }

    .operation-block{
        margin: 24px;
    }

    td{
        text-align: center;
        min-width: 32px;
    }

    .btn{
        background-color: #fff;
        border-color: #000;
        cursor: pointer;
        transition: .25s;
    }

    .btn,
    input{
        padding: 4px 12px;
    }

    .btn:hover{
        background-color: #000;
        color: #fff;
    }

    .result{
        display: none;
    }

    .show{
        display: block;
    }

    .btn a{
        text-decoration: none;
        text-align: #000;
    }

<div class="container">
    <div class="table-block">
        <div class="operation">
            <div class="operation-block">
                <p>Первый массив</p>
                <input type="text" id="first-row">
                <button class="btn btn-next">Дальше</button>
                <button class="btn btn-write">Записать</button>
                <button class="btn btn-delete">Стереть</button>
            </div>

            <div class="operation-block">
                <p>Второй массив</p>
                <input type="text" id="second-row" disabled>
                <button class="btn btn-next" disabled>Дальше</button>
                <button class="btn btn-write" disabled>Записать</button>
                <button class="btn btn-delete" disabled>Стереть</button>
            </div>

            <div class="operation-block">
                <p>Третий массив</p>
                <input type="text" id="third-row" disabled>
                <button class="btn btn-next" disabled>Дальше</button>
                <button class="btn btn-write" disabled>Записать</button>
                <button class="btn btn-delete" disabled>Стереть</button>
            </div>
        </div>

        <table class="table" id="table">
            <tr>
                <td colspan="6" align="center"><b>Таблица</b></td>
            </tr>
            <tr class="array-tr" id="first-row-tr">
                <td>Массив 1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

            <tr class="array-tr" id="second-row-tr">
                <td>Массив 2</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

            <tr class="array-tr" id="third-row-tr">
                <td>Массив 3</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

            <tr class="array-tr-sum">
                <td>Сумма</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>

    <div class="result-block" id="link">
        <button class="btn" onclick="showResult()">Отобразить</button>
        <button class="btn" onclick="showSum()">Суммировать</button>
        <button class="btn" onclick="showSort()">Сортировать</button>
        <button class="btn" onclick="showOdd()">Нечетные</button>
        <button class="btn" onclick="showEven()">Четные</button>
        <button class="btn" onclick="clearAll()">Очистить все</button>
        <button class="btn" onclick="saveTable()">Скачать</button>
        <div class="result">
            <p>Сумма : <span id="sum"></span></p>
            <p>Массивы : <span id="masiv"></span></p>
            <p>Сортировано : <span id="sort"></span></p>
            <p>Нечетные : <span id="odd"></span></p>
            <p>Четное : <span id="even"></span></p>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"></script>

БЛОГ НА HUSL

Нужно скачать таблицу в формате изображения (HTML + JS)

Ответы (1 шт):