PDF 파일 형식은 다양한 장치와 플랫폼에서 볼 수 있고 문서 구조와 형식을 보존하는 널리 사용되는 파일 형식입니다. 하지만 PDF 파일의 내용을 변경하거나 편집해야 하는 경우도 있고, PDF 파일은 편집하거나 변경하기 쉬운 파일 형식이 아닙니다. 따라서 XML 형식은 구문 분석 및 편집이 쉽고 다양한 응용 프로그램 환경에 적용할 수 있으므로 PDF 파일을 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 페이지 만들기
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>
이 HT에서는 ML 페이지에서는 PDF 파일을 업로드하기 위한 입력 요소와 PDF 파일 및 변환된 XML 파일을 각각 표시하기 위한 두 개의 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, 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" 인코딩="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('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 handlerFileSelect() {
var file = document.getElementById('pdf-file').files[0];
if (파일) {
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 파일을 업로드하면 handlerFileSelect 함수가 파일을 로드하고 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 파일로 변환하는 것은 매우 간단하며 프로세스에는 몇 가지 단계만 포함됩니다.
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를 사용하고 XPath를 사용하여 XML 텍스트를 XML 문서 개체로 구문 분석하고 있습니다. 데이터를 추출합니다.
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 파일에서 데이터를 추출하는 방법도 다루었습니다.
XML 파일은 PDF 파일보다 구문 분석 및 처리가 더 쉽습니다. PDF 파일을 XML 파일로 변환함으로써 데이터를 보다 쉽게 관리하고 사용할 수 있으며, 다양한 애플리케이션 환경에서 사용할 수 있습니다.
위 내용은 JavaScript를 사용하여 PDF 파일을 XML 형식으로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
