使用 html-pdf-node 渲染的 pdf 中未显示 CSS 和图像答案

【问题标题】：CSS and Image not showing in rendered pdf using html-pdf-node使用 html-pdf-node 渲染的 pdf 中未显示 CSS 和图像
【发布时间】：2021-05-26 09:27:00
【问题描述】：

我正在尝试使用 html-pdf-node 包在 Node.js 中生成 html 到 pdf。如果我在浏览器中打开 html 文件，页面工作正常，但是当我使用 html-pdf-node 将其生成为 pdf 时，图像和 css 不会在 pdf 中呈现。

这是我的代码：

template.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type='text/css' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" type='text/css' href="../css/style.css">
</head>
<body>

<div class="container">
  <div class="text-center">
    <img src="../images/logo.png" class="img-fluid" alt="Logo image">
  </div>
  

  <div class="container align-items-center atd-title text-center">
    <h3>Title Here</h3>
  </div>
  
  <div class="container align-items-center atd-container">
    <div class="row">
      <div class="col-lg-12">
        <p>Sir:</p>
        <p class="atd-paragraph">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

service.js

let fs = require('fs');
let path = require('path');
let ejs = require('ejs');
let html_to_pdf = require('html-pdf-node');

// Read HTML Template
let template = fs.readFileSync(path.resolve(__dirname, "../path/to/template.html"), 'utf8');
                
let html = ejs.render(template, {name: "test"});
let options = { format: 'A4' };
let file = { content: html };
let pdf = await html_to_pdf.generatePdf(file, options);
return pdf;

【问题讨论】：

标签： javascript html node.js pdf npm

【解决方案1】：

这是因为 HTML 字符串被传递给 html-pdf-node，图像和 CSS 等其他资产则没有。 html-pdf-node 使用 Puppeteer 作为无头浏览器在将网页保存为 PDF 之前呈现网页，当它尝试解析它发送的 HTTP 请求失败的资产时。

你有两个选择来解决这个问题：

使用内联 CSS 和图像作为数据 URL 创建一个独立的 HTML 文件
打开一个 Web 服务器，以便在不嵌入的情况下解析资产

最简单的选择是第二种，这里是一个最小的例子：

const express = require('express')
const html_to_pdf = require('html-pdf-node')
const ejs = require('ejs')
const fs = require('fs')
const path = require('path')

const app = express()
const port = 3000

const template = fs.readFileSync(path.resolve(__dirname, "./index.html"), 'utf8')
const content = ejs.render(template, { title: "Awesome title!" })
fs.writeFile(path.resolve(__dirname, "./public/index.html"), content, () => {
    app.use(express.static('src/public'))

    const server = app.listen(port, async () => {
        const url = `http://localhost:${port}`
        const options = { format: 'A4', path: 'output.pdf' }
        const file = { url }
        await html_to_pdf.generatePdf(file, options)

        server.close()
    })
})

我在这里创建了一个工作项目：https://github.com/Guerric-P/html-pdf-node-demo

【讨论】：

即使我们使用ejs模板引擎也可以吗？
嗯，是的，您可以在此过程中添加一个 ejs 编译步骤。要我提供代码吗？
我需要一个 html 字符串而不是 url 的示例代码，你有吗？
OP使用let file = { content: html };，有可能吗？
你能准确地说你想要 HTML 吗？如果是这样，为什么？或者你只是想要 ejs 模板？