如何在Node-React应用中利用md-to-pdf返回的PDF十进制数据创建下载？

问题根源 #

后端返回的是包含Buffer类型数据的对象，但前端直接将整个对象传入Blob构造函数，导致生成的文件并非有效的PDF二进制数据：

• 下载PDF时，文件内容错误，阅读器提示“failed to load the document”
• 改为.md后缀时，对象被默认转为字符串[object object]，因此打开后显示该内容

解决步骤 #

1. 确保前端拿到正确的二进制数据 #

如果后端通过接口返回数据，请求时必须设置responseType为arraybuffer，确保获取到的是原始二进制数据而非JSON对象：

// 示例：用fetch请求后端接口
fetch('/api/generate-pdf', {
  method: 'POST',
  body: JSON.stringify({ markdown: '你的Markdown内容' }),
  headers: { 'Content-Type': 'application/json' },
  responseType: 'arraybuffer' // 关键配置
})
.then(res => res.arrayBuffer())
.then(pdfBuffer => startDownload(pdfBuffer));

2. 修改下载函数，正确生成Blob #

创建Blob时必须指定MIME类型为application/pdf，确保浏览器识别文件格式：

function startDownload(pdfBuffer) {
  const element = document.createElement('a');
  // 传入二进制数据并指定PDF的MIME类型
  const blob = new Blob([pdfBuffer], { type: 'application/pdf' });
  element.href = URL.createObjectURL(blob);
  element.download = 'userTable.pdf';
  element.click();
  // 释放URL对象，避免内存泄漏
  URL.revokeObjectURL(element.href);
}

特殊情况：后端返回十进制数组形式的Buffer #

如果后端返回的是包含十进制数组的JSON对象（如{ pdfData: [255, 216, ...] }），需要先将数组转为Uint8Array再创建Blob：

function startDownload(responseObj) {
  // 将十进制数组转为Uint8Array
  const uint8Array = new Uint8Array(responseObj.pdfData);
  const blob = new Blob([uint8Array], { type: 'application/pdf' });
  
  const element = document.createElement('a');
  element.href = URL.createObjectURL(blob);
  element.download = 'userTable.pdf';
  element.click();
  URL.revokeObjectURL(element.href);
}

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