与nodejs类似的html2canvas解决方案

Posted 2023-02-24

【中文标题】与nodejs类似的html2canvas解决方案

【英文标题】：A similar solution to html2canvas with nodejs

【发布时间】：2017-12-25 17:22:31

【问题描述】：

我正在使用 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>
<%%>

【参考方案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:///***.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

【参考方案2】：

试试html-pdf，它将css导出为pdf文件，它也是一个npm包，所以它与nodejs兼容。

安装：

$ npm install -g html-pdf

命令行示例：

$ html-pdf test/businesscard.html businesscard.pdf

代码示例：

var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('./test/businesscard.html', 'utf8');
var options =  format: 'Letter' ;

pdf.create(html, options).toFile('./businesscard.pdf', function(err, res) 
  if (err) return console.log(err);
  console.log(res); //  filename: '/app/businesscard.pdf'  
);

【讨论】：

感谢您的遮阳篷。不幸的是，我使用的是 ejs，所以我没有任何可以读取的 .html 文件。你有其他解决方案吗？ （即使是jpg或png而不是pdf，我都会接受）

你能给我举一个你的div,images & css的例子吗？

我编辑了这个问题。我没有 .css 文件，css 是内联的

您可以将 htlm 和 css 添加到 html 变量中。 var html = '

它确实帮助我将 HTML 转换为 PDF 文件。否则，我们可以将 HTML 添加到变量中，并将其传递给 pdf.crate()