如何通过Fetch API获取PDF、doc、docx文件？除指定代码外是否有其他实现方式？

嘿，这个问题问得相当实在！不管是做文档预览还是下载功能，处理这些二进制文件都是常见需求。我先给你讲清楚怎么用Fetch API搞定，再给你唠唠其他几种可行的实现方式。

核心要点是要把响应处理成Blob类型，因为PDF、doc、docx都是二进制格式的文件，Fetch默认会把响应当成文本处理，所以必须显式转换。

下面是通用的实现代码，不管是哪种格式，只需要替换文件URL和下载文件名即可：

fetch('your-target-file.pdf') // 换成你的doc/docx文件URL
  .then(response => {
    // 先检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败！状态码: ${response.status}`);
    }
    // 将响应转换为Blob对象
    return response.blob();
  })
  .then(blob => {
    // 这里可以根据需求处理Blob：比如下载文件，或者在页面预览（PDF可以用iframe）
    const fileUrl = URL.createObjectURL(blob);
    
    // 示例1：触发浏览器下载
    const downloadLink = document.createElement('a');
    downloadLink.href = fileUrl;
    downloadLink.download = 'my-downloaded-file.pdf'; // 换成对应的doc/docx后缀
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    // 释放Blob URL占用的内存，避免泄漏
    URL.revokeObjectURL(fileUrl);
    document.body.removeChild(downloadLink);

    // 示例2：预览PDF（doc/docx没法直接在浏览器预览，需要第三方库）
    // const iframe = document.createElement('iframe');
    // iframe.src = fileUrl;
    // iframe.style.width = '100%';
    // iframe.style.height = '800px';
    // document.body.appendChild(iframe);
  })
  .catch(error => {
    console.error('获取文件时出错:', error);
  });

doc和docx的处理逻辑和PDF完全一致——Fetch并不关心文件格式，只需要正确处理二进制Blob就行。

1. 传统的XMLHttpRequest #

这是Fetch出现之前的标准方案，兼容性更好（比如支持IE10+）：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'your-file.docx', true);
// 设置响应类型为Blob
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    const blob = xhr.response;
    // 后续处理和Fetch的Blob逻辑一样，比如下载
    const fileUrl = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = fileUrl;
    downloadLink.download = 'downloaded-docx.docx';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    URL.revokeObjectURL(fileUrl);
    document.body.removeChild(downloadLink);
  } else {
    console.error('请求失败，状态码:', xhr.status);
  }
};

xhr.onerror = function() {
  console.error('网络请求出错');
};

xhr.send();

2. 使用第三方HTTP库（比如Axios） #

Axios封装了很多细节，使用起来更简洁，而且默认支持Blob类型的响应：

// 确保项目中已经引入Axios（可以通过CDN或npm安装）
axios.get('your-file.doc', {
  responseType: 'blob' // 关键配置，指定响应类型为Blob
})
.then(response => {
  const blob = response.data;
  // 同样的下载/处理逻辑
  const fileUrl = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = fileUrl;
  downloadLink.download = 'downloaded-doc.doc';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  URL.revokeObjectURL(fileUrl);
  document.body.removeChild(downloadLink);
})
.catch(error => {
  console.error('获取文件失败:', error);
});

3. 直接使用HTML标签（无JS场景） #

如果你的需求只是让用户下载文件，不需要在JavaScript里处理文件内容，那直接用<a>标签就够了：

<a href="your-file.pdf" download="custom-filename.pdf">点击下载PDF</a>
<a href="your-file.docx" download="custom-filename.docx">点击下载Word文档</a>

这个方式最简单，但缺点是无法处理请求错误，也不能自定义下载前的逻辑。

• CORS问题：如果文件存储在不同域名的服务器上，需要服务器配置CORS允许你的域名访问，否则会出现跨域错误。
• 内存泄漏：使用URL.createObjectURL后，一定要记得调用URL.revokeObjectURL释放内存，尤其是在频繁处理文件的场景下。
• Doc/Docx预览：浏览器原生不支持预览doc/docx，如果需要预览，得借助第三方库（比如mammoth.js）把文档转换成HTML。

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