如何从Logic App HTTP响应返回正常可下载的PDF文件？

问题原因 #

你的Logic App返回的响应是包含$content-type和base64格式$content的JSON对象，但前端JS代码未正确提取其中的$content字段，直接处理了整个对象，导致生成的PDF内容错误（空白但大小不为0）。

前端JS代码修正方案 #

修改代码提取$content字段，将base64字符串解码为二进制数据后生成PDF文件：

fetch('你的Logic App HTTP触发器地址')
  .then(response => response.json())
  .then(result => {
    // 取出base64格式的PDF内容
    const pdfBase64 = result.$content;
    // 解码base64为二进制数组
    const binaryStr = atob(pdfBase64);
    const uint8Arr = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
      uint8Arr[i] = binaryStr.charCodeAt(i);
    }
    // 创建PDF Blob对象
    const pdfBlob = new Blob([uint8Arr], { type: result['$content-type'] || 'application/pdf' });
    // 触发下载
    const dlLink = document.createElement('a');
    dlLink.href = URL.createObjectURL(pdfBlob);
    dlLink.download = 'converted.pdf';
    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
    URL.revokeObjectURL(dlLink.href); // 清理临时URL
  })
  .catch(err => console.error('下载出错:', err));

可选：优化Logic App响应配置 #

若不想前端处理JSON对象，可在Logic App的响应动作中做以下配置，让前端直接接收二进制PDF：

• 响应Body选择：body('Convert_Word_Document_to_PDF')['$content']
• 响应Headers添加Content-Type，值设为：body('Convert_Word_Document_to_PDF')['$content-type']
• 响应Status Code设为200

此时前端代码可简化为：

fetch('你的Logic App HTTP触发器地址')
  .then(response => response.blob())
  .then(pdfBlob => {
    const dlLink = document.createElement('a');
    dlLink.href = URL.createObjectURL(pdfBlob);
    dlLink.download = 'converted.pdf';
    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
    URL.revokeObjectURL(dlLink.href);
  })
  .catch(err => console.error('下载出错:', err));

关于base64ToBinary无效的说明 #

你在Logic App中使用base64ToBinary(body('Convert_Word_Document_to_PDF'))时，若未将转换后的二进制数据直接设为响应Body，而是仍返回包含$content的对象，前端收到的还是JSON结构，无法直接识别为二进制文件，因此无效。只有将转换后的二进制数据设为响应Body，并配置正确的Content-Type，该转换才会生效。

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