我正在尝试在 中生成 html 到 pdf Node.js 使用 html-pdf-node包裹。如果我在浏览器中打开 html 文件，该页面工作正常，但是当我使用 html-pdf-node 将其生成为 pdf 时，图像和 css 不会在 pdf 中呈现。
这是我的代码:
模板.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>
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;
最佳答案
这是因为 HTML 字符串被传递给 html-pdf-node。 ，图像和 CSS 等其他 Assets 则不是。 html-pdf-node使用 Puppeteer作为 headless 浏览器在将网页保存为 PDF 之前呈现网页，当它尝试解析 Assets 时，它会发送失败的 HTTP 请求。
你有两个选择来解决这个问题:
最简单的选项是第二个，这里是一个最小的例子:
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()
})
})
关于javascript - 使用 html-pdf-node 渲染的 pdf 中未显示 CSS 和图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66344473/