Как в превью docx файла выделить фрагмент текста согласно координатам?

Question

[lacront]

Суть проблемы в следующем. С сервера приходит файл docx с координатами ошибок. Координат ошибок выглядит примерно так

{
start: {top: 22,23%, left: 2,34%},
end: {top: 24,54%, left: 86,08%}
}

Надо отобразить превью документа и по данным координатом выделить текст другим цветов или нарисовать прямоугольник, чтобы это было похоже на бэкграунд. Это вообще возможно сделать? А если возможно, то как? Спасибо за любые ответы.

Answer 1

[hzzzzl]

смотря что такое "превью", если просто такое без скролла, то просто блок абсолютом поставить - а координаты относительно страницы с превью есть

https://codepen.io/anon/pen/dxRaPg

Comments

[lacront]

со скролом надо, еще и с якорем, чтобы быстро скролиться к нужной позиции

[Антон Спирин]

lacront, Refs API, window.scrollTo() и element.getBoundingClientRect() к вашим услугам.

[hzzzzl]

lacront, хотя если будет со скроллом, то блок с подсветкой все равно останется на правильном месте по процентам

может как-то так поможет, на реакт перекинуть это несложно будет
https://codepen.io/anon/pen/gVRqza?editors=1010

Антон Спирин, лучше на всякий случай перевысчитывать каждый раз getBoundingClientRect(), а не брать offsetHeight, как я сделал?

[Антон Спирин]

hzzzzl, не scrollIntoView, тут лучше будет. Что-то навскидку про него и не вспомнил. Я getBoundingClientRect для определения позиции элемента подразумевал. Там и вычисления будут сложней и нет поддержки IE для x, y.