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

Question

嘿，Stackoverflow!

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

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

现在 pdfMake 有了样式定义。 (可以找到示例:here 但我不确定何时为用户给我的输入声明样式。

(我的英语不是很好，但我会尝试逐步解释工作过程，这样您可能会跟着我理解我的问题)

• 用户 A 输入标题和包含内容的文本字段
• 他按下调用函数 previewPDF() 的“预览 PDF”按钮
• previewPDF() 搜索用户输入
• 现在 如果用户 A 放入标题 pdfMake 应该为该内容提供定义的样式属性:defaultStyle
• 如果它是一个文本区域，它应该给这个元素定义的样式属性:文本样式
• 在函数获得用户输入的所有内容并根据他输入的内容声明每个元素的样式后(我认为这是一个 object 但我不确定)它是保存到 content=[]
• 现在我调用 pdfMake 提供的 docDefintion= {} 并说 content: content 并声明不同的样式(例如，参见 codepen)
• pdfMake 创建 pdf 并为用户提供预览

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

我真的很喜欢做这件事，看到一些东西工作真的很有趣(编写部分以获取所有内容真的很酷)所以我并不是在寻找一个拿走就走的解决方案，但我感谢每一个帮助我能得到。

这是代码笔 http://codepen.io/anon/pen/BKrrBN

编辑:我完全忘了告诉 = 要在 codepen 中预览 pdf，请打开您的控制台以查看数据 URL。我不知道为什么它不能与我创建的 iframe 一起使用(在我的开发网站空间上工作)

Answer 1

推送内容时需要指定样式。像这样的东西:

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

在您的 pdf 模板中，将样式类型包含在 styles 对象中，例如:

 // 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

演示代码笔:http://codepen.io/anon/pen/zqWjKg