创建JavaScript格式的抽认卡
创建JavaScript格式的抽认卡
提问于 2018-06-04 02:46:18
我有一个JSON对象，我需要转换为一个可下载的PDF文件在闪存卡的格式。以下是JSON的一个示例：
{
questions : [
{"front": "ABC", "back" : "DEF"},
{"front": "HIJ", "back" : "KLM"},
{"front": "NOP", "back" : "QRS"}
]
}抽认卡应该在一个2列3行的表格中。左边是ABC等，右边是DEF等
如何从JSON对象生成PDF？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-04 04:31:36
你可以打开一个新窗口，打印成PDF：JSFiddle
(请确保允许弹出窗口，否则将无法工作。)
let questions = [
{"front": "ABC", "back" : "DEF"},
{"front": "HIJ", "back" : "KLM"},
{"front": "NOP", "back" : "QRS"}
];
function printCards() {
let container = document.createElement("div");
questions.forEach(question => {
let card = document.createElement("div");
card.classList.add("card");
let front = document.createElement("div");
front.classList.add("front");
front.textContent = question.front;
card.appendChild(front);
let back = document.createElement("div");
back.classList.add("back");
back.textContent = question.back;
card.appendChild(back);
container.appendChild(card);
});
let style = document.getElementById('style');
let printWindow = window.open("", "print", "");
printWindow.document.open();
printWindow.document.write(container.outerHTML + style.outerHTML);
printWindow.document.close();
printWindow.print();
}<style id="style">
div.card {
border: 1px solid black;
width: 12cm;
}
div.card > div {
display: inline-block;
height: 4cm;
width: 6cm;
}
div.front {
background-color: green;
}
div.back {
background-color: red;
}
</style>
<button onclick="printCards();">Print</button>默认情况下，大多数浏览器在打印时会删除背景色。您可以通过更改设置来保留背景图形：
Chrome
Firefox
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50669805
复制相关文章
相似问题