0

Планирую использовать библиотеку 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 сразу, то обработается файл по-умолчанию. А если попробовать загрузить любую пдф, то на неё выдаст ошибку.

1 ответ 1

0

Я разобралась. Нужно использовать дополнительно fileReader.readAsArrayBuffer(files);

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.