使用反应生成的 pdf 上传到谷歌驱动器 修改点：修改后的脚本：注意：参考：

问题描述

在我的应用程序中，我正在使用 react-pdf 创建一个 pdf 文件。 我希望用户能够将这个生成的 pdf 上传到谷歌驱动器.. 到目前为止，我已经尝试使用 blob ，但没有成功。 很高兴得到任何帮助！！谢谢！

    const doc = <MyDocument req={props.data} />;
    const asPdf = pdf([]); 
    asPdf.updateContainer(doc);
    const blob = await asPdf.toBlob();

    
    const boundary = "foo_bar_baz";
    const delimiter = "\r\n--" + boundary + "\r\n";
    const close_delim = "\r\n--" + boundary + "--";
    var fileName = "mydocument.pdf";
    var fileData =  blob;
    var contentType = "application/pdf";
    var Metadata = {
      name: fileName,mimeType: contentType,};



    var multipartRequestBody =
      delimiter +
      "Content-Type: application/json; charset=UTF-8\r\n\r\n" +
      JSON.stringify(Metadata) +
      delimiter +
      "Content-Type: " +
      contentType +
      "\r\n\r\n" +
      fileData +
      "\r\n" +
      close_delim;

    console.log(multipartRequestBody);
    var request = window.gapi.client.request({
      path: "https://www.googleapis.com/upload/drive/v3/files",method: "POST",params: { uploadType: "multipart" },headers: {
        "Content-Type": "multipart/related; boundary=" + boundary + "",},body: multipartRequestBody,});
    request.execute(function (file) {
      console.log(file);
      console.log(fileData)

    });

解决方法

修改点：

• 在这种情况下，我建议使用 base64 数据而不是 blob。

当这一点反映到你的脚本中时，它变成如下。

修改后的脚本：

从：

var multipartRequestBody =
  delimiter +
  "Content-Type: application/json; charset=UTF-8\r\n\r\n" +
  JSON.stringify(metadata) +
  delimiter +
  "Content-Type: " +
  contentType +
  "\r\n\r\n" +
  fileData +
  "\r\n" +
  close_delim;

到：

// I added below function.
const base64 = blob => new Promise((resolve,reject) => {
  const fr = new FileReader();
  fr.onload = () => resolve(fr.result.split(",").pop());
  fr.onerror = () => reject(fr.error);
  fr.readAsDataURL(blob);
});
var multipartRequestBody =
  delimiter +
  "Content-Type: application/json; charset=UTF-8\r\n\r\n" +
  JSON.stringify(metadata) +
  delimiter +
  "Content-Type: " + contentType + "\r\n" +
  'Content-Transfer-Encoding: base64\r\n\r\n' +  // Added
  await base64(blob) +  // Modified
  "\r\n" +
  close_delim;

• 我使用 FileReader 将 blob 转换为 base64 数据。

注意：

• 在此修改中，假设 blob 的 const blob = await asPdf.toBlob(); 是 PDF 数据的有效 blob。请注意这一点。
• 而且，这个答案假设您已经能够使用 Drive API 上传文件。请注意这一点。

参考：

• FileReader