Преобразование HTML-строки, включая стиль, в PDF (Electron - React - Typescript)

Question

_____ Обзор проекта _____

Я создаю приложение Electron, используя React и Typescript, в котором я читаю простую строку HTML в памяти, чтобы затем настроить некоторые элементы в ней и, наконец,преобразовать его в pdf.

_____ Описание проблемы _____

Поскольку HTML-код никогда не отображается (он находится только в памяти), я не уверен, как конвертироватьHTML (со стилем) в PDF без рендеринга HTML в первую очередь.

_____ То, что я пробовал _____

• Я пытался использовать комбинацию html2canvas и jspdf.jspdf отлично работает, чтобы преобразовать HTML, без стилизации, в PDF, но мне нужно оформление.Поэтому я попытался сначала получить «скриншот» своей страницы с помощью html2canvas, но это не удалось, потому что страница никогда не отображалась.
• Я попытался использовать electron-pdf, но не смог заставить это работать в моем приложении,Хотя он отлично работает как инструмент командной строки, поэтому можно было бы вызвать инструмент командной строки.Я думаю, что это должно сработать, но это кажется очень хакерским (поэтому я предпочел бы не идти по этому пути).

_____ Код _____

const createPDF = async (invoiceData: IInvoiceFields) => {
  const invoiceTemplate = fs
    .readFileSync(
      resolve(
        remote.app.getAppPath(),
        "src",
        "invoice_templates",
        "invoice_EN.html"
      )
    )
    .toString();
  const invoiceHTMLString = fillInInvoice(invoiceTemplate, invoiceData);
  const domParser = new DOMParser();
  const invoiceHTMLDocument = domParser.parseFromString(
    invoiceHTMLString,
    "text/html"
  );
  // TODO: Create actual pdf...
};

Answer 1

Согласно Создание PDF с Electron.js , представляется возможным использовать webContents метод printToPDF в новом BrowserWindow без фактического отображения окна:

window_to_PDF = new BrowserWindow({show : false});//to just open the browser in background

window_to_PDF.loadURL('anylink.html'); //give the file link you want to display

function pdfSettings() {
    var paperSizeArray = ["A4", "A5"];
    var option = {
        landscape: false,
        marginsType: 0,
        printBackground: false,
        printSelectionOnly: false,
        pageSize: paperSizeArray[settingCache.getPrintPaperSize()-1],
    };
  return option;
}

window_to_PDF.webContents.on("did-finish-load", function() {
  window_to_PDF.webContents.printToPDF(pdfSettings(), function(err, data) {
      if (err) {
          //do whatever you want
          return;
      }
      try{
          fs.writeFileSync('./generated_pdf.pdf', data);
      }catch(err){
          //unable to save pdf..
      }
  });
});

Итак, в вашем случае вам, возможно, придется записать сгенерированный HTML-код во временный файл anylink.html, а затем использовать loadURL или предпочтительно loadFile для его загрузки.в окне «вне экрана».