Оглавление
Установить через npm
npm i spire.pdf
Ссылки по теме
Преобразование PDF-файлов в HTML в приложении React позволяет пользователям преобразовывать статические документы в динамический, доступный веб-контент. Этот подход повышает отзывчивость на разных устройствах, упрощает обновление контента и интегрируется непосредственно в веб-страницы, устраняя необходимость во внешних просмотрщиках PDF-файлов. Он сохраняет исходную компоновку, используя при этом собственные веб-функции, такие как обновления пользовательского интерфейса, управляемые состоянием. Объединяя структуру PDF-файлов с гибкостью современных веб-интерфейсов, этот метод создает контент, который является как адаптивным, так и удобным для пользователя, не ставя под угрозу целостность дизайна.
В этой статье мы рассмотрим, как использовать Spire.PDF для JavaScript для преобразования PDF-файлов в HTML с помощью JavaScript в приложении React .
- Шаги по конвертации PDF в HTML с использованием JavaScript
- Преобразовать PDF-документ в один HTML-файл
- Конвертировать PDF в HTML без встраивания изображений
- Конвертировать PDF в отдельные файлы HTML
- Оптимизируйте размер преобразованного HTML-файла
Установите и настройте Spire.PDF для JavaScript в вашем приложении React
Чтобы начать преобразование PDF-файлов в HTML в приложении React, выполните следующие действия:
1. Установка через npm:
Выполните следующую команду в корневом каталоге вашего проекта:
npm install spire.pdf
(Кроме того, вы можете загрузить Spire.PDF для JavaScript с нашего веб-сайта.)
2. Добавьте необходимые файлы:
Скопируйте файлы Spire.Pdf.Base.js и Spire.Pdf.Base.wasm в публичную папку вашего проекта. Это гарантирует правильную инициализацию модуля WebAssembly.
3. Включить файлы шрифтов:
Поместите необходимые файлы шрифтов в указанную папку (например, /public/fonts), чтобы обеспечить точную и единообразную визуализацию текста.
Более подробную информацию можно найти в нашей документации: Как интегрировать Spire.PDF для JavaScript в проект React.
Шаги по конвертации PDF в HTML с использованием JavaScript
Spire.PDF для JavaScript включает модуль WebAssembly для обработки PDF-документов. Извлекая PDF-файлы в виртуальную файловую систему (VFS), разработчики могут загружать их в объект PdfDocument и конвертировать их в различные форматы, такие как HTML. Основные шаги следующие:
- Загрузите файл Spire.Pdf.Base.js для инициализации модуля WebAssembly.
- Загрузите PDF-файл в VFS с помощью метода wasmModule.FetchFileToVFS() .
- Загрузите файлы шрифтов, используемые в документе PDF, в папку «/Library/Fonts/» в VFS с помощью метода wasmModule.FetchFileToVFS() .
- Создайте экземпляр класса PdfDocument с помощью метода wasmModule.PdfDocument.Create() .
- (Необязательно) Настройте параметры преобразования с помощью метода PdfDocument.ConvertOptions.SetPdfToHtmlOptions() .
- Конвертируйте PDF-документ в формат HTML и сохраните его в VFS с помощью метода PdfDocument.SaveToFile() .
- Прочитайте и загрузите HTML-файл или используйте его по мере необходимости.
При настройке параметров конвертации с помощью метода PdfDocument.ConvertOptions.SetPdfToHtmlOptions() можно задать следующие параметры:
| Параметр | Описание |
| useEmbeddedSvg: bool | Встраивает SVG в полученный HTML-файл. |
| useEmbeddedImg: bool | Встраивает изображения в виде SVG в результирующий HTML-файл (требуется, чтобы useEmbeddedSvg имел значение true). |
| maxPageOneFile: int | Указывает максимальное количество страниц PDF, содержащихся в одном HTML-файле (действует, если useEmbeddedSvg имеет значение true). |
| useHighQualityEmbeddedSvg: bool | Встраивает высококачественные SVG в HTML-файл. Это влияет как на качество изображения, так и на размер файла (действует, когда useEmbeddedSvg имеет значение true). |
Преобразовать PDF-документ в один HTML-файл
Внедряя SVG и изображения и устанавливая максимальное количество страниц на файл на общее количество страниц PDF или на 0, разработчики могут преобразовать весь документ PDF в один HTML-файл. В качестве альтернативы разработчики могут преобразовать PDF без настройки каких-либо параметров, что приводит к внедрению всех элементов в HTML-файл с высококачественными SVG.
Ниже приведен пример кода, демонстрирующий, как преобразовать PDF-документ в один HTML-файл с помощью Spire.PDF для JavaScript:
- JavaScript
import React, { useState, useEffect } from 'react';
import JSZip from 'jszip';
function App() {
// State to store the loaded WASM module
const [wasmModule, setWasmModule] = useState(null);
// useEffect hook to load the WASM module when the component mounts
useEffect(() => {
const loadWasm = async () => {
try {
// Access the Module and spirepdf from the global window object
const { Module, spirepdf } = window;
// Set the wasmModule state when the runtime is initialized
Module.onRuntimeInitialized = () => {
setWasmModule(spirepdf);
};
} catch (err) {
// Log any errors that occur during module loading
console.error('Failed to load the WASM module:', err);
}
};
// Create a script element to load the WASM JavaScript file
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
script.onload = loadWasm;
// Append the script to the document body
document.body.appendChild(script);
// Cleanup function to remove the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
// Function to convert PDF to HTML
const ConvertPDFToHTML = async () => {
if (wasmModule) {
// Specify the input and output file names
const inputFileName = 'Sample.pdf';
const outputFileName = 'PDFToHTML.html';
// Fetch the input file and add it to the VFS
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// Fetch the font file used in the PDF to the VFS
await wasmModule.FetchFileToVFS('Calibri.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('CalibriBold.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// Create an instance of the PdfDocument class
const pdf = wasmModule.PdfDocument.Create();
// Load the PDF document from the VFS
pdf.LoadFromFile(inputFileName);
// Convert the PDF document to an HTML file
pdf.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.HTML});
// Set the conversion options (optional)
pdf.ConvertOptions.SetPdfToHtmlOptions({ useEmbeddedSvg: true, useEmbeddedImg: true, maxPageOneFile: pdf.Pages.Count, useHighQualityEmbeddedSvg: true})
// Read the HTML file from the VFS
const htmlArray = wasmModule.FS.readFile(outputFileName)
// Create a Blob from the HTML file and download it
const blob = new Blob([htmlArray], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = outputFileName;
link.click();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Convert PDF to HTML Using JavaScript in React</h1>
<button onClick={ConvertPDFToHTML} disabled={!wasmModule}>
Convert and Download
</button>
</div>
);
}
export default App;
Конвертировать PDF в HTML без встраивания изображений
Чтобы отделить тело HTML от изображений для более легкого индивидуального редактирования, разработчики могут конвертировать PDF-файлы в HTML без внедрения изображений и SVG. Для этого необходимо установить параметры useEmbeddedSvg и useEmbeddedImg на false.
Ниже приведен пример кода, демонстрирующий это преобразование и его результат:
- JavaScript
import React, { useState, useEffect } from 'react';
import JSZip from 'jszip';
function App() {
// State to store the loaded WASM module
const [wasmModule, setWasmModule] = useState(null);
// useEffect hook to load the WASM module when the component mounts
useEffect(() => {
const loadWasm = async () => {
try {
// Access the Module and spirepdf from the global window object
const { Module, spirepdf } = window;
// Set the wasmModule state when the runtime is initialized
Module.onRuntimeInitialized = () => {
setWasmModule(spirepdf);
};
} catch (err) {
// Log any errors that occur during module loading
console.error('Failed to load the WASM module:', err);
}
};
// Create a script element to load the WASM JavaScript file
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
script.onload = loadWasm;
// Append the script to the document body
document.body.appendChild(script);
// Cleanup function to remove the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
// Function to convert PDF to HTML
const ConvertPDFToHTML = async () => {
if (wasmModule) {
// Specify the input and output file names
const inputFileName = 'Sample.pdf';
const outputFileName = '/output/PDFToHTML.html';
// Fetch the input file and add it to the VFS
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// Fetch the font file used in the PDF to the VFS
await wasmModule.FetchFileToVFS('Calibri.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('CalibriBold.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// Create an instance of the PdfDocument class
const pdf = wasmModule.PdfDocument.Create();
// Load the PDF document from the VFS
pdf.LoadFromFile(inputFileName);
// Set the conversion options to disable SVG and image embedding
pdf.ConvertOptions.SetPdfToHtmlOptions({ useEmbeddedSvg: false, useEmbeddedImg: false})
// Convert the PDF document to an HTML file
pdf.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.HTML});
// Create a new JSZip object
const zip = new JSZip();
// Recursive function to add a directory and its contents to the ZIP
const addFilesToZip = (folderPath, zipFolder) => {
const items = wasmModule.FS.readdir(folderPath);
items.filter(item => item !== "." && item !== "..").forEach((item) => {
const itemPath = `${folderPath}/${item}`;
try {
// Attempt to read file data
const fileData = wasmModule.FS.readFile(itemPath);
zipFolder.file(item, fileData);
} catch (error) {
if (error.code === 'EISDIR') {
// If it's a directory, create a new folder in the ZIP and recurse into it
const zipSubFolder = zipFolder.folder(item);
addFilesToZip(itemPath, zipSubFolder);
} else {
// Handle other errors
console.error(`Error processing ${itemPath}:`, error);
}
}
});
};
// Add all files in the output folder to the ZIP
addFilesToZip('/output', zip);
// Generate and download the ZIP file
zip.generateAsync({ type: 'blob' }).then((content) => {
const url = URL.createObjectURL(content);
const a = document.createElement('a');
a.href = url;
a.download = `PDFToHTML.zip`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Convert PDF to HTML Without Embedding Images Using JavaScript in React</h1>
<button onClick={ConvertPDFToHTML} disabled={!wasmModule}>
Convert and Download
</button>
</div>
);
}
export default App;
Конвертировать PDF в отдельные файлы HTML
Вместо того, чтобы преобразовывать все страницы PDF в один HTML-файл, разработчики могут задать параметр maxPageOneFile для генерации нескольких HTML-файлов, каждый из которых содержит ограниченное количество страниц. Чтобы это работало, useEmbeddedSvg и useEmbeddedImg должны быть установлены в значение true.
Ниже приведен пример кода, демонстрирующий это преобразование и его эффект:
- JavaScript
import React, { useState, useEffect } from 'react';
import JSZip from 'jszip';
function App() {
// State to store the loaded WASM module
const [wasmModule, setWasmModule] = useState(null);
// useEffect hook to load the WASM module when the component mounts
useEffect(() => {
const loadWasm = async () => {
try {
// Access the Module and spirepdf from the global window object
const { Module, spirepdf } = window;
// Set the wasmModule state when the runtime is initialized
Module.onRuntimeInitialized = () => {
setWasmModule(spirepdf);
};
} catch (err) {
// Log any errors that occur during module loading
console.error('Failed to load the WASM module:', err);
}
};
// Create a script element to load the WASM JavaScript file
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
script.onload = loadWasm;
// Append the script to the document body
document.body.appendChild(script);
// Cleanup function to remove the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
// Function to convert PDF to HTML
const ConvertPDFToHTML = async () => {
if (wasmModule) {
// Specify the input and output file names
const inputFileName = 'Sample.pdf';
const outputFileName = '/output/PDFToHTML.html';
// Fetch the input file and add it to the VFS
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// Fetch the font file used in the PDF to the VFS
await wasmModule.FetchFileToVFS('Calibri.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('CalibriBold.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// Create an instance of the PdfDocument class
const pdf = wasmModule.PdfDocument.Create();
// Load the PDF document from the VFS
pdf.LoadFromFile(inputFileName);
// Set the conversion options to disable SVG and image embedding
pdf.ConvertOptions.SetPdfToHtmlOptions({ useEmbeddedSvg: false, useEmbeddedImg: false, maxPageOneFile: 1 })
// Convert the PDF document to an HTML file
pdf.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.HTML});
// Create a new JSZip object
const zip = new JSZip();
// Recursive function to add a directory and its contents to the ZIP
const addFilesToZip = (folderPath, zipFolder) => {
const items = wasmModule.FS.readdir(folderPath);
items.filter(item => item !== "." && item !== "..").forEach((item) => {
const itemPath = `${folderPath}/${item}`;
try {
// Attempt to read file data
const fileData = wasmModule.FS.readFile(itemPath);
zipFolder.file(item, fileData);
} catch (error) {
if (error.code === 'EISDIR') {
// If it's a directory, create a new folder in the ZIP and recurse into it
const zipSubFolder = zipFolder.folder(item);
addFilesToZip(itemPath, zipSubFolder);
} else {
// Handle other errors
console.error(`Error processing ${itemPath}:`, error);
}
}
});
};
// Add all files in the output folder to the ZIP
addFilesToZip('/output', zip);
// Generate and download the ZIP file
zip.generateAsync({ type: 'blob' }).then((content) => {
const url = URL.createObjectURL(content);
const a = document.createElement('a');
a.href = url;
a.download = `PDFToHTML.zip`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Convert PDF to HTML Without Embedding Images Using JavaScript in React
Convert and Download
Оптимизируйте размер преобразованного HTML-файла
При внедрении SVG в преобразованный HTML-файл разработчики могут оптимизировать размер файла, снизив качество внедренных SVG с помощью параметра useHighQualityEmbeddedSvg . Обратите внимание, что этот параметр влияет только на внедренные SVG.
Ниже приведен пример кода, демонстрирующий эту оптимизацию и ее эффект:
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// State to store the loaded WASM module
const [wasmModule, setWasmModule] = useState(null);
// useEffect hook to load the WASM module when the component mounts
useEffect(() => {
const loadWasm = async () => {
try {
// Access the Module and spirepdf from the global window object
const { Module, spirepdf } = window;
// Set the wasmModule state when the runtime is initialized
Module.onRuntimeInitialized = () => {
setWasmModule(spirepdf);
};
} catch (err) {
// Log any errors that occur during module loading
console.error('Failed to load the WASM module:', err);
}
};
// Create a script element to load the WASM JavaScript file
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
script.onload = loadWasm;
// Append the script to the document body
document.body.appendChild(script);
// Cleanup function to remove the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
// Function to convert PDF to HTML
const ConvertPDFToHTML = async () => {
if (wasmModule) {
// Specify the input and output file names
const inputFileName = 'Sample.pdf';
const outputFileName = 'PDFToHTML.html';
// Fetch the input file and add it to the VFS
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// Fetch the font file used in the PDF to the VFS
await wasmModule.FetchFileToVFS('Calibri.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('CalibriBold.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// Create an instance of the PdfDocument class
const pdf = wasmModule.PdfDocument.Create();
// Load the PDF document from the VFS
pdf.LoadFromFile(inputFileName);
// Set the conversion options to convert with lower quality embedded SVG
pdf.ConvertOptions.SetPdfToHtmlOptions({ useEmbeddedSvg: true, useEmbeddedImg: true, maxPageOneFile: 0, useHighQualityEmbeddedSvg: false })
// Convert the PDF document to an HTML file
pdf.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.HTML});
// Read the HTML file from the VFS
const htmlArray = wasmModule.FS.readFile(outputFileName)
// Create a Blob from the HTML file and download it
const blob = new Blob([htmlArray], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = outputFileName;
link.click();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Convert PDF to HTML Optimize File Size Using JavaScript in React</h1>
<button onClick={ConvertPDFToHTML} disabled={!wasmModule}>
Convert and Download
</button>
</div>
);
}
export default App;
Запросить бесплатную лицензию
Spire.PDF для JavaScript предлагает бесплатную пробную лицензию как для корпоративных, так и для индивидуальных пользователей. Вы можете подать заявку на временную лицензию для преобразования PDF-документов в HTML без каких-либо ограничений использования или водяных знаков.
Если у вас возникли проблемы во время конвертации, техническая поддержка доступна на форуме Spire.PDF .
Заключение
Преобразование PDF в HTML в вашем приложении React с помощью Spire.PDF для JavaScript преобразует статические документы в динамический, доступный веб-контент. С простой установкой npm, правильной настройкой файлов JavaScript, WASM и шрифтов, а также несколькими вариантами преобразования, включая вывод в виде одного файла, отдельные страницы и невстроенные изображения, вы можете сохранить точность макета, одновременно разблокировав современные веб-функции, такие как обновления пользовательского интерфейса на основе состояния.
Для расширенной настройки обязательно ознакомьтесь с документацией .