尝试使用 Electron 和 node-html-pdf 创建 PDF 时出错

编程问答 2022-04-30

问题描述

我有这个小应用程序，可以使用 html-pdf 从电子中的简单形式创建 PDF，当我运行 npm start(electron .) 时它工作正常，但是当我尝试生成 PDF 时，我得到了构建后这个错误：

mais 进程发生 JavaScript 错误
错误：写入 EPIPE
在 afterWritedispatched(internal/stream_base_commons.js:156:25)
在 writeGeneric (internal/stream_base_commons.js:147:3)

enter image description here

这是我的主文件“index.js”

   const { app,browserWindow,ipcMain } = require("electron");
   const pdf = require("html-pdf");
   const path = require("path");
   function createWindow() {
     const win = new browserWindow({
       width: 1000,height: 500,webPreferences: {
         nodeIntegration: true,contextIsolation: false,},});
   
     win.loadFile("views/index.html");
   }
   
   app.whenReady().then(() => {
     createWindow();
     app.on("activate",() => {
       if (browserWindow.getAllWindows().length === 0) {
         createWindow();
       }
     });
   });
   
   //PDF Template
   function createTemplatePDF(formData) {
     return `<!DOCTYPE>
     <html>
     <head></head>
     <body>
       <div>
       <h1>${formData.name}</h1>
       <p>${formData.text}</p>
       </div>  
     </body>
     </html>
       `;
   }
   
   //create PDF
   function createPDF(data) {
     const templatePDF = createTemplatePDF(data); // create template from the form inputs
     return new Promise((resolve,reject) => {
       pdf
         .create(templatePDF)
         .toFile(path.join(__dirname,"views/PDF/result.pdf"),(err,res) => {
           if (err) reject();
           else resolve(res);
         });
     });
   }
   
   //IPC Catch
   ipcMain.on("item:submit",(e,item) => {
     //item is the object with the infos of the form
     const novoPDF = createPDF(item); // call the createPDF function
     novoPDF
       .then(() => {
         console.log("PDF created!");
       })
       .catch((err) => {
         console.log(err);
       });
   });
   
   app.on("window-all-closed",() => {
     if (process.platform !== "darwin") {
       app.quit();
     }
   });

这是我的网页，格式为“index.html”

    <!DOCTYPE html>
    <html lang="en">
      <head></head> 
      <body>
    
        <form id="form">
          <div><label>Name: </label> <input id="name" type="text" /></div>
          <div><label>text: </label> <textarea id="text"></textarea></div>
          <button type="submit">Generate PDF</button>
        </form>    
        <script>
          const { ipcRenderer } = require("electron");
          const form = document.querySelector("#form");
          form.addEventListener("submit",sendForm);
          function sendForm(e) {
            e.preventDefault();
            let input_name = e.target.name.value;
            let input_text = e.target.text.value;
     
            let data = {
              name: input_name,text: input_text
            };
            ipcRenderer.send("item:submit",data);
          }
        </script>
      </body>
    </html>

我的 package.json

{
  "name": "electron_create_pdf","version": "1.0.0","description": "","main": "index.js","scripts": {
    "start": "electron .","package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\""
  },"author": "","license": "ISC","dependencies": {
    "electron": "^12.0.8","electron-packager": "^15.2.0","express": "^4.17.1","html-pdf": "^3.0.1"
  }
}

我的文件夹项目

ELECTRON_CREATE_PDF
|- node_modules
|- release_builds
|- views
|  |-PDF
|     |-result.pdf 
|-index.js
|-package.json

感谢所有花时间的人。

解决方法

所以我在这个 post 中发现了与电子 pdf 类似的错误，解决了将“电子 pdf”更改为 node_module 外部的父文件夹的问题，与不允许任何写操作的“asar”。就我而言，我需要做的是改变我的编译器方法，所以我首先使用样板创建了一个新项目，

"npm create-electron-app"

已经有了一种构建应用程序的方法，即“npm run make”，它显然解决了使用 node_modules 中的 html-pdf 编写的权限问题，构建后工作正常.

electronelectronnode-html-pdfpipestream