Перейти к основному содержимому

PDFViewer

Отображает PDF-файл

Отображает PDF-файл согласно токену, переданному файловым сервисом Атомкод. Если файл не передан, отображает сообщение из свойства NoFileText.

Если формат переданного файла неверный, отображает сообщение из свойства ErrorText.

Компонент PDFViewer позволяет выбирать области на страницах PDF-файла и добавлять комментарии к этим областям. Каждая область получает метку в PDF-файле.

Комментарий имеет следующие свойства:

  • номер страницы PDF-файла, на которой расположен комментарий;
  • цвет метки, по нажатию которой отображается комментарий;
  • координаты и размеры области отображения комментария;
  • автор комментария;
  • текст комментария;
  • дата создания комментария;
  • возможность изменения и удаления комментария. Тексты комментариев могут быть локализованы с помощью словаря локализации, указанного в свойстве LocalizationDictionary компонента.
    <PDFViewer
      Value-var="tPDFoken"
      ErrorText="Просмотр файла недоступен"
      NoFileText="Выберите PDF-файл"
    />

Свойства​

Badge​

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS​

Массив строк-классов CSS-стилей, описанных в файле CSS.css разрабатываемого проекта или встроенных CSS-стилей Атомкод.

Пример:

// внешние (m) и внутренние (p) отступы для компонента. 
// Число после символа "-" (в этом примере представлено числом 4) должно быть кратно величине,
// указанной в параметре, определяющем кратность отступов, 
// в файле Style.mdtheme разрабатываемого проекта.
CSS={["m-4", "p-4"]}

Тип: array

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых блоков кода. Описывает код вызова действий типа Static, код вызова действий, описанных в параметре subscribe источника данных, а также переход к экранной форме с настроенными параметрами маршрутизации.

Тип: object

CommentButtonVisible​

Признак отображения кнопки добавления комментариев

Тип: boolean

Значение по умолчанию: True

Comments​

Псевдоним свойств InputComments и OutputComments, являющихся массивами. Каждый элемент массива является объектом со следующими полями:

  • id: идентификатор комментария;
  • number: порядковый номер комментария согласно хронологии создания;
  • pageNumber: номер страницы PDF-файла, на которой расположен комментарий;
  • iconColor: цвет метки, по нажатию которой отображается комментарий;
  • position: объект с полями x, y, width, height для задания координат и размеров области отображения комментария;
  • author: автор комментария;
  • text: текст комментария;
  • createdAt: дата создания комментария в формате ISO 8601;
  • isEditable: признак возможности изменения комментария;
  • isDeletable: признак возможности удаления комментария.

Тип: array

DisableCommentForm​

Признак отключения форм создания, просмотра и редактирования комментариев. Если установлено значение true, формы создания, просмотра и редактирования комментариев не отображаются, при выборе области комментарии не создаются, всплывающие окна с комментариями скрыты. Выбор областей доступен, и обработчики событий OnCommentStartCreate и OnCommentClick срабатывают.

Тип: boolean

DisableCommentSidebar​

Признак отключения стандартной боковой панели с комментариями и кнопки открытия боковой панели. Если установлено значение true, то стандартный сайдбар и кнопка его вызова скрываются. Однако, если также передано свойство OnSidebarMenuClick, то кнопка вызова сайдбара остается видимой для реализации собственной логики открытия сайдбара.

Тип: boolean

FileName​

Имя PDF-файла для скачивания.

Тип: string

Hidden​

Признак состояния компонента Скрыт: true — компонент скрыт; false — компонент отображается.

Тип: boolean

Hint​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне.

Тип: any

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

InputComments​

Входной параметр компонента: массив комментариев к областям загруженного PDF-файла.

Тип: array

InputSearchText​

Входной параметр компонента: текст для поиска в документе.

Тип: string

LocalizationDictionary​

Имя словаря для локализации надписей, используемых в компоненте.

Тип: string

OnClick​

Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на компоненте.

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnClick={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnCommentChange​

Обработчик события для добавления, изменения или удаления комментария. Не имеет параметров. Возращает объект со следующими полями:

  • changeType: тип выполненного действия (delete, update, create);
  • comment: объект с полями, описанными в свойстве Comments;
  • index: индекс комментария в массиве.

Пример:

OnCommentChange={()=>{
// Получение информации о событии и вывод в консоль браузера
  const { changeType, comment, index } = getEvent();
  console.log({ changeType, comment, index })
}}

Тип: undefined

OnCommentClick​

Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на комментарии. Не имеет параметров.

Возвращает объект со следующими полями:

  • id: идентификатор комментария;
  • text: текст комментария;
  • pageNumber: номер страницы;
  • position: объект с координатами и размерами области комментария {x, y, width, height};
  • author: автор комментария;
  • createdAt: дата создания в формате ISO 8601;
  • number: порядковый номер комментария;
  • iconColor: цвет метки комментария;
  • customField: дополнительное поле, определенное пользователем.

Пример:

OnCommentClick={()=>{
  // Получение информации о событии и вывод в консоль браузера
  const {text, author, customField} = getEvent();
  console.log(text, author, customField);
}}

Тип: undefined

OnCommentStartCreate​

Обработчик события начала создания комментария. Событие возникает после выбора пользователем области PDF-файла для комментария. Не имеет параметров. Возвращает объект со следующими полями:

  • x: координата X начала области;
  • y: координата Y начала области;
  • width: ширина области;
  • height: высота области;
  • pageNumber: номер страницы.

Пример:

OnCommentStartCreate={()=>{
  // Получение информации о событии и вывод в консоль браузера
  const {x, y, width, height} = getEvent();
  console.log(x, y, width, height);
}}

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseEnter={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseLeave={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseMove={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOut={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOver={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnSidebarMenuClick​

Обработчик события нажатия на кнопку вызова сайдбара комментариев. Если данное свойство передано, то кнопка вызова сайдбара отображается даже при установке DisableCommentSidebar=true. Это позволяет создать собственную логику открытия сайдбара или полностью заменить стандартный сайдбар на пользовательский. Не имеет параметров.

Возвращает объект с информацией о текущем состоянии:

  • isSidebarOpen: текущее состояние стандартного сайдбара;
  • comments: массив текущих комментариев;
  • pageNumber: номер текущей страницы.

Пример:

OnSidebarMenuClick={()=>{
  // Создание собственной логики открытия сайдбара
  setState({ customSidebarOpen: true });
}}

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров.

Пример:

OnUnmount={() => {
  // Отмена выполнения периодического действия при размонтировании экранной формы
    return clearInterval(getValue("pleerInterval"))
  }
}

Тип: undefined

OutputComments​

Выходной параметр компонента: массив комментариев к областям загруженного PDF-файла.

Тип: array

OutputSearchText​

Выходной параметр компонента: текст для поиска в документе.

Тип: string

SearchText​

Псевдоним свойств InputSearchText и OutputSearchText.

Тип: string

ShowComments​

Признак отображения комментариев

Тип: boolean

ShowFooter​

Признак отображения нижнего колонтитула компонента с информацией о дате создания файла, размере файла и авторе документа

Тип: boolean

Значение по умолчанию: True

Slot​

Именованное пространство во фрагменте экранной формы или именованное пространство в шаблоне компонента с возможностью шаблонизации, например, Select, DataGrid.

Тип: string

Tooltip​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне.

Тип: any

TraceId​

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода при изменении состояния компонента.

Тип: string

UserName​

Имя пользователя, работающего с PDF-файлом.

Тип: string

Value​

Токен PDF-файла, переданный файловым сервисом.

Тип: string

Visible​

Признак инверсии состояния компонента Скрыт: true — компонент отображается; false — компонент скрыт.

Тип: boolean

Значение по умолчанию: True

Примеры​

Данные:

  
  "Comments": []

}

JSX:

 
<Group CSS={['px-8']} Mode="Column">
  <PDFViewer
    Value={files => files && files[files?.length - 1]?.token}
    FileName={files => files && files[files?.length - 1]?.name}
    Comments-var="Comments"
    SearchText-var="SearchText"
    OnCommentChange={()=>{
        const { changeType, comment, index } = getEvent();
        console.log({ changeType, comment, index })
      }}
    ShowComments={true}
    UserName="Иванов Иван Иванович"
    LocalizationDictionary="PdfViewer"
  />
  <Group Height='fit-content'>
    <FileUploader
      OnFileCreate={() => {
        setState({Comments:[]})
        const files = getValue('files');
        if(files?.length>1){
          setTimeout(()=>{
            setState({files:[files[files.length - 1]]})
          },0)
        }
      }}
      CSS={['mb-16']}
      Text-Localizable="FileUploader.DragAndDropOr"
      ChooseFileText-Localizable='FileUploader.LowCaseSelectFile'
      GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
      DownloadMode="Download"
      Multiple={false}
      Model-var="files"
      OutputState-var="__fileUploaderBusy__"
      WithDropzone={true}
      OnDropLabel-Localizable="FileUploader.DropYourFilesHere"
      AllowedFileTypes={["application/pdf", ".pdf"]}
    />
  </Group>
</Group>