Javascript 根据用户输入声明样式设置

嘿，你在这儿

我遇到了一个有点棘手的问题，我试图自己解决，但最近遇到了麻烦。我正在使用JS中的客户端/服务器端PDF打印框架

因此，我得到了一个与jQuery链接的按钮，它将根据用户的输入附加一个文本区域或一个输入字段，以及另一个预览和调用pdfPreview（）函数的按钮。一切都进行得很顺利，我编写了一个函数来获取所有内容，并将其“交给”pdfMake创建一个PDF，然后可以下载

现在pdfMake得到了一个样式定义。（示例可以找到：但我不确定何时为用户给我的输入声明样式

（我的英语不是很好，但我试着一步一步地解释工作过程，这样你就可以跟着我理解我的问题）

• 用户A输入标题和包含内容的文本字段
• 他按下“Preview PDF”按钮，该按钮调用函数previewPDF（）
• previewPDF（）搜索用户输入
• 现在如果用户A输入标题，pdfMake应该为该内容提供定义的样式属性，这些属性来自：defaultStyle
• 如果是textarea，则应为该元素提供定义的样式属性： 文本样式
• 函数获得用户输入的所有内容并根据输入的内容声明每个元素的样式后（我认为这是一个示例，但我不确定），它将保存到

  content=[]

• 现在，我调用pdfMake提供的

  docdefination={}

  ，说

  content:content

  ，并声明不同的样式（例如，请参见codepen）
• pdfMake创建pdf并为用户提供预览

在第4步和第6步之间，我是否可以说“嘿，这是一个标题，请记住稍后为这部分内容提供默认样式设置”作为“嘿，这是用户a的文本字段输入，请记住稍后为这部分内容提供文本样式设置”

我真的很喜欢做这件事，看到一些东西在起作用真的很有趣（写这个部分来获取所有的内容真的很酷），所以我不是在寻找一个简单的解决方案，但我很感谢我能得到的每一个帮助

这是密码笔

---

编辑：我完全忘了告诉=要在codepen中预览pdf，请打开控制台查看dataURL。我不知道为什么它不能与我创建的iframe（在我的开发网站空间上工作）一起工作。

推送内容时，需要指定样式。例如：

//yourcode
     contentFinal.push({text: contentText, style: 'textStyle'});
//yourcode
     contentFinal.push({text: contentHead, style: 'defaultStyle'});

 // Show Content on PDF
 var content = contentFinal;
 var docDefinition = {
   content: content,
   styles: {
   // Declare styles
   defaultStyle: {
     font: 'Roboto',
     fontSize: '50',
   },

   textStyle: {
     font: 'Roboto',
     fontSize: '1',
   }
   }
 };
 //yourcode

在pdf模板中，在

style

对象中包含样式类型，例如：

//yourcode
     contentFinal.push({text: contentText, style: 'textStyle'});
//yourcode
     contentFinal.push({text: contentHead, style: 'defaultStyle'});

 // Show Content on PDF
 var content = contentFinal;
 var docDefinition = {
   content: content,
   styles: {
   // Declare styles
   defaultStyle: {
     font: 'Roboto',
     fontSize: '50',
   },

   textStyle: {
     font: 'Roboto',
     fontSize: '1',
   }
   }
 };
 //yourcode

---

演示代码笔：

刚刚检查了代码笔。它工作得很好！我会尽快详细检查您的解决方案。非常感谢您的时间和努力！