WebService与JavaScript新手求助：如何展示或下载WebService返回的PDF文件内容？

嘿，刚接触WebService和JavaScript完全不用慌！你已经成功请求到了PDF的内容，只是还没找到正确的方式处理它～下面我分两种常见场景给你解决方案：

你当前用的是request库，默认情况下res.body会把响应当成字符串解析，但PDF是二进制文件，这样处理会损坏内容。解决办法很简单，在请求配置里加上encoding: null，让request返回原始的二进制Buffer，然后用Node.js的fs模块写入本地文件：

const fs = require('fs');
const request = require('request');

var url="https://........../......./..../..";
var options = { 
  "rejectUnauthorized": false, 
  "method": "GET", 
  "url": url, 
  "headers": { 
    "Authorization": "Basic EJFHUygdiAISDGIF", 
    "Content-Type": "application/json" 
  },
  encoding: null // 关键：让request返回二进制Buffer，避免字符串解析损坏PDF
};

request(options, (err, res) => {
  if (err) {
    console.error('请求出错：', err);
    return;
  }
  
  if (res.statusCode === 200 ) {
    // 先确认响应确实是PDF文件
    if (res.headers['content-type'] === 'application/pdf') {
      // 写入本地文件
      fs.writeFile('下载的文件.pdf', res.body, (writeErr) => {
        if (writeErr) {
          console.error('写入文件失败：', writeErr);
        } else {
          console.log('PDF已经成功下载到本地啦！');
        }
      });
    } else {
      console.warn('注意：接口返回的不是PDF文件，请检查请求地址是否正确');
    }
  } else {
    console.error('请求失败，状态码：', res.statusCode);
  }
});

如果你的代码最终要在浏览器前端运行，推荐用fetch API来请求，拿到响应后转成Blob对象，再通过URL.createObjectURL生成可访问的链接，既可以触发下载，也可以嵌入到页面中展示：

const url="https://........../......./..../..";

fetch(url, {
  method: 'GET',
  headers: {
    'Authorization': 'Basic EJFHUygdiAISDGIF',
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.blob();
})
.then(blob => {
  // 方式1：触发PDF下载
  const downloadUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = '我的文件.pdf'; // 设置下载后的文件名
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(downloadUrl); // 释放浏览器资源

  // 方式2：在页面中展示PDF（需要提前准备好容器，或者直接添加到页面）
  const previewUrl = URL.createObjectURL(blob);
  const embed = document.createElement('embed');
  embed.src = previewUrl;
  embed.type = 'application/pdf';
  embed.style.width = '100%';
  embed.style.height = '600px';
  document.body.appendChild(embed);
})
.catch(err => console.error('处理出错：', err));

几个关键提醒： #

• 不管哪种场景，都要确保接口返回的确实是PDF（可以通过响应头content-type: application/pdf验证）
• Node.js里如果用最新的request替代库（比如axios），处理方式类似，只要配置返回二进制数据即可
• 浏览器里如果遇到跨域问题，需要后端接口配置CORS允许你的域名访问

内容的提问来源于stack exchange，提问作者Γιάννης Γιαννάκος