Перетаскивайте текстовые элементы в PDF-документы и сохраняйте новый PDF с удаленными элементами

Question

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

В настоящее время я думаю о том, чтобы попытаться решить эту проблему путем программирования веб-приложения. Но я не уверен, что приложение Windows Form будет даже лучше. Я также открыт для других решений.

Моя цель следующая:

У меня есть некоторые (реальные) документы, которые сканируются, а затем сканируются с помощью OCR-сканера, который генерирует некоторые PDF-документы. Далее я хочу открыть один из этих созданных PDF-файлов в пользовательском интерфейсе, который показывает мне PDF. Пользователь должен иметь возможность выбрать некоторые (один за другим) текстовые блоки, которые загружаются из базы данных, и перетащить их на PDF-файл и поместить его в какую-то позицию.

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

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

Я написал какой-то макет, чтобы показать, что я имею в виду. Пожалуйста, поместите PDF-файл с именем «testpdf.pdf» в ту же папку, если вы хотите проверить его. Он работает на Chrome ... не уверен насчет других.

Большое спасибо

Керем

var movabelelements=document.getElementsByClassName("moveableElement");
Array.from(movabelelements).forEach(element => {
    dragElement(element);
});

function dragElement(elem){
    var pos1=0,pos2=0,pos3=0,pos4=0;
    elem.onmousedown=dragMouseDown;

    function dragMouseDown(e){
        e=e||window.event;
        e.preventDefault();
        pos3=e.clientX;
        pos4=e.clientY;
        document.onmouseup=closeDragElement;
        document.onmousemove=elementDrag;
    }

    function elementDrag(e){
        e=e||window.event;
        e.preventDefault();
        pos1=pos3-e.clientX;
        pos2=pos4-e.clientY;
        pos3=e.clientX;
        pos4=e.clientY;
        elem.style.top=(elem.offsetTop -pos2)+"px";
        elem.style.left=(elem.offsetLeft-pos1)+"px";
    }

    function closeDragElement(){
        document.omouseup=null;
        document.onmousemove=null;
    }
}
function printPDF(){
    alert('Der Bericht sollte jetzt gedruckt werden');
}
function highLightAllValues(){
    Array.from(movabelelements).forEach(element => {
        element.classList.add("highlighted");
    });
    setTimeout(function(){
        Array.from(movabelelements).forEach(element => {
            element.classList.remove("highlighted");
        });
    }, 1500);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1,h2{
    text-align:center
}

.pdffile{
    height: 100%;
    width: 100%;
}

body,html{
    height: 100%;
    width: 100%;
}

#values_list_values{
    padding: 15px;
}

#values_list{
    text-align: center;
}

#values_list_values div{
    margin: 15px;
    border-bottom: solid;
    border-width: 1px;
}

#values_list_values div:hover{
    color: red;   
}

#values_list_values div span{
    margin: 10px;
}

.moveableElement{
    border-style: solid;
    border-color: transparent;
    position: absolute;
    z-index: 20;
    padding: 20px;
}

.moveableElement:hover{
    border-style: solid;
    border-color: red;
    cursor: move;
}

#values_list{
    position: relative;
    width: 20%;
    display: inline-block;
    padding: 10px;
    padding-bottom: 50px;
}

#pdfFileWrapper{
    width: 80%;
    float: left;
    height: 100%;
}

#highLightAllValuesButton{
    width: 90%;
    display: inline-block; 
    padding: 20px;
    margin: 10px;
}

.highlighted{
    border-style: solid;
    border-color: red;
    border-width: 2px;
}

#printButtonArea{
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 20%;
    height: 50px;
    line-height: 50px;
}

#printButtonArea button{
    width: 100%;
    height: 100%;
}

<!DOCTYPE html>
<html>
<head>
    <title>Vorschau</title>
    <link rel="stylesheet" href="vorschau.css">
</head>
<body>
    <h1>Druckvorschau PDF</h1>
    
    <div id="pdfFileWrapper">
        <object class="pdffile" data="testpdf.pdf" type="application/pdf">
            alt : <a href="testpdf.pdf">PDF-Vorschau Fehlgeschlagen - Bitte anderen Browser Probieren</a>
        </object>
    </div>
    <div id="values_list">
        <div id="printButtonArea">
                <button onclick="printPDF()">Print</button>
        </div>
        <h2>Werte aus der Datenbank</h2>
        <button id="highLightAllValuesButton" onclick="highLightAllValues()">Show all text blocks</button>
        <div id="values_list_values">
            <div>
                <h3>One</h3>
                <span>xy</span>
            </div>
            <div>
                <h3>Material ID</h3>
                <span>12</span>
            </div>
            <div>
                <h3>Some Other ID</h3>
                <span>some other id</span>
            </div>
            <div>
            <h3>Identifikation</h3>
            <span>lastvalue</span>
            </div>
        </div>
    </div>
    <div id="1" style="top:200px;left:100px" class="moveableElement">
        Example value
    </div>
    <div id="2" style="top:250px;left:150px"class="moveableElement">
        Car One
    </div>
    <div id="3" style="top:300px;left:200px" class="moveableElement">
        <span>whatever</span>
    </div>
    <div id="4" style="top:350px;left:250px" class="moveableElement">number 12

    </div>
</body>
<script src="vorschau.js"></script>
</html>