So konvertieren Sie PDF-Dateien mithilfe von JavaScript in das XML-Format

Das PDF-Dateiformat ist ein weit verbreitetes Dateiformat, das auf einer Vielzahl von Geräten und Plattformen angezeigt werden kann und die Struktur und Formatierung des Dokuments beibehält. In einigen Fällen müssen wir jedoch den Inhalt von PDF-Dateien ändern oder bearbeiten, und PDF-Dateien sind kein einfach zu bearbeitendes oder zu änderndes Dateiformat. Daher ist es bequemer, PDF-Dateien in das XML-Format zu konvertieren, da das XML-Format einfach zu analysieren und zu bearbeiten ist und an verschiedene Anwendungsumgebungen angepasst werden kann.

In diesem Artikel erfahren Sie, wie Sie mit JavaScript PDF-Dateien in das XML-Format konvertieren sowie Daten in XML-Dateien analysieren und extrahieren.

PDF zu XML

Schritt 1: Holen Sie sich die PDF.js-Bibliothek

Um PDF-Dateien in XML-Dateien in JavaScript zu konvertieren, müssen wir verwenden PDF .js-Bibliothek. PDF.js ist eine JavaScript-Bibliothek zum Rendern von PDF-Dateien in Webanwendungen. Die Bibliothek ist auf ihrer offiziellen Website verfügbar (http://mozilla.github.io/pdf.js/).

Schritt 2: HTML-Seite erstellen

Wir müssen die PDF.js-Bibliotheksdatei und andere notwendige JavaScript-Dateien in die HTML-Seite einfügen.

<meta charset="UTF-8">
<title>PDF to XML Conversion</title>
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="pdf.worker.js"></script>
<script type="text/javascript" src="xmlwriter.js"></script>
<script type="text/javascript" src="pdf2xml.js"></script>

< body>

<input type="file" id="pdf-file" onchange="handleFileSelect()">
<div id="pdf-holder"></div>
<div id="xml-holder"></div>

Auf dieser HTML-Seite haben wir ein Eingabeelement zum Hochladen einer PDF-Datei erstellt und zwei div-Elemente zur Anzeige der PDF-Datei bzw. der konvertierten XML-Datei.

Schritt 3: JavaScript-Datei erstellen

Wir müssen eine JavaScript-Datei mit dem Namen pdf2xml.js erstellen, um PDF-Dateien in XML-Dateien zu konvertieren.

var pdfDoc = null,

pageNum = 1,
pageRendering = false,
pageNumPending = null,
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');

/**&*/

function getPageText(pageNum, textContent) {

return new Promise( Funktion(auflösen, ablehnen) {

•   pageRendering = true;
    pdfDoc.getPage(pageNum).then(function(page) {
  
        var viewport = page.getViewport(1.0);
        canvas.height = viewport.height;
        canvas.width = viewport.width;
  
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
  
        page.render(renderContext).promise.then(function() {
  
            var textLayer = document.createElement('div');
            textLayer.setAttribute('class', 'textLayer');
            document.getElementById('pdf-holder').appendChild(textLayer);
  
            var viewport = page.getViewport(1.0);
            var textContent = new TextContent();
            page.getTextContent({normalizeWhitespace: true }).then(function(content) {
                textContent = content;
  
                var textLayerDiv = document.getElementById('pdf-holder').getElementsByClassName('textLayer')[0];
                PDFJS.renderTextLayer({
                    textContent: textContent,
                    container: textLayerDiv,
                    viewport: viewport,
                    textDivs: []
                });
  
                resolve(textContent);
            });
        });
    });

  });
  }
  
  

  /**
  

Seitentext abrufen

*/#🎜 🎜#function getTextBlocks(textContent) {

var textBlocks = [];

• for (var i = 0; i < textContent.items.length; i++) {

    var item = textContent.items[i];
  
    // 判断是否是文本
    if (item.str.trim().length > 0) {
        var textBlock = {
            x: item.transform[4],
            y: item.transform[5],
            w: item.width,
            h: item.height,
            text: item.str
        };
  
        textBlocks.push(textBlock);
    } <br>}<br><br>return textBlocks;}<p></p>
  <p></p>/**<p><br></p>
  </li>Textinhaltsblock abrufen</ul>*/<p>Funktion generierenXML(textBlocks) {</p> var xmlString = '<?xml version="1.0" binding="utf-8"?>n<document>n';<ul>
  <li>// Erstellen XMLWriter<p> var xml = new XMLWriter(' ');<br><br>// XML-Daten hinzufügen<br> xml.beginElement('pages');</p>
  <p>for (var i = 0; i < textBlocks.length; i++) {<br/><pre class="brush:php;toolbar:false">  var textBlock = textBlocks[i];
  
    xml.beginElement(&#39;page&#39;);
    xml.writeAttribute(&#39;number&#39;, pageNum);
    xml.writeAttribute(&#39;x&#39;, textBlock.x.toFixed(2));
    xml.writeAttribute(&#39;y&#39;, textBlock.y.toFixed(2));
    xml.writeAttribute(&#39;width&#39;, textBlock.w.toFixed(2));
    xml.writeAttribute(&#39;height&#39;, textBlock.h.toFixed(2));
    xml.text(textBlock.text);
    xml.endElement();

  }

  
  xml.endElement();

  xmlString + = xml.toString();

  xmlString += 'n';
  document.getElementById('xml-holder').innerHTML = xmlString;

  }

  
  

  /**

  
  

XML-Datei generieren

*/

function handleFileSelect() {

var file = document.getElementById('pdf-file') .files[0];

• if (file) {

    var fileReader = new FileReader();
    fileReader.onload = function(e) {
        var data = new Uint8Array(e.target.result);
        PDFJS.getDocument(data).then(function(pdfDoc_) {
            pdfDoc = pdfDoc_;
  
            // 获取文本
            getPageText(pageNum).then(function(textContent) {
  
                // 获取文本块
                var textBlocks = getTextBlocks(textContent);
  
                // 生成XML文件
                generateXML(textBlocks);
  
            });
  
        });
    };
    fileReader.readAsArrayBuffer(file);

  
  }
  }
  
  Wenn der Benutzer eine PDF-Datei hochlädt, lädt die Funktion handleFileSelect die Datei und ruft das PDF-Dokument und seinen Inhalt ab. Die Funktion getPageText rendert die erste Seite der hochgeladenen PDF-Datei und ruft dann den Textinhalt der Seite ab. Wir werden die PDF.js-Bibliothek verwenden, um den Text abzurufen.

  
  getTextBlocks-Funktion ruft Textinhaltsblöcke ab und speichert sie in einem Array. Die Funktion „generateXML“ verwendet XMLWriter zum Generieren von XML-Dateien.

Zuletzt müssen wir die XMLWriter-Bibliothek in die JavaScript-Datei einführen.

Schritt 4: XMLWriter-Bibliothek erstellen

XMLWriter.js ist eine JavaScript-Bibliothek, die XML-Dateien generiert. Die Bibliothek erhalten Sie unter http://www.inline-graphics.de/inlinegraphics/xmlwriter/xmlwriter.js.

Das Konvertieren von PDF-Dateien in XML-Dateien mit JavaScript ist sehr einfach und der Vorgang umfasst nur die folgenden Schritte:

Holen Sie sich die PDF.js-Bibliothek.

Erstellen Sie eine einfache HTML-Seite.

Erstellen Sie eine JavaScript-Datei für die Konvertierung von PDF in XML.

1. Erstellen Sie eine XMLWriter-Bibliothek.
2. Daten aus XML-Dateien analysieren und extrahieren
3. Es gibt viele Möglichkeiten, Daten aus XML-Dateien zu analysieren und zu extrahieren. In diesem Artikel erklären wir, wie Sie mit XPath und jQuery Daten aus XML-Dateien extrahieren.
4. Schritt 1: Verwenden Sie XPath, um Daten aus XML-Dateien zu extrahieren.

XPath ist eine Sprache zum Suchen und Auswählen von Elementen in XML- und HTML-Dokumenten. Mit XPath können wir Daten aus XML-Dateien extrahieren.

var xmlDoc = $.parseXML(xmlText),

$xml = $(xmlDoc),
$pages = $xml.find('pages'),
$page = $pages.find('page[number="1"]');

var text = $page.text();

Im obigen Codeausschnitt verwenden wir jQuery, um XML-Text in ein XML-Dokumentobjekt zu analysieren und verwenden XPath, um Daten daraus zu extrahieren.

Schritt 2: Extrahieren Sie Daten aus einer XML-Datei mit jQuery

Mit jQuery können wir ganz einfach Daten aus einer XML-Datei extrahieren.

var xmlDoc = $.parseXML(xmlText),

$xml = $(xmlDoc),
$page = $xml.find('page[number="1"]');

var text = $page.text();

Im obigen Codeausschnitt , analysieren wir zunächst den XML-Text mithilfe von jQuery in ein XML-Dokument und extrahieren Daten daraus mithilfe von jQuery. In diesem Beispiel suchen wir nach Seitennummer 1 und holen uns dort den Textinhalt.

SCHLUSSFOLGERUNG

In diesem Artikel haben wir vorgestellt, wie man PDF-Dateien mit JavaScript und der PDF.js-Bibliothek in XML-Dateien konvertiert und XML-Dateien mit der XMLWriter-Bibliothek generiert. Wir haben auch behandelt, wie man XPath und jQuery zum Extrahieren von Daten aus XML-Dateien verwendet.

XML-Dateien lassen sich einfacher analysieren und verarbeiten als PDF-Dateien. Durch die Konvertierung von PDF-Dateien in XML-Dateien können wir die Daten einfacher verwalten und verwenden und sie in verschiedenen Anwendungsumgebungen verwenden.

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie PDF-Dateien mithilfe von JavaScript in das XML-Format. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!