Question

嘿，有Stackoverflow！

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

所以我得到了一个与jQuery .append()相关联的按钮，它会根据用户的输入添加文本区域或输入字段，以及另一个预览和调用pdfPreview的按钮（）功能。一切顺利，我写了一个功能，以获取所有的内容和＃34;给＆＃34;它来pdfMake创建一个PDF然后可以下载。

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

（我的英语不是很好，但我会逐步解释工作流程，以便你可以关注我并理解我的问题）

用户A输入带有内容的标题和文本字段
他按下按钮＆＃39;预览PDF＆＃39;它调用函数previewPDF（）
previewPDF（）搜索用户输入
NOW 如果用户A输入标题pdfMake应该为此内容提供以下定义的样式属性：defaultStyle
如果它是textarea，它应该为此元素提供已定义的样式属性： TEXTSTYLE
在函数获取了用户输入的所有内容并根据他输入的内容为每个元素声明了样式（我认为它是object但是我我不确定）它被保存到content=[]
现在我调用pdfMake提供的docDefintion= {}并说出content: content并声明不同的样式（例如参见codepen）
pdfMake创建pdf并为用户提供预览

有什么方法我可以在第4步和第6步之间说出＆＃34;嘿这是一个标题所以请记住稍后将这部分内容作为默认样式设置＆＃34; as＆＃34;嘿，这是来自用户A的文本字段输入，所以请记住稍后将这部分内容提供给textStyle设置＆＃34;

我真的很想研究这件事，看到一些有用的东西真的很有趣（编写部分以使所有内容真的很酷）所以我并不是在寻找一个带走的解决方案，但我感谢每一个帮助我能得到。

以下是codepen http://codepen.io/anon/pen/BKrrBN

编辑：我完全忘了告诉=要在codepen中预览pdf，请打开控制台以查看dataURL。我不知道为什么它不能与我创建的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

根据用户输入

1 个答案: