Создайте текстовый отчет с помощью JavaScript и HTML

Я написал код HTML\JavaScript. HTML-страница, получающая три сведения от конечного пользователя. На основе ввода пользователя я хочу, чтобы javascript генерировал номера штрих-кода и загружал отчет в виде текстового файла. Здесь переменная «B12» — это номер штрих-кода.

Код показан здесь:

const AL = document.getElementById("N1").value;

var to      = Number(document.getElementById("N3").value);
var i       = 1
var barcode = "1" + document.getElementById("N2").value;

while (i < to) {
  const myArray = barcode.split("");
  let B1  = myArray[1] * 8
  let B2  = myArray[2] * 6
  let B3  = myArray[3] * 4
  let B4  = myArray[4] * 2
  let B5  = myArray[5] * 3
  let B6  = myArray[6] * 5
  let B7  = myArray[7] * 9
  let B8  = myArray[8] * 7
  let B9  = B1 + B2 + B3 + B4 + B5 + B6 + B7 + B8
  let B10 = B9 % 11
  let B11 = 11 - B10
  B11 = B11 === 10 ? '0' : B11;
  B11 = B11 === 11 ? '5' : B11;
  rem = barcode.substring(1);
  let B12 = AL + rem + B11 + "IN"
  i++;
  barcode++;
}
<form id = "my-form">

  <label for = "T1">BARCODE FIRST TWO CHARATER</label><br><br>
  <input type = "" text " maxlength = "2 " onkeyup = "this.value=t his.value.toUpperCase(); " id = "N1 " onchange = "validity.valid||(value='' ) " required> <br><br>
                                                                                                                                  
   <label for = "T2 ">Barode Starting Eight Numbers:</label><br><br>
   <input type = "text " pattern = "[0-9]{8} " maxlength = "8 " onchange = "validity.valid||(value='' ) " id = "N2 " required ><br><br> 
                                                                                                    
    <label for = "T3 ">Number of Barcode (Max 1000):</label><br><br>
<input type = "number "  id = "N3 " min = "1 " max = "1000 " onchange = "validity.valid||(value='' ) "  required ><br><br>    
                                                                                                                    
<center><button type = "submit " name = "myButton ">Submit</button></center>
                                                                                                    
</form>

Я хочу, чтобы этот цикл javascript генерировал отчет со значением переменной «B12» и загружал его в виде текстового файла, пока пользователь нажимал кнопку отправки. Пожалуйста помогите в деле.

Этот вопрос отвечает на ваш?

Lakshya Raj 20.11.2022 16:49

Я читал, но это не объясняет, что мне нужно.

Arjun Khandwani 20.11.2022 17:12

Мне все кажется неправильным в вашем коде, вы смешиваете числовые значения со строками, ваши переменные имеют абстрактные имена и т. д. Я хотел бы вам помочь, но я ничего не понимаю в вашей логике генерации, даже после некоторых исследований в Интернете. Штрих-коды...

Mister Jojo 20.11.2022 18:52

@MisterJojo Здесь мой требуемый штрих-код содержит 13 буквенно-цифровых цифр (2 + 9 + 2). Пример: RG777777784IN RG777777798IN. Здесь первые два алфавита — это тип статьи, а последние два алфавита — это код страны. Теперь числовое значение, имеющее от третьего до одиннадцатого числа. Это числовое значение, имеющее девять разрядов. Из девяти цифр первые восемь цифр, имеющих порядковый номер, и последняя цифра будут сгенерированы при вычислении, показанном здесь

Arjun Khandwani 21.11.2022 02:43

@MisterJojo Также, если девятое числовое значение равно 10, его следует изменить на 0, а если девятое числовое значение равно 11, его следует изменить на 5. Например: RG777777775IN и RG000044770IN

Arjun Khandwani 21.11.2022 02:46

@MisterJojo Теперь я хочу, чтобы пользователь ввел первый алфавит, восьмизначный штрих-код и необходимое количество штрих-кода. На основе этого значения загрузите текстовый файл со всеми этими номерами штрих-кода.

Arjun Khandwani 21.11.2022 04:14

Может ли 12 или 00000012 быть действительным Barode Starting Eight Numbers:?

Mister Jojo 21.11.2022 04:24

@MisterJojo Да, 00000012 также является действительным штрих-кодом. Поэтому я добавил 1 перед номером var barcode = "1" + document.getElementById("N2").value; И затем удалил его по коду ниже rem = barcode.substring(1);

Arjun Khandwani 21.11.2022 04:48
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
8
84
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Может быть, вы можете попробовать это ...

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Barcode Number Generaot</title>
<style>
  body {
    font-family : Arial, Helvetica, sans-serif;
    font-size   : 18px;
    }
  legend   { font-weight: bold; padding: 0 .8em; }
  fieldset { margin: 1em; width: 15em; }
  label, input, button, pre  { display: block; float: left; clear: both; margin-top: 0.2em; }
  label   { margin-top: 0.7em; font-size: .9em;}
  input   { text-align: center; }
  button  { margin-top: 2em; width: 6em; }
  fieldset button:last-of-type { clear: none; float: right; }
  pre { font-family: 'Courier New', Courier, monospace; font-size: 12px; margin: .8em;}
</style>
</head>
<body>
  <form id = "my-form" action = "#">
    <fieldset>
      <legend>BarCode</legend>
      <label>1st TWO characters</label> 
      <input name = "N1" type = "text" autocomplete = "off" pattern = "[A-Za-z0-9]{2}" required > 
      <label>1st Eight digits:</label> 
      <input name = "N2" type = "number" min = "1" max = "99999998" required > 
      <label>Number of Barcode (Max 1000):</label> 
      <input name = "N3" type = "number" min = "1" max = "10000" required value = "1">
      <button type = "reset">clear</button>
      <button type = "submit">generate</button>
    </fieldset>
  </form>
  <label>Generated BarCodes:</label>
  <pre id = "BC-genered"></pre>
<script>
  const
    CRcode = `\n` // carriage return
  , writeToTextFile = (text, fileName) => 
      {
      let textFile = null;
      const makeTextFile = (text) => 
        {
        const data = new Blob([text], { type: 'text/plain' });
        if (textFile !== null) 
          {
          window.URL.revokeObjectURL(textFile);
          }
        textFile = window.URL.createObjectURL(data);
        return textFile;
        };
      let link = document.createElement('a');
      link.setAttribute('download', fileName);
      link.href = makeTextFile(text);
      link.click();
      }
  , BCgen  = document.querySelector('#BC-genered')
  , myForm = document.querySelector('#my-form')
  , digtsM = [8,6,4,2,3,5,9,7]
    ;
  myForm.N1.oninput = () =>
    {
    myForm.N1.value = myForm.N1.value.toUpperCase();
    if (myForm.N1.value.length > 2)
      myForm.N1.value = myForm.N1.value[0] + myForm.N1.value[2];
    }
  myForm.N3.oninput = () =>
    {
    let N2_max = 99999999 - myForm.N3.valueAsNumber;
    if ( myForm.N2.valueAsNumber > N2_max)
      myForm.N2.valueAsNumber = N2_max;
    myForm.N2.max = N2_max;
    }
  myForm.onreset = () =>
    {
    BCgen.textContent = '';
    }
  myForm.onsubmit = e =>
    {
    e.preventDefault()  // disable submit (no page reloading in this case)
    BCgen.textContent = '';

    let B_1_8_CodeN = myForm.N2.valueAsNumber;

    for (let i=myForm.N3.valueAsNumber; i--;)
      {
      let 
        Bcode = B_1_8_CodeN.toString(10).padStart(8, '0')
      , B11 = 11 - ([...Bcode].map((x,i)=> x *digtsM[i]).reduce((sum,v)=>sum+v) % 11)
        ;
      B11 = (B11 === 10) ? 0 : ( B11 === 11) ? 5 : B11;

      BCgen.textContent += myForm.N1.value
                                + Bcode
                                + B11
                                + 'IN'
                                + CRcode; 
      B_1_8_CodeN++;         
      }
    writeToTextFile(BCgen.textContent, `${myForm.N3.value}_Barcodes_${myForm.N1.value}_${myForm.N2.value}.txt`);            
    }
</script>
</body>
</html>

Другие вопросы по теме