Node.js html-pdf@2.2.0 绝对路径外部样式及图片资源加载失败求助

问题根源 #

你遇到的问题确实是html-pdf v2.2.0本身的已知缺陷导致的，该版本底层依赖已停止维护的PhantomJS内核，在外部资源加载上存在多处限制：

• 默认开启严格的SSL证书校验，对未兼容老旧根证书的HTTPS资源会直接拦截
• 直接传入HTML字符串生成PDF时无同源上下文，跨域资源请求会被安全策略拦截
• 资源加载等待机制不完善，常出现资源未加载完成就提前渲染PDF的情况

可行解决方案 #

方案1：调整生成配置，绕过资源加载限制 #

调用pdf.create时新增PhantomJS启动参数和超时配置，修复大部分外部资源加载问题：

pdf.create(data, {
  format: 'Letter',
  // 关闭SSL校验，兼容老旧HTTPS资源
  phantomArgs: ['--ignore-ssl-errors=yes', '--ssl-protocol=any'],
  // 延长资源等待时长，确保资源加载完成再渲染
  timeout: 10000
})

方案2：外部资源内联到模板（兼容性最高） #

完全规避外部资源加载风险，将所有依赖直接嵌入HTML模板：

• 样式表：提前读取CSS文件内容，替换模板中的<link>标签为内联<style>标签
• 图片：将图片转为Base64编码后写入src属性
  替换逻辑示例：

// 读取本地CSS文件内容
const cssContent = fs.readFileSync(path.join(__dirname, 'public/sources/index.css'), 'utf8')
// 替换模板中的外部link标签
const finalHtml = data.replace('<link rel="stylesheet" type="text/css" href="https://api.greenleafpolska.pl/public/sources/index.css">', `<style>${cssContent}</style>`)
// 用替换后的内容生成PDF
pdf.create(finalHtml, { format: 'Letter' })

方案3：通过本地HTTP地址生成PDF #

不要直接传入HTML字符串，改为传入模板的本地服务访问地址，让PhantomJS通过HTTP请求获取页面，拥有完整的浏览器上下文，资源加载逻辑和正常访问页面完全一致：

// 示例地址为你的本地服务模板访问路径，根据实际情况修改
pdf.create('http://localhost:3000/template/index_min.html', { format: 'Letter' })

内容的提问来源于stack exchange，提问作者radaxter