JavaScript-将抽认卡创建为PDF

我有一个JSON对象，我需要将其转换为可下载的PDF文件，格式为FlashCard。以下是JSON的一个示例：

{
    questions : [
        {"front": "ABC", "back" : "DEF"},
        {"front": "HIJ", "back" : "KLM"},
        {"front": "NOP", "back" : "QRS"}
    ]
}

抽认卡应位于一个2列3行的表格中。左侧为ABC等，右侧为DEF等

---

如何从JSON对象生成PDF？

您可以打开一个新窗口，并将其打印为PDF:

（请确保允许弹出窗口，否则它将无法工作。）

---

---

分区卡{
边框：1px纯黑；
宽度：12厘米；
}
div.card>div{
显示：内联块；
高度：4厘米；
宽度：6厘米；
}
正面分区{
背景颜色：绿色；
}
副手{
背景色：红色；
}
印刷品

---

默认情况下，大多数浏览器在打印时都会删除背景色。您可以通过更改设置来保留背景图形：

Chrome

Firefox

---

当我点击代码中的按钮时，我会被带到要打印的卡片页面，但颜色丢失，一些边框消失。有什么方法可以防止这种情况发生吗？@marmadukeandbob我编辑了我的答案。如果这个程序是由任何人运行的，他们都必须这样做吗？有没有办法将其作为默认值启用？此外，一些边界仍然隐藏

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>