JS-виджет

JS-виджет Скапибары позволяет с легкостью реализовать функционал сканирования документов в своих собственных веб-приложениях.

Установка виджета

Для установки виджета на сайт добавьте скрипт на страницу:

<script src="https://widget.scapy.ru/widget.js"></script>

При инициализации скрипт добавляет экземпляр класса Scapy в window.Scapy.

Использование

Процесс сканирования документов аналогичен процессу при использовании расширения для браузера.

В случае использования JS-виджета наличие расширения для браузера не требуется.

Методы виджета

Scapy.run(options)

Функция открывает форму сканирования.

Описание объекта options:

target - элемент DOM в который будет добавлен виджет (по-умолчанию открывается в окне, которое монтируется в body)
handleFiles - обработчик загрузки файлов
handleClose - обработчик закрытия

Scapy.runForInput(options, input)

Функция открывает форму сканирования для конкретного input.

При загрузке результата сканирования эмитирует выбор файлов в input.

При использовании этой функции обработчики handleFiles и handleClose не требуются.

Описание объекта options:

target - элемент DOM в который будет добавлен виджет (по-умолчанию открывается в окне, которое монтируется в body)

Scapy.close()

Функция закрывает форму сканирования.

Scapy.pushFilesToInput(input, files)

Функция эмитирует выбор файлов files в input.

Scapy.enableForAllFileInputs()

Функция включает перехват нажатий на все input с type="file".

При нажатии на любой input с type="file" будет открываться форма сканирования в окне.

Scapy.disableForAllFileInputs()

Функция отключает перехват нажатий на все input с type="file".

Отменяет действие функции Scapy.enableForAllFileInputs().

Пример использования на Vue.js

Установка скрипта

Добавьте следующий код в body или head в файл index.html:

<script src="https://widget.scapy.ru/widget.js"></script>

Использование в компонентах

Ниже приведен пример использования Scapybara в Vue.js.

При нажатии на кнопку будет открыто окно сканирования.

<template>
  <button @click="selectFile()">Сканировать</button>
</template>

<script>
export default {
  methods: {
    selectFile () {
      // Проверяем наличие экземпляра Scapy в window.
      if (!window.Scapy) {
        alert('Виджет сканирования не загружен!')
        return
      }

      window.Scapy.run({
        handleFiles: (files) => {
          // Добавьте необходимые действия для массива с файлами - files
          alert(`Загружено ${files.length} файла(ов)`)

          // Закрываем окно сканирования
          window.Scapy.close()
        },
        handleClose: () => {
          // Закрываем окно сканирования
          window.Scapy.close()
        }
      })
    }
  }
}
</script>