JavaScript を使用して PDF ファイルを XML 形式に変換する方法-フロントエンドQ&A-php.cn

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 ファイルに変換するのは非常に簡単で、プロセスには次の手順のみが必要です。

基本的な HTML ページを作成します。
PDF から XML への変換用の JavaScript ファイルを作成します。
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 サイトの他の関連記事を参照してください。