通过 XMLHttpRequest 和xhr.responseType = 'arraybuffer'; 代码解决了它：

var xhr = new XMLHttpRequest();
    xhr.open('GET', './api/exportdoc/report_'+id, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function(e) {
       if (this.status == 200) {
          var blob=new Blob([this.response], {type:"application/pdf"});
          var link=document.createElement('a');
          link.href=window.URL.createObjectURL(blob);
          link.download="Report_"+new Date()+".pdf";
          link.click();
       }
    };
xhr.send();

我从服务器获取数据作为字符串（它是 base64 编码为字符串），然后在客户端我将其解码为 base64，然后到数组缓冲区。

示例代码

function solution1(base64Data) {

    var arrBuffer = base64ToArrayBuffer(base64Data);

    // It is necessary to create a new blob object with mime-type explicitly set
    // otherwise only Chrome works like it should
    var newBlob = new Blob([arrBuffer], { type: "application/pdf" });

    // IE doesn't allow using a blob object directly as link href
    // instead it is necessary to use msSaveOrOpenBlob
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(newBlob);
        return;
    }

    // For other browsers: 
    // Create a link pointing to the ObjectURL containing the blob.
    var data = window.URL.createObjectURL(newBlob);

    var link = document.createElement('a');
    document.body.appendChild(link); //required in FF, optional for Chrome
    link.href = data;
    link.download = "file.pdf";
    link.click();
    window.URL.revokeObjectURL(data);
    link.remove();
}

function base64ToArrayBuffer(data) {
    var binaryString = window.atob(data);
    var binaryLen = binaryString.length;
    var bytes = new Uint8Array(binaryLen);
    for (var i = 0; i < binaryLen; i++) {
        var ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes;
};

我在 React 项目中遇到了同样的问题。在 API 上，我使用 res.download() 的 express 在响应中附加 PDF 文件。通过这样做，我收到了一个基于字符串的文件。这就是文件打开为空白或损坏的真正原因。

在我的情况下，解决方案是强制 responseType 为“blob”。由于我是通过 axios 发出请求，我只是简单地在选项对象中添加了这个属性：

axios.get('your_api_url_here', { responseType: 'blob' })

之后，要进行下载，您可以在“fetchFile”方法中执行以下操作：

const response = await youtServiceHere.fetchFile(id)
const pdfBlob = new Blob([response.data], { type: "application/pdf" })

const blobUrl = window.URL.createObjectURL(pdfBlob)
const link = document.createElement('a')
      link.href = blobUrl
      link.setAttribute('download', customNameIfYouWantHere)
      link.click();
      link.remove();
URL.revokeObjectURL(blobUrl);

感谢rom5jp解决了这个问题，但添加了 golang 和 nextjs 的示例代码

在 golang 中使用 gingonic 上下文

c.Header("Content-Description", "File-Transfer")
c.Header("Content-Transfer-Encoding", "binary")
c.Header("Content-Disposition","attachement; filename="+fileName)
c.Header("Content-Type",  "application/pdf; charset=utf-8")

c.File(targetPath)
//c.FileAttachment(targetPath,fileName)
os.RemoveAll(targetPath)

在下一个js

  const convertToPDF = (res) => {
  const uuid = generateUUID();

  var a = document.createElement('a');
  var url = window.URL.createObjectURL(new Blob([res],{type: "application/pdf"}));
  a.href = url;
  a.download = 'report.pdf';
  a.click();
  window.URL.revokeObjectURL(url);

}

  const convertFile = async() => {
    axios.post('http://localhost:80/fileconverter/upload', {
      "token_id" : cookies.access_token,
      "request_type" : 1,
      "url" : url
    },{
      responseType: 'blob'
    }).then((res)=>{

     convertToPDF(res.data)

    }, (err) => {
      console.log(err)
    })
  }