Планирую использовать библиотеку https://pdf-lib.js.org/ для редактирования файлов в проекте. В примерах, в коде, везде указаны полные ссылки на редактируемый пдф, и всё работает хорошо. А как мне отредактировать файл, который я загружаю через инпут?
При попытке обработать такой файл получаю ошибку: Error: Failed to parse PDF document (line:0 col:16 offset=8): No PDF header found
пример: https://codepen.io/Raneto4ka/pen/MWjxgQb?editors=1010
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/[email protected]/dist/pdf-lib.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 mt-4">
<form action="" method="POST" enctype="multipart/form-data" id="formFile" class="converter__inner">
<input class="converter__upload-input" id="input" type="file" name="file" accept=".pdf">
</form>
<button class="mjs-modifyPdf">Modify PDF</button>
</div>
</div>
</div>
</body>
</html>
<script>
window.addEventListener('load', () => {
const fileInput = document.getElementById('input');
const { PDFDocument, StandardFonts, grayscale, rgb, degrees } = PDFLib;
const buttonModify = document.querySelector(".mjs-modifyPdf");
fileInput.addEventListener(
'change',
function () {
let uploadedFiles = fileInput.files;
//console.log(uploadedFiles);
modifyPdf(uploadedFiles[0]);
},
false
);
async function modifyPdf(file) {
const url = file.name || 'https://pdf-lib.js.org/assets/with_update_sections.pdf';
const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
const pdfDoc = await PDFDocument.load(existingPdfBytes);
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
const pages = pdfDoc.getPages();
const firstPage = pages[0];
const { width, height } = firstPage.getSize();
firstPage.drawText('Hello', {
x: 5,
y: height / 2 + 300,
size: 50,
font: helveticaFont,
color: rgb(0.95, 0.1, 0.1),
rotate: degrees(-45),
})
const pdfBytes = await pdfDoc.save();
// Trigger the browser to download the PDF document
download(pdfBytes, "pdf-lib_modify_example.pdf", "application/pdf");
}
buttonModify.addEventListener("click", modifyPdf);
});
</script>
Если нажать кнопку Modify PDF сразу, то обработается файл по-умолчанию. А если попробовать загрузить любую пдф, то на неё выдаст ошибку.