Question

我目前正在研究一个项目，但是我还没有找到解决方案来实现它。我不要求解决方案。如果有人可以给我一些提示或告诉我我可以朝哪个方向发展，我将非常感激。

目前，我正在考虑尝试通过对Web应用程序进行编程来解决该问题。但是我不确定Windows窗体应用程序是否会更好。我也欢迎其他解决方案。

我的目标是：

我有一些（真实世界）的文档正在被扫描，然后使用OCR扫描仪进行扫描，该文档会生成一些PDF文档。接下来，我想在向用户显示PDF的用户界面中打开这些生成的PDF文件之一。用户应该能够选择一些（一个接一个）从数据库中下载的文本块，并将其拖动到pdf上并将其放在某个位置。

现在，我想保存或打印带有文本块的pdf文件，就像用户看到的一样。制作pdf的屏幕截图的一种方式，但是生成的pdf文件具有与以前相同的尺寸。目前，我不知道如何“合并” 这两个。

我应该使用哪些技术。你会推荐我什么。 Web应用程序或本地应用程序会更适合于此目的。

我写了某种样机来显示我的意思。如果要测试它，请将一些名为“ testpdf.pdf”的pdf放入同一文件夹。它可以在Chrome上运行...不确定其他版本。

非常感谢

kerem

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>

将文本元素拖放到PDF文档上，并使用拖放的元素保存新的PDF

0 个答案: