html - 与 html2canvas 和 nodejs 类似的解决方案

Question

我正在使用css、jquery和nodejs(带有ejs和express)来创建一个网站，我需要导出一个带有一些文本的div和一些带有背景图像的div作为图像(jpg或png)，但最好是pdf。我尝试使用 html2canvas 但后来我读到它与 nodejs 不兼容。我也尝试过使用 jspdf 但它不会导出 pdf 文件中的 css。所以我想知道是否有人知道可以使用nodejs 实现这一点的解决方案。

这是我的 ejs 代码的示例:

<%for(var j = 0; j < rawData.scanner.length; ++j) {%>
<div class="grid" id="grid-<%= data.scanner[j].camera%>" 
    style="
    width : <%= parseFloat(data.widthScreen) + 17%>px; 
    height : <%= parseFloat(data.heightScreen) + 17%>px; 
    position : absolute;
    left : 0px;
    top : 60px;
    overflow-x : scroll;
    overflow-y : scroll;
    display : none;">
    <%for(var i = 0; i < data.scanner[j].parts; ++i) {%>
    <div class="fenetre" id=<%= data.scanner[j].name + "-img" + i%>
        style="
        background-image : url(<%= (data.scanner[j].imagePath)%>);
        width : <%= data.scanner[j].width%>px; 
        height : <%= data.scanner[j].height%>px; 
        position:absolute; 
        top: 0px; 
        left: <%= (i * data.scanner[j].left)%>px;"
    >
    </div>
    <%}%>
</div>
<%}%>

Answer 1

我知道这个问题已经很老了，但这些天我会尝试 puppeteer

const puppeteer = require("puppeteer");

async function printPDF() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto("http:///stackoverflow.com", {
    waitUntil: "networkidle0",
  });
  const pdf = await page.pdf({
    width: 1200,
    height: 1920,
    pageRanges: "1-2",
    path: "so.pdf",
  });

  await browser.close();
  return pdf;
}
printPDF();

另请参阅HTML to PDF with Node.js