JavaScript - 将抽认卡创建为 PDF [关闭]

Question

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

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

抽认卡应位于 2 列 3 行的表格中。左边是ABC等，右边是DEF等

如何从 JSON 对象生成 PDF？

Answer 1

您可以打开一个新窗口，并将其打印为 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