使用pdf-creator-node无法在PDF页眉渲染图片的问题求助

以下是针对你遇到的问题的具体修复方案：

• 转远程图片为Base64嵌入
  远程图片在页眉/页脚中加载容易因为加载时机、资源访问限制等问题失败，把图片转成Base64编码直接嵌入HTML是最可靠的方式。你可以用在线工具或Node.js代码将图片转换为Base64，然后替换img的src：

  <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD..." />
  

• 设置页眉高度
  当前配置的header没有指定高度，默认高度可能不足以容纳图片，导致图片被隐藏。给header加上height属性，根据图片尺寸调整：

  header: {
    height: '70mm',
    contents: `...`
  }
  

• 修正HTML转义问题
  模板字符串里不需要对<和"进行转义，直接使用原始HTML语法，避免解析错误：

  contents: `
  <div class="headerPDF">
      <img src="你的Base64编码或本地路径" />
      <h1>test</h1>
  </div>
  <style>
      .headerPDF{
          width: 90%;
          height: 60%;
          border-bottom: 1px solid black;
      }
      .headerPDF > img{
          width: 100px;
          border: 1px solid black;
      }
  </style>
  `
  

• 使用本地图片路径（可选）
  如果不想用Base64，也可以将图片下载到本地，使用绝对路径或项目相对路径，同时在配置中指定资源根目录：

  const options = {
    // 其他配置
    base: 'file://' + __dirname + '/',
    header: {
      contents: `<img src="./assets/header-logo.jpg" />`
    }
  }
  

修改后的完整配置示例 #

const options = {
    format: 'Letter',
    orientation: 'portrait',
    border: '0mm',
    header: {
        height: '70mm',
        contents: `
        <div class="headerPDF">
            <!-- 替换为你的Base64图片内容 -->
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD..."/>
            <h1>test</h1>
        </div>
        <style>
            .headerPDF{
                width: 90%;
                height: 60%;
                border-bottom: 1px solid black;
            }
            .headerPDF > img{
                width: 100px;
                border: 1px solid black;
            }
        </style>
        `,
    },
    footer: {
        height: '0mm',
        contents: '',
    },
    childProcessOptions: { env: { OPENSSL_CONF: '/dev/null' } },
}

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