如何使用JavaScript將PDF檔案轉換為XML格式

PDF文件格式是一種廣泛使用的文件格式，它可以在各種設備和平台上查看並保留文件結構和格式。然而，在某些情況下，我們需要更改或編輯PDF文件中的內容，而PDF文件並不是一個易於編輯或更改的文件格式。因此，將PDF檔案轉換為XML格式將更為方便，因為XML格式易於解析和編輯，並且可以適應各種應用程式環境。

本文將介紹如何使用JavaScript將PDF檔案轉換為XML格式，以及將XML檔案中的資料解析與擷取。

PDF轉XML

步驟 1：取得PDF.js庫

在JavaScript中將PDF檔案轉換為XML文件，我們需要使用PDF.js庫。 PDF.js是一個用於在網路應用程式中呈現PDF檔案的JavaScript庫。可以從其官方網站(http://mozilla.github.io/pdf.js/) 上取得該庫。

步驟 2：建立HTML頁面

我們需要在HTML頁面中引入PDF.js庫檔案和其他必要的JavaScript檔案。

<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頁面中，我們建立了一個input元素，用來上傳PDF文件，以及兩個div元素，分別用於顯示PDF檔案和轉換後的XML檔案。

步驟 3：建立JavaScript檔案

我們需要建立一個名為pdf2xml.js的JavaScript文件，用於將PDF檔案轉換為XML檔案。

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, reject) {

    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 < 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);
    }</p>
  <p>}</p>
  <p>return textBlocks;<br>}</p>
  </li></ul>
  <p>/**</p>
  <ul><li>
  <p>產生XML檔<br>*/<br>function generateXML(textBlocks) {<br>  var xmlString = '<?xml version="1.0" encoding="utf-8 "?>\n<document>\n';</p>
  <p>// 建立XMLWriter<br>  var xml = new XMLWriter('    ');</p>
  <p>#// 新增XML資料<br> xml.beginElement('pages');</p>
  <p>for (var i = 0; i < textBlocks.length; i ) {</p><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 ;
  }

/**

• 處理檔案上傳
  */
  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檔。

最後，我們需要在JavaScript檔案中引入XMLWriter函式庫。

步驟 4：建立XMLWriter函式庫

XMLWriter.js是一個產生XML檔案的JavaScript函式庫。您可以在http://www.inline-graphics.de/inlinegraphics/xmlwriter/xmlwriter.js 上取得該函式庫。

使用JavaScript將PDF檔案轉換為XML檔案非常簡單，流程只涉及以下步驟：

1. 取得PDF.js庫。
2. 建立一個基本HTML頁面。
3. 建立一個JavaScript文件，用於實作PDF到XML的轉換。
4. 建立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將XML文字解析為XML文檔，並使用jQuery從中提取資料。在這個範例中，我們尋找編號為1的頁面，並取得其中的文字內容。

結論

在本文中，我們介紹如何使用JavaScript和PDF.js庫將PDF文件轉換為XML文件，並使用XMLWriter庫產生XML文件。我們也介紹如何使用XPath和jQuery從XML檔案中提取資料。

與PDF檔案相比，XML檔案更容易解析和處理。透過將PDF文件轉換為XML文件，我們可以讓資料更容易管理和使用，並將其用於各種應用程式環境中。

以上是如何使用JavaScript將PDF檔案轉換為XML格式的詳細內容。更多資訊請關注PHP中文網其他相關文章！