NodeJS/Express返回PDF时如何自定义浏览器显示标题

问题根因 #

当前实现直出PDF响应时缺失两个关键配置，导致浏览器内置PDF阅读器触发标题回退逻辑：

1. 生成的PDF文档没有内置可读取的元数据标题
2. 响应头没有声明内联展示时的文件名参考值
   最终浏览器会按照内置的取值优先级，在没有可参考标题时直接使用请求URL路径的最后一段（也就是路由里的:ID参数值）作为标签页标题。

浏览器PDF标签标题的默认取值优先级（从高到低）：

• 优先读取PDF元数据中存储的Title字段
• 次选读取响应头Content-Disposition中inline类型对应的filename值
• 以上都缺失时，回退使用请求URL的路径片段作为标题

具体代码调整步骤 #

• 第一步：注入自定义title到HTML源内容
  在拿到待转换的HTML内容后，主动插入业务自定义的标题文本，让html_to_pdf在生成PDF时自动把title值写入PDF文档的元数据标题字段，这是浏览器优先识别的标题来源。注意要兼容原有HTML的head标签结构，避免重复插入title导致页面结构异常。
• 第二步：补充响应头的内联文件名配置
  在writeHead时增加Content-Disposition头，声明PDF为内联展示模式，同时传入自定义的文件名作为浏览器的标题兜底参考，要对文件名做URL编码避免中文乱码。

调整后的完整核心代码 #

const id = req.params.ID;
const content = await getHtmlData(id)
// 自定义需要展示在浏览器标签页的标题，可根据业务逻辑动态生成
const customPdfTitle = `客户对账单-${id}`;

let options = { 
   format: 'letter',
   margin: {
      right: '40px',
      left: '40px'
   } 
};
// 给HTML源注入title标签，保证生成的PDF自带元数据标题
const htmlWithInjectedTitle = content.includes('</head>')
  ? content.replace('</head>', `<title>${customPdfTitle}</title></head>`)
  : `<html><head><title>${customPdfTitle}</title></head><body>${content}</body></html>`;

let file = { content: htmlWithInjectedTitle };
html_to_pdf.generatePdf(file, options).then(pdfBuffer => {
    res.writeHead(200, {
        'Content-Type': 'application/pdf',
        'Content-Length': pdfBuffer.length,
        // 补充内联展示的文件名头，避免浏览器回退用URL作为标题
        'Content-Disposition': `inline; filename="${encodeURIComponent(customPdfTitle)}.pdf"`
    });
    return res.end(pdfBuffer);
});

路由配置说明 #

原有router.get('/getPDF/:ID', myController.openPDF)的路由不需要做任何调整，调整仅集中在控制器的PDF生成逻辑中即可生效。

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