Передайте данные формы заполнения PDF из приложения React в node-pdftk (Express) через POST - PullRequest
Новая
       11

Передайте данные формы заполнения PDF из приложения React в node-pdftk (Express) через POST

0 голосов
/ 18 июня 2020

Вместо того, чтобы объявлять данные формы PDF для заполнения в Express, я хотел бы передать данные формы из моего приложения React в node-pdftk. PDF-файл правильно отображается в браузере с заполненными данными формы, когда я связываюсь с маршрутом / pdf в React: 

<a href="http://localhost:8080/pdf">Form-fill PDF File</a>

Express app: 

const pdftk = require('node-pdftk');

// Rather than declare form data here in Express,
const formdata = {
  'Fill_this_1': 'With this from Express 1',
  'Fill this 2': 'With this from Express 2',
  'Fill this 3': 'With this from Express 3'
}

app.get('/pdf', (req, res, next) => {
  pdftk
      .input('./file.pdf')
      .fillForm(formdata)
      .flatten()
      .output()
      .then(buf => {
          res.type('application/pdf');
          res.send(buf);
      })
      .catch(next);
});

Я бы например, передать данные формы из React через GET или POST: 

import React, { useEffect } from 'react';

const showFile = (blob) => {
  var newBlob = new Blob([blob], {type: "application/pdf"})
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(newBlob);
    return;
  } 
  const data = window.URL.createObjectURL(newBlob);
  var link = document.createElement('a');
  link.href = data;
  link.download="file.pdf";
  link.click();
  setTimeout(function(){
    window.URL.revokeObjectURL(data);
  }, 100);
}

function FillPDFForm() {
    useEffect(() => {
      fillForm();
    }, [])

    // Trying to pass formdata to node-pdftk (Express) via POST
    const fillForm = async () => {
      await fetch('http://localhost:8080/pdf', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/pdf'
        },
        body: JSON.stringify({
        'Fill_this_1': 'With this from React 1',
        'Fill_this_2': 'With this from React 2',
        'Fill_this_3': 'With this from React 3'
      })
    }).then(res => res.blob())
      .then(showFile)
   }
return (null);
}
export default FillPDFForm;

В загружаемом PDF-файле не заполнены поля формы. Есть ли у кого-нибудь опыт передачи данных формы заполнения PDF из React в Express?

1 Ответ

0 голосов
/ 19 июня 2020

Все, что требовалось, это заменить 'Content-Type': 'application/pdf' на 'Content-Type': 'application/json' внутри fillForm. Попытка отправить тело сообщения POST как application / pdf на Express не сработает.

...