在一个js文件中，我正在为对象分配数据。该对象具有一组对象。
const data = {
details: [
{name: 'John', surname: 'Smith'},
{name: 'Will', surname: 'Smith'},
{name: 'Jessica', surname: 'Smith'}
]
};
我想在下面的js文件中调用这个数组。这个js文件将以html格式返回。我想在html中调用data.details并以html表格式获取它。当我直接在html中传递数组时，它可以工作。但是当我将它作为$ data.details传递时，它不起作用。
const PDF = data => {
return `<!doctype html>
<html lang="en">
<div>
<p class="note">
<b>Details:</b>
</p>
<table border="1" cellpadding="0" cellspacing="0" style="font-size: 14px; width: 500px;">
<thead>
<tr>
<th scope="col">
<h5>Name</h5>
</th>
<th scope="col">
<h5>Surname</h5>
</th>
</tr>
</thead>
<tbody>
<script language="javascript" type="text/javascript">
var details = ${data.details};
for (var i = 0; i < details.length; i++) {
document.write("<tr><td>" + details[i].name + "</td>");
document.write("<td>" + details[i].surname + "</td>");
}
</script>
</tbody>
</table>
</div>
</body>
</html>`;
};
export default { PDF };
请帮助实现这一目标。谢谢。
我不明白你为什么选择这种方式但你可以通过jQuery将外部js文件加载到js文件中。
$.getScript("script1.js", function() {
console.log("script1 loaded. You can use script1 variables here!");
});
如果数据已在服务器端可用，则无需在客户端呈现它。只需立即构建你的桌子。
const PDF = data => {
const renderRow = detail => `
<tr>
<td>${detail.name}</td>
<td>${detail.surname}</td>
</tr>
`
const renderDetails = data => {
return data.details.map(renderRow)
}
return `<!doctype html>
<html lang="en">
<div>
<p class="note">
<b>Details:</b>
</p>
<table border="1" cellpadding="0" cellspacing="0" style="font-size: 14px; width: 500px;">
<thead>
<tr>
<th scope="col">
<h5>Name</h5>
</th>
<th scope="col">
<h5>Surname</h5>
</th>
</tr>
</thead>
<tbody>
${renderDetails(data)}
</tbody>
</table>
</div>
</body>
</html>`;
};
export default {PDF};