如何在Nuxt中通过Express后端实现PDF新标签页打开与下载？

问题核心 #

你遇到的问题根源是：axios默认会将二进制PDF数据解析为UTF-8字符串，导致原始二进制内容被破坏，最终前端拿到的是乱码文本而非可识别的PDF二进制数据。

第一步：修复Express后端代码 #

修改axios请求配置，让它以二进制形式接收响应，同时确保正确设置响应头：

const response = await axios.get(
    url, 
    { 
        headers: { "X-API-Key": process.env.FS_UPRN_API_KEY },
        responseType: 'arraybuffer' // 关键：指定接收二进制数据
    }
);

// 设置正确的响应头
res.setHeader("Content-Type", "application/pdf");
// 可选：控制浏览器行为，inline表示在标签页打开，attachment触发下载
res.setHeader("Content-Disposition", "inline; filename=\"document.pdf\"");
res.setHeader("Content-Length", response.data.length); // 帮助浏览器处理数据

res.send(Buffer.from(response.data)); // 将arraybuffer转为Buffer发送

解释：设置responseType: 'arraybuffer'后，axios会保留原始二进制数据，不会将其解析为字符串；用Buffer.from转换后发送，确保Express传递的是正确的PDF二进制内容。

第二步：简化Nuxt前端代码 #

不需要手动获取响应再写入新标签页，直接让浏览器处理后端的响应即可：

// 直接打开后端API地址，浏览器自动识别PDF并在新标签页展示
window.open(`/api/uprn?uprn=${this.clickedUprn}`, "_blank");

如果必须通过axios获取（比如需要处理权限逻辑），可以用Blob对象处理：

this.$axios.get(`/api/uprn?uprn=${this.clickedUprn}`, {
    responseType: 'blob' // 前端指定接收Blob类型
})
.then(response => {
    // 创建临时Blob URL
    const blobUrl = URL.createObjectURL(response.data);
    // 在新标签页打开
    const newTab = window.open("_blank");
    newTab.location.href = blobUrl;
    // 可选：10秒后释放Blob URL，避免内存泄漏
    setTimeout(() => URL.revokeObjectURL(blobUrl), 10000);
});

原代码失效原因 #

1. 后端axios未指定responseType: 'arraybuffer'，导致PDF二进制被转成UTF-8字符串，破坏了原始字节结构
2. 前端直接将乱码字符串写入新标签页，浏览器无法识别为PDF格式

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