Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menukar fail PDF kepada format XML menggunakan JavaScript

Bagaimana untuk menukar fail PDF kepada format XML menggunakan JavaScript

PHPz
PHPzasal
2023-04-21 09:10:303525semak imbas

Format fail PDF ialah format fail yang digunakan secara meluas yang boleh dilihat pada pelbagai peranti dan platform serta mengekalkan struktur dan pemformatan dokumen. Walau bagaimanapun, dalam beberapa kes, kita perlu menukar atau mengedit kandungan dalam fail PDF, dan fail PDF bukanlah format fail yang mudah untuk diedit atau diubah. Oleh itu, adalah lebih mudah untuk menukar fail PDF kepada format XML, kerana format XML mudah dihuraikan dan diedit, dan boleh disesuaikan dengan pelbagai persekitaran aplikasi.

Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menukar fail PDF kepada format XML, serta menghuraikan dan mengekstrak data daripada fail XML.

PDF kepada XML

Langkah 1: Dapatkan perpustakaan PDF.js

Untuk menukar fail PDF kepada fail XML dalam JavaScript, kami perlu menggunakan perpustakaan PDF.js. PDF.js ialah perpustakaan JavaScript untuk memaparkan fail PDF dalam aplikasi web. Perpustakaan ini boleh didapati daripada laman web rasminya (http://mozilla.github.io/pdf.js/).

Langkah 2: Buat halaman HTML

Kami perlu memperkenalkan fail perpustakaan PDF.js dan fail JavaScript lain yang diperlukan ke dalam halaman 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></body></p>
<p></html><br></p>Dalam halaman HTML ini, kami mencipta elemen input untuk memuat naik fail PDF dan dua elemen div, Digunakan untuk memaparkan fail PDF dan menukar fail XML masing-masing. <p></p>Langkah 3: Cipta fail JavaScript <p></p>Kami perlu mencipta fail JavaScript bernama pdf2xml.js untuk menukar fail PDF kepada fail XML. <p></p>var pdfDoc = null,<p></p>
<pre class="brush:php;toolbar:false">pageNum = 1,
pageRendering = false,
pageNumPending = null,
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
/**

  • Dapatkan teks halaman

    */
    fungsi getPageText(pageNum, textContent) {
    kembalikan Promise(function(resolve,) baharu tolak) {

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

    }

/**

  • Dapatkan blok kandungan teks

    */
    fungsi 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>kembali textBlocks ;<p>}<br></p>
    </li></ul>/**<p></p>
    <ul>
    <li>Jana fail XML<p>*/<br>fungsi generateXML(textBlocks) {<br> var xmlString = '<?xml version="1.0" encoding="utf-8"?>n<document>n';<br></p>// Cipta XMLWriter<p> var xml = new XMLWriter(' ');<br></p>// Tambah XML Data<p> 🎜>xml.endElement();<br></p>xmlString += xml.toString();<p> xmlString += 'n</document>';</p>
    <pre class="brush:php;toolbar:false">  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();
    document.getElementById ('xml- holder').innerHTML = xmlString;

    }

    /**


    Proses muat naik fail

    */
  • function handleFileSelect() {
var file = document.getElementById( 'pdf-file').files[0];

jika (fail) {
  • }
    }

    apabila Selepas pengguna memuat naik fail PDF, fungsi handleFileSelect akan memuatkan fail dan mendapatkan dokumen PDF serta kandungannya. Fungsi getPageText akan memaparkan halaman pertama fail PDF yang dimuat naik dan kemudian mendapatkan kandungan teks halaman tersebut. Kami akan menggunakan perpustakaan PDF.js untuk mendapatkan teks.

      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);
    Fungsi getTextBlocks akan mendapatkan blok kandungan teks dan menyimpannya dalam tatasusunan. Fungsi generateXML akan menggunakan XMLWriter untuk menjana fail XML.


    Akhir sekali, kami perlu memperkenalkan perpustakaan XMLWriter ke dalam fail JavaScript.

  • Langkah 4: Cipta pustaka XMLWriter

XMLWriter.js ialah pustaka JavaScript yang menjana fail XML. Anda boleh mendapatkan perpustakaan di http://www.inline-graphics.de/inlinegraphics/xmlwriter/xmlwriter.js.

Menukar fail PDF kepada fail XML menggunakan JavaScript adalah sangat mudah dan prosesnya hanya melibatkan langkah berikut:

Dapatkan perpustakaan PDF.js.

Buat halaman HTML asas.

Buat fail JavaScript untuk penukaran PDF kepada XML.

Buat perpustakaan XMLWriter.
  1. Menghuraikan dan mengekstrak data daripada fail XML
  2. Terdapat banyak cara untuk menghuraikan dan mengekstrak data daripada fail XML. Dalam artikel ini, kami akan menerangkan cara mengekstrak data daripada fail XML menggunakan XPath dan jQuery.
  3. Langkah 1: Ekstrak data daripada fail XML menggunakan XPath
  4. XPath ialah bahasa untuk mencari dan memilih elemen dalam dokumen XML dan HTML. Menggunakan XPath, kami boleh mengekstrak data daripada fail XML.

var xmlDoc = $.parseXML(xmlText),

var text = $page.text();

Dalam coretan kod di atas, kami menggunakan jQuery menghuraikan teks XML ke dalam objek dokumen XML dan mengekstrak data daripadanya menggunakan XPath.

Langkah 2: Ekstrak data daripada fail XML menggunakan jQuery

Menggunakan jQuery, kami boleh mengekstrak data daripada fail XML dengan mudah.
$xml = $(xmlDoc),
$pages = $xml.find('pages'),
$page = $pages.find('page[number="1"]');

var xmlDoc = $.parseXML(xmlText),

var text = $page.text();

Dalam coretan kod di atas, kami mula-mula Gunakan jQuery untuk menghuraikan teks XML ke dalam dokumen XML dan mengekstrak data daripadanya menggunakan jQuery. Dalam contoh ini, kami mencari halaman nombor 1 dan mendapatkan kandungan teks di sana.

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara menukar fail PDF kepada fail XML menggunakan JavaScript dan pustaka PDF.js serta menjana fail XML menggunakan pustaka XMLWriter. Kami juga membincangkan cara menggunakan XPath dan jQuery untuk mengekstrak data daripada fail XML.

Fail XML lebih mudah dihuraikan dan diproses berbanding fail PDF. Dengan menukar fail PDF kepada fail XML, kami boleh menjadikan data lebih mudah untuk diurus dan digunakan, serta menggunakannya dalam pelbagai persekitaran aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk menukar fail PDF kepada format XML menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn