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

Question

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

Pau*_*igz 12 html javascript pdf node.js npm

我正在尝试使用html-pdf-node包在Node.js 中生成 html 到 pdf 。如果我在浏览器中打开 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>

Run Code Online (Sandbox Code Playgroud)

服务.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;

Run Code Online (Sandbox Code Playgroud)

Answer 1

Twi*_*her 7

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

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

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

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

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()
    })
})

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	4 年，6 月前
查看次数：	746 次
最近记录：	4 年，3 月前