使用javascript为pdfmake动态生成行
我会尽我所能解释我想要实现的目标。在数组中有几个字符串。它们根据客户端选择的选项数量动态存储使用javascript为pdfmake动态生成行,javascript,jquery,pdfmake,Javascript,Jquery,Pdfmake,我会尽我所能解释我想要实现的目标。在数组中有几个字符串。它们根据客户端选择的选项数量动态存储 optionschecked = []; $(".optionschosen").each(function() { optionschecked.push($.trim($(this).text())); }); }); 我的目标是，当客户端按“生成我的pdf”时，它会使用pdfmake创建列。我尝试了在线找到的解决方案，但它们似乎不起作用。我的变量是
optionschecked = [];
$(".optionschosen").each(function() {
optionschecked.push($.trim($(this).text()));
});
});
这里有一个简单的表单，允许客户端创建表。 请注意，当您单击按钮时，不会得到响应，字段也不会为空，但它们确实有效。 还请注意，这是非常基本的，您可能希望对其进行更好的样式设置，并可能对其进行扩展，例如，使用内容可编辑的css网格替换表单。 然而，这段代码确实让人理解了主要概念，我希望：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.js" integrity="sha512-TtLC7VxmsBn2S6vL3Ib403LU+Gf8cH4wf7UdOxRBRKVrtLXPjA5Tv4/hY7BwIeGAJ/YKNjRtjG4nTzYD/snZOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js" integrity="sha512-vv3EN6dNaQeEWDcxrKPFYSFba/kgm//IUnvLPMPadaUf5+ylZyx4cKxuc4HdBf0PPAlM7560DV63ZcolRJFPqA==" crossorigin="anonymous"></script>
<title>pdf</title>
</head>
<body>
<form id="form">
<textarea placeholder="Text" cols="50" rows="10" id="content"></textarea> <br>
<input type="number" name="font_size" placeholder="font size" id="font_size"> <br>
<input type="checkbox" name="center" id="center"> <label for="center">Center align?</label> <br>
<input type="checkbox" name="center" id="bold"> <label for="bold">Bold?</label> <br>
<button id="create-cell">Create cell</button>
<hr>
<button id="next-column">Create cell in 2nd column</button>
<br><hr><br>
<button id="export">Export</button>
</form>
<script type="text/javascript">
const form = document.getElementById("form");
const content = document.getElementById("content");
const font_size = document.getElementById("font_size");
const center = document.getElementById("center");
const bold = document.getElementById("bold");
const Export = document.getElementById("export");
const create_cell = document.getElementById("create-cell");
const next_column = document.getElementById("next-column");
const table = []; //this is body
let i = 0;
let widths = ["100%"];
form.addEventListener("submit", function() {
window.event.preventDefault();
});
create_cell.addEventListener("click", function() {
var obk = {
text: content.value,
font_size: font_size.value || 15,
bold: Boolean(bold.checked),
alignment: center.checked ? "center" : "left"
}
table.push([obk]);
console.log(table);
});
next_column.addEventListener("click", function() {
var row = table[i];
var obk = {
text: content.value,
font_size: font_size.value || 15,
bold: Boolean(bold.checked),
alignment: center.checked ? "center" : "left"
}
table[i].push(obk);
widths = ["49%", "49%"];
i++;
});
Export.addEventListener("click", function() {
var dd = {
content: [
{
table: {
widths: widths,
heights: [30],
body: table
}
}
]
}
pdfMake.createPdf(dd).open();
});
</script>
</body>
</html>
pdf
中心对齐
大胆的
创建单元
在第二列中创建单元格
出口
const form=document.getElementById（“表单”）；
const content=document.getElementById（“内容”）；
const font_size=document.getElementById（“font_size”）；
const center=document.getElementById（“中心”）；
const bold=document.getElementById（“bold”）；
const Export=document.getElementById（“导出”）；
const create_cell=document.getElementById（“创建单元格”）；
const next_column=document.getElementById（“下一列”）；
常数表=[]//这是尸体
设i=0；
让宽度=[“100%”；
form.addEventListener（“提交”，函数（）{
window.event.preventDefault（）；
});
创建_cell.addEventListener（“单击”，函数（）{
变量obk={
文本：content.value，
font_size:font_size.value | 15，
粗体：布尔值（粗体。选中），
对齐：居中。选中？“居中”：“左”
}
表1.push（[obk]）；
控制台日志（表）；
});
下一列。addEventListener（“单击”，函数（）{
var行=表[i]；
变量obk={
文本：content.value，
font_size:font_size.value | 15，
粗体：布尔值（粗体。选中），
对齐：居中。选中？“居中”：“左”
}
表[i]。推力（obk）；
宽度=[“49%，“49%”]；
i++；
});
Export.addEventListener（“单击”，函数（）{
变量dd={
内容：[
{
表:{
宽度：宽度，
身高：[30]，
正文：表格
}
}
]
}
创建PDF（dd.open（）；
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.js" integrity="sha512-TtLC7VxmsBn2S6vL3Ib403LU+Gf8cH4wf7UdOxRBRKVrtLXPjA5Tv4/hY7BwIeGAJ/YKNjRtjG4nTzYD/snZOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js" integrity="sha512-vv3EN6dNaQeEWDcxrKPFYSFba/kgm//IUnvLPMPadaUf5+ylZyx4cKxuc4HdBf0PPAlM7560DV63ZcolRJFPqA==" crossorigin="anonymous"></script>
<title>pdf</title>
</head>
<body>
<form id="form">
<textarea placeholder="Text" cols="50" rows="10" id="content"></textarea> <br>
<input type="number" name="font_size" placeholder="font size" id="font_size"> <br>
<input type="checkbox" name="center" id="center"> <label for="center">Center align?</label> <br>
<input type="checkbox" name="center" id="bold"> <label for="bold">Bold?</label> <br>
<button id="create-cell">Create cell</button>
<hr>
<button id="next-column">Create cell in 2nd column</button>
<br><hr><br>
<button id="export">Export</button>
</form>
<script type="text/javascript">
const form = document.getElementById("form");
const content = document.getElementById("content");
const font_size = document.getElementById("font_size");
const center = document.getElementById("center");
const bold = document.getElementById("bold");
const Export = document.getElementById("export");
const create_cell = document.getElementById("create-cell");
const next_column = document.getElementById("next-column");
const table = []; //this is body
let i = 0;
let widths = ["100%"];
form.addEventListener("submit", function() {
window.event.preventDefault();
});
create_cell.addEventListener("click", function() {
var obk = {
text: content.value,
font_size: font_size.value || 15,
bold: Boolean(bold.checked),
alignment: center.checked ? "center" : "left"
}
table.push([obk]);
console.log(table);
});
next_column.addEventListener("click", function() {
var row = table[i];
var obk = {
text: content.value,
font_size: font_size.value || 15,
bold: Boolean(bold.checked),
alignment: center.checked ? "center" : "left"
}
table[i].push(obk);
widths = ["49%", "49%"];
i++;
});
Export.addEventListener("click", function() {
var dd = {
content: [
{
table: {
widths: widths,
heights: [30],
body: table
}
}
]
}
pdfMake.createPdf(dd).open();
});
</script>
</body>
</html>
pdf
中心对齐
大胆的
创建单元
在第二列中创建单元格
出口
const form=document.getElementById（“表单”）；
const content=document.getElementById（“内容”）；
const font_size=document.getElementById（“font_size”）；
const center=document.getElementById（“中心”）；
const bold=document.getElementById（“bold”）；
const Export=document.getElementById（“导出”）；
const create_cell=document.getElementById（“创建单元格”）；
const next_column=document.getElementById（“下一列”）；
常数表=[]//这是尸体
设i=0；
让宽度=[“100%”；
form.addEventListener（“提交”，函数（）{
window.event.preventDefault（）；
});
创建_cell.addEventListener（“单击”，函数（）{
变量obk={
文本：content.value，
font_size:font_size.value | 15，
粗体：布尔值（粗体。选中），
对齐：居中。选中？“居中”：“左”
}
表1.push（[obk]）；
控制台日志（表）；
});
下一列。addEventListener（“单击”，函数（）{
var行=表[i]；
变量obk={
文本：content.value，
font_size:font_size.value | 15，
粗体：布尔值（粗体。选中），
对齐：居中。选中？“居中”：“左”
}
表[i]。推力（obk）；
宽度=[“49%，“49%”]；
i++；
});
Export.addEventListener（“单击”，函数（）{
变量dd={
内容：[
{
表:{
宽度：宽度，
身高：[30]，
正文：表格
}
}
]
}
创建PDF（dd.open（）；
});
optionschosen = [{nom:'test', prix: 100},{nom: 'test', prix: 100}, {nom:'test', prix: 100}];
function buildTableBody(data, columns) {
var body = [];
body.push(columns);
data.forEach(function(row) {
var dataRow = [];
columns.forEach(function(column) {
dataRow.push(row[column].toString());
})
body.push(dataRow);
});
return body;
}
function table(data, columns) {
return {
table: {
widths:['80%', '20%'],
body: buildTableBody(data, columns)
}
};
}
var dd = {
content: [
table(optionschosen, ['nom', 'prix'])
]
}
我自己找到了答案：
optionschosen = [{nom:'test', prix: 100},{nom: 'test', prix: 100}, {nom:'test', prix: 100}];
function buildTableBody(data, columns) {
var body = [];
body.push(columns);
data.forEach(function(row) {
var dataRow = [];
columns.forEach(function(column) {
dataRow.push(row[column].toString());
})
body.push(dataRow);
});
return body;
}
function table(data, columns) {
return {
table: {
widths:['80%', '20%'],
body: buildTableBody(data, columns)
}
};
}
var dd = {
content: [
table(optionschosen, ['nom', 'prix'])
]
}
您好，谢谢您的帮助，但您没有回答我的问题。。。我问如何为由几个字符串组成的数组中的每个元素推送一行。['option 1'，'option 2'，'option 3']。您好，谢谢您的帮助，但您没有回答我的问题。。。我问如何为由几个字符串组成的数组中的每个元素推送一行。[‘方案一’、‘方案二’、‘方案三’]。