【问题标题】:A similar solution to html2canvas with nodejs与nodejs类似的html2canvas解决方案
【发布时间】: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>
<%}%>

【问题讨论】:

    标签: html css node.js html2canvas


    【解决方案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

    【讨论】:

      【解决方案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 代码

        '
      • 它确实帮助我将 HTML 转换为 PDF 文件。否则,我们可以将 HTML 添加到变量中,并将其传递给 pdf.crate()
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-11-17
      • 2023-03-29
      • 1970-01-01
      • 2021-05-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多