JavaScript を使用して PDF ファイルを XML 形式に変換する方法

PDF ファイル形式は、さまざまなデバイスやプラットフォームで表示でき、文書の構造と書式を保持する、広く使用されているファイル形式です。ただし、場合によっては PDF ファイルの内容を変更または編集する必要があり、PDF ファイルは編集または変更が簡単なファイル形式ではありません。したがって、XML 形式は解析と編集が容易で、さまざまなアプリケーション環境に適応できるため、PDF ファイルを XML 形式に変換する方が便利です。

この記事では、JavaScript を使用して PDF ファイルを XML 形式に変換する方法と、XML ファイル内のデータを解析して抽出する方法を紹介します。

PDF から XML

ステップ 1: PDF.js ライブラリを取得する

PDF ファイルを JavaScript で XML ファイルに変換するには、PDF.js ライブラリを使用する必要があります。 PDF.js は、Web アプリケーションで PDF ファイルをレンダリングするための JavaScript ライブラリです。このライブラリは、公式 Web サイト (http://mozilla.github.io/pdf.js/) から入手できます。

ステップ 2: HTML ページを作成する

PDF.js ライブラリ ファイルとその他の必要な JavaScript ファイルを HTML ページに導入する必要があります。

<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>

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

この HTML ページでは、PDF ファイルをアップロードするための input 要素と、PDF ファイルと変換された XML ファイルを表示するための 2 つの div 要素を作成しました。

ステップ 3: JavaScript ファイルを作成する

PDF ファイルを XML ファイルに変換するために、pdf2xml.js という名前の JavaScript ファイルを作成する必要があります。

var pdfDoc = null,

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

/**

• ページテキストの取得
  */
  function getPageText(pageNum, textContent) {
  return new Promise(function(resolve, respect) {

    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);
            });
        });
    });

  });
  }

##/**

• テキスト コンテンツ ブロックの取得

  */
  function getTextBlocks(textContent) {
  var textBlocks = [ ];
  

  for (var i = 0; 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);
    }

  }
  return textBlocks;

  }
  

/**

• XML ファイルの生成

  */
  functiongenerateXML(textBlocks) {
  var xmlString = '\n\n';
  

  // XMLWriter の作成

  var xml = new XMLWriter(' ');
  

  // XML データの追加

  xml .beginElement('pages');
  

  for (var i = 0; i

    var textBlock = textBlocks[i];
  
    xml.beginElement('page');
    xml.writeAttribute('number', pageNum);
    xml.writeAttribute('x', textBlock.x.toFixed(2));
    xml.writeAttribute('y', textBlock.y.toFixed(2));
    xml.writeAttribute('width', textBlock.w.toFixed(2));
    xml.writeAttribute('height', textBlock.h.toFixed(2));
    xml.text(textBlock.text);
    xml.endElement();

  }
  xml.endElement( ) ;
  xmlString = xml.toString();

  xmlString = '\n';
  

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

  }
  

/**

• ファイルのアップロードを処理しています

  */
  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);

  }

  }
  

ユーザーが PDF ファイルをアップロードすると、handleFileSelect 関数が実行されます。ファイルをロードし、PDF ドキュメントとそのコンテンツを取得します。 getPageText 関数は、アップロードされた PDF ファイルの最初のページをレンダリングし、ページのテキスト コンテンツを取得します。 PDF.js ライブラリを使用してテキストを取得します。

getTextBlocks 関数はテキスト コンテンツ ブロックを取得し、配列に格納します。 generateXML 関数は XMLWriter を使用して XML ファイルを生成します。

最後に、XMLWriter ライブラリを JavaScript ファイルに導入する必要があります。

ステップ 4: XMLWriter ライブラリを作成する

XMLWriter.js は、XML ファイルを生成する JavaScript ライブラリです。このライブラリは http://www.inline-graphics.de/inlinegraphics/xmlwriter/xmlwriter.js で入手できます。

JavaScript を使用して PDF ファイルを XML ファイルに変換するのは非常に簡単で、プロセスには次の手順のみが必要です。

PDF.js ライブラリを入手します。
1. 基本的な HTML ページを作成します。
2. PDF から XML への変換用の JavaScript ファイルを作成します。
3. XMLWriter ライブラリを作成します。

XML ファイルからのデータの解析と抽出

XML ファイルからデータを解析して抽出するには、さまざまな方法があります。この記事では、XPathとjQueryを使用してXMLファイルからデータを抽出する方法を説明します。

ステップ 1: XPath を使用して XML ファイルからデータを抽出する

XPath は、XML および HTML ドキュメント内の要素を検索して選択するための言語です。 XPath を使用すると、XML ファイルからデータを抽出できます。

var xmlDoc = $.parseXML(xmlText),

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

var text = $page.text();

上記のコード スニペットでは、jQuery を使用してXML テキストは XML ドキュメント オブジェクトに解析され、XPath を使用してそこからデータが抽出されます。

ステップ 2: jQuery を使用して XML ファイルからデータを抽出する

jQuery を使用すると、XML ファイルからデータを簡単に抽出できます。

var xmlDoc = $.parseXML(xmlText),

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

var text = $page.text();

上記のコード スニペットでは、最初に jQuery Parse を使用します。 XML テキストを XML ドキュメントに変換し、jQuery を使用してそこからデータを抽出します。この例では、ページ番号 1 を検索し、そこにあるテキスト コンテンツを取得します。 ＃＃＃＃＃＃結論は＃＃＃

この記事では、JavaScript と PDF.js ライブラリを使用して PDF ファイルを XML ファイルに変換し、XMLWriter ライブラリを使用して XML ファイルを生成する方法を紹介しました。 XPath と jQuery を使用して XML ファイルからデータを抽出する方法についても説明しました。

PDF ファイルと比較して、XML ファイルは解析と処理が簡単です。 PDFファイルをXMLファイルに変換することで、データの管理や利用が容易になり、さまざまなアプリケーション環境で利用できるようになります。

以上がJavaScript を使用して PDF ファイルを XML 形式に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。