Google Drive API 响应中不需要的“内容类型：text/plain;charset=UTF-8”标头

Question

我正在使用浏览器 GAPI 库从 Google Drive 请求一段二进制数据。来自谷歌服务器的响应总是有一个

content-type: text/plain;charset=UTF-8

标头，因此，浏览器总是将二进制数据解码为 UTF-8 字符串。

更重要的是，解码过程似乎给原始二进制数据添加了填充。例如，一个 282 字节的二进制文件经过 UTF-8 解码后变为 422 字节长。

有什么方法可以告诉 Google API 服务器更改内容类型标头吗？

或者有没有办法绕过响应正文的预处理并获取原始响应？

我的请求代码列在这里：

currentApiRequest = {
    path: `https://www.googleapis.com/drive/v3/files/${fileID}`,
    params: {
        alt: "media"
    }
}
gapi.client.request(currentApiRequest).then(
    (response) => {
                let data = response.body;
                console.log(byteSize(data));
                console.log(data);
    }
)

Answer 1

下面的修改怎么样？在这个修改中，首先将检索到的数据转换为Unit8Array，然后将其转换为blob。

修改后的脚本：

const fileID = "###"; // Please set your file ID.
currentApiRequest = {
  path: `https://www.googleapis.com/drive/v3/files/${fileID}`,
  params: {alt: "media"}
};
gapi.client.request(currentApiRequest)
.then((response) => {
  let data = response.body;
  const blob = new Blob([new Uint8Array(data.length).map((_, i) => data.charCodeAt(i))]);

  // When you use the following script, you can confirm whether this blob can be used as the correct data.
  const filename = "sample.png"; // Please set the sample filename.
  const a = document.createElement('a');
  document.body.appendChild(a);
  a.href = URL.createObjectURL(blob);
  a.download = filename;
  a.click();
});

参考资料：

• gapi.client.request(args)
• 相关主题。
  • 如何使用 Google Drive api V3 将图像下载到浏览器客户端？
  • 在此线程中，使用从

    gapi.client.drive.files.get()

    检索的数据。另一方面，在这个问题中，使用了从

    gapi.client.request()

    检索的数据。我认为这可能对其他用户也有用。所以我发布了这个答案，没有标记为重复。

Answer 2

Tanaike 的答案是一个很好的答案，但经过一段时间的斗争后，我的建议是在下载云端硬盘文件时根本不要使用

gapi.client.drive

或

gapi.client.request

。我在像这个编码问题这样的错误上浪费了大量时间，而且它如何与 Google Identity Services 令牌客户端交互是不透明且不清楚的。

仅使用 fetch 就简单一百万倍：

// this is for downloading binary files in Google Drive
// for files like Google Docs/Sheets/Slides etc. you need to use the export method
const retrievalUrl = `https://www.googleapis.com/drive/v3/files/${doc.id}?alt=media`;
const response = await fetch(retrievalUrl, {
  headers: { Authorization: `Bearer ${authToken}` },
});
const bodyContents = await response.arrayBuffer();

我将上述内容与 Drive Picker UI 和

drive.file

范围一起使用，效果非常好。比努力让

gapi.client.drive

JS 客户端工作更简单、更直接。