How to convert PDF files to XML format using JavaScript-Front-end Q&A-php.cn

The PDF file format is a widely used file format that can be viewed on a variety of devices and platforms and preserves document structure and formatting. However, in some cases, we need to change or edit the content in PDF files, and PDF files are not an easy file format to edit or change. Therefore, it will be more convenient to convert PDF files to XML format, since XML format is easy to parse and edit, and can be adapted to various application environments.

This article will introduce how to use JavaScript to convert PDF files to XML format, as well as parse and extract data in XML files.

PDF to XML

Step 1: Get the PDF.js library

To convert PDF files to XML files in JavaScript, we need to use the PDF.js library. PDF.js is a JavaScript library for rendering PDF files in web applications. The library is available from its official website (http://mozilla.github.io/pdf.js/).

Step 2: Create an HTML page

We need to introduce the PDF.js library file and other necessary JavaScript files into the HTML page.

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

Copy after login

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

Copy after login

In this HTML page, we created an input element for uploading PDF files, and two div elements for display. PDF files and converted XML files.

Step 3: Create a JavaScript file

We need to create a JavaScript file named pdf2xml.js for converting PDF files to XML files.

var pdfDoc = null,

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

Copy after login

/**

Get page text
*/
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);
          });
      });
  });

Copy after login

});
}

##/**

Get text content block

*/
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>return textBlocks;<p>}<br></p>
</li></ul>/**<p></p>
<ul><li>Generate XML file<p>*/<br>function generateXML(textBlocks) {<br> var xmlString = '<?xml version="1.0" encoding="utf-8 "?>\n<document>\n';<br></p>// Create XMLWriter<p> var xml = new XMLWriter(' ');<br></p>// Add XML data<p> xml.beginElement('pages');<br></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();

Copy after login

}

xml.endElement( );

xmlString = xml.toString();

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

}

/**

Processing file upload

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

Copy after login

}

When the user uploads the PDF file, the handleFileSelect function will Load the file and get the PDF document and its contents. The getPageText function will render the first page of the uploaded PDF file and then get the text content of the page. We will use the PDF.js library to get the text.

The getTextBlocks function will get the text content blocks and store them in an array. The generateXML function will use XMLWriter to generate XML files.

Finally, we need to introduce the XMLWriter library into the JavaScript file.

Step 4: Create the XMLWriter library

XMLWriter.js is a JavaScript library that generates XML files. You can get the library at http://www.inline-graphics.de/inlinegraphics/xmlwriter/xmlwriter.js.

Converting PDF files to XML files using JavaScript is very simple, and the process only involves the following steps:

Create a basic HTML page.
Create a JavaScript file for PDF to XML conversion.
Create XMLWriter library.

Parsing and extracting data from XML files

There are many ways to parse and extract data from XML files. In this article, we will explain how to extract data from XML files using XPath and jQuery.

Step 1: Extract data from XML files using XPath

XPath is a language for locating and selecting elements in XML and HTML documents. Using XPath, we can extract data from XML files.

var xmlDoc = $.parseXML(xmlText),

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

Copy after login

var text = $page.text();

In the above code snippet, we use jQuery to The XML text is parsed into an XML document object and data is extracted from it using XPath.

Step 2: Extract data from XML file using jQuery

Using jQuery, we can easily extract data from XML file.

var xmlDoc = $.parseXML(xmlText),

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

Copy after login

var text = $page.text();

In the above code snippet, we first use jQuery Parse XML text into an XML document and extract data from it using jQuery. In this example, we look for page number 1 and get the text content there.

in conclusion

In this article, we introduced how to convert PDF files to XML files using JavaScript and the PDF.js library, and generate XML files using the XMLWriter library. We also covered how to use XPath and jQuery to extract data from XML files.

Compared with PDF files, XML files are easier to parse and process. By converting PDF files to XML files, we can make the data easier to manage and use, and use it in various application environments.

The above is the detailed content of How to convert PDF files to XML format using JavaScript. For more information, please follow other related articles on the PHP Chinese website!