使用 html-pdf-node 渲染的 pdf 中未显示 CSS 和图像
Posted
技术标签:
【中文标题】使用 html-pdf-node 渲染的 pdf 中未显示 CSS 和图像【英文标题】：CSS and Image not showing in rendered pdf using html-pdf-node 【发布时间】：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" >
</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;
【问题讨论】：
【参考方案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 模板？以上是关于使用 html-pdf-node 渲染的 pdf 中未显示 CSS 和图像的主要内容，如果未能解决你的问题，请参考以下文章