一个有关ajax的问题记录

我有一个链接，放在浏览器可以直接下载pdf文件，如下：

https://gateway.pinata.cloud/ipfs/bafykbzaceduamuif4farekzsuzv2tsrpbs5fbnvz5p6ct5em4teusottfc2h2?filename=%E5%AE%87%E5%AE%99%E5%A4%A9%E4%BD%BF.pdf

使用 $.ajax()请求的时候，发下下载下来的pdf乱码，打开看不到实际内容。

$.ajax({
  url:'https://gateway.pinata.cloud/ipfs/bafykbzaceduamuif4farekzsuzv2tsrpbs5fbnvz5p6ct5em4teusottfc2h2',
  method: "get",
  // dataType: 'jsonp',
  data: {filename:'%E5%AE%87%E5%AE%99%E5%A4%A9%E4%BD%BF.pdf'},
  responseType:"blob",
  async: false,
  mimeType: 'application/octet-stream',
  headers: {
   "Content-Type": "application/octet-stream",
  },
  success: function (result, state, xhr) {
    console.log(result)
    let type = xhr.getResponseHeader("content-type")
    let file = new File([result], 'b.pdf', {type});
    console.log(file,type)
    if ('download' in document.createElement('a')) {//支持a标签download的浏览器
      let link = document.createElement("a");
      link.download = 'b.pdf';
      link.style.display = "none"
      link.href = URL.createObjectURL(file);
      document.body.appendChild(link);
      link.click();//执行下载
      URL.revokeObjectURL(link.href);//释放url
      document.body.removeChild(link);//释放标签
    } else {//不支持
      if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(file, fileName)
      }
    }
  },
})

尝试了fetch，发现可以正常下载并打开pdf文档，说明链接没问题

fetch('https://gateway.pinata.cloud/ipfs/bafykbzaceduamuif4farekzsuzv2tsrpbs5fbnvz5p6ct5em4teusottfc2h2?filename=%E5%AE%87%E5%AE%99%E5%A4%A9%E4%BD%BF.pdf')	
.then(res =>{
  return res.blob()
}).then(blob => {
  var url = URL.createObjectURL(blob);
  var link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
});

 尝试了ajax的原生请求，发现也能正常打开下载的pdf文件

// 发送 AJAX 请求
var xhr = new XMLHttpRequest();
// xhr.open('GET', 'https://raw.githubusercontent.com/lixianbin1/No/master/ty_time_stamp.pdf', true);
xhr.open('GET', 'https://gateway.pinata.cloud/ipfs/bafykbzaceduamuif4farekzsuzv2tsrpbs5fbnvz5p6ct5em4teusottfc2h2?filename=%E5%AE%87%E5%AE%99%E5%A4%A9%E4%BD%BF.pdf', true);
xhr.responseType = 'blob'; // 指定响应数据类型为 Blob
xhr.onload = function () {
  if (xhr.status === 200) {
    var blob = xhr.response;
    downloadFile(blob); // 调用下载文件的方法
  }
};
xhr.send();

// 下载文件
function downloadFile(blob) {
  var url = URL.createObjectURL(blob);
  var link = document.createElement('a');
  link.href = url;
  link.download = 'a.pdf'; // 指定下载文件的名称
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

那么问题出在哪里呢？是jquery封装的ajax有问题吗？继续探索解决方案

最后发现，$.ajax的参数里面需要配置如下的原生方法，配置一个即可！

配置一：

xhrFields:{
   responseType: 'blob'
},
配置二：
xhr:function(){
   var xhr = new XMLHttpRequest();
   xhr.responseType= 'blob'
   return xhr;
},

$.ajax({
  url:'https://gateway.pinata.cloud/ipfs/bafykbzaceduamuif4farekzsuzv2tsrpbs5fbnvz5p6ct5em4teusottfc2h2',
  method: "get",
  // dataType: 'jsonp',
  data: {filename:'%E5%AE%87%E5%AE%99%E5%A4%A9%E4%BD%BF.pdf'},
  // responseType:"blob",

  xhrFields:{ // 方法一
    responseType: 'blob'
  },
  // xhr:function(){  // 方法二
  //   var xhr = new XMLHttpRequest();
  //   xhr.responseType= 'blob'
  //   return xhr;
  // },

  success: function (result, state, xhr) {
    console.log(result)
    let type = xhr.getResponseHeader("content-type")
    let file = new File([result], 'b.pdf', {type});
    console.log(file,type)
    if ('download' in document.createElement('a')) {//支持a标签download的浏览器
      let link = document.createElement("a");
      link.download = 'b.pdf';
      link.style.display = "none"
      link.href = URL.createObjectURL(file);
      document.body.appendChild(link);
      link.click();//执行下载
      URL.revokeObjectURL(link.href);//释放url
      document.body.removeChild(link);//释放标签
    } else {//不支持
      if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(file, fileName)
      }
    }
  },
})