“IFDHandler 未定义”尝试使用 NextJS 将照片从 Google Photos 导入 PDF 生成应用程序

Question

这将是一个有点阅读，但我很想听听一些想法。我在 NextJs 中有一个项目，它有一些依赖项，但它主要是一个简单的形式，它将数据存储到状态，然后将该数据发送到另一个生成 PDF 的组件（我正在使用 React-pdf 来执行此操作。）。我工作的公司使用 Google Photos，我需要将 Google Photos 中的图片直接添加到应用程序中。我已经创建了为此所需的所有输入。来自互联网的随机 jpeg 工作完美，任何类型的 png 工作完美，但无论出于何种原因，每当我尝试从谷歌照片添加图片（在我的情况下都是 jpeg）时，它根本不起作用。我有相同功能的许多变体，我试图让它们显示出来并且它起作用了，谷歌照片中的所有图片都显示在 PDF 中。（我在下面附上了所有内容的图片，以便您更好地了解情况）。真正的问题如下，我需要在 MS Word 中打开此文件，因为这正是我的公司想要的方式，事情是这样的：即使图片显示在 PDF 中，每当我尝试使用 MS Word 编辑 PDF 时（我知道这不是什么了不起的事情，但它是一个简单的布局，并且 MS Word 可以很好地阅读它）它们只是不显示。随机 jpeg 可以，随机 png 可以，但从 Google 相册下载的 jpeg 根本不行。

我将在下面附上一些图片，详细展示整个事情。

  // 21.03.2024 try (this doesn't show the google photos jpegs even on the pdf)

  function onFileSelect(e: any) {
    const files = e.target.files;
    if (files.length == 0) return;
    for (let i = 0; i < files.length; i++) {
      if (files[i].type.split("/")[0] !== "image") continue;
      if (!images.some((e: any) => e.name === files[i].name)) {
        const reader = new FileReader();
        reader.readAsDataURL(files[i]);
        reader.onload = () => {
          setImages((prevImages: any) => [
            ...prevImages,
            {
              type: files[i].type,
              name: files[i].name,
              url: URL.createObjectURL(files[i]), 
              // this can be reader.result for base64 string but i tried it and it's still the same result
            },
          ]);
        };
      }
    }
  }

  // current one im using (this does show any type of photo on the pdf, but whenever opened in ms word it doesnt show the ones from google photos im also using compressorjs here as a dependency) (i tried base64 conversion and everything)

  function onFileSelect(e: any) {
    const files = e.target.files;
    if (files.length == 0) return;
    for (let i = 0; i < files.length; i++) {
      if (files[i].type.split("/")[0] !== "image") continue;
      if (!images.some((e: any) => e.name === files[i].name)) {
        new Compressor(files[i], {
          quality: 0.8,
          convertTypes: ["image/jpeg"],
          success: (result: any) => {
            const reader = new FileReader();
            const mustBePng = new Blob([result], { type: "image/png" });
            reader.readAsDataURL(mustBePng);
            reader.onload = () => {
              setImages((prevImages: any) => [
                ...prevImages,
                {
                  type: result.type,
                  name: files[i].name,
                  url: reader.result,
                },
              ]);
            };
          },
        });
      }
    }
  }

我还有一些，但没有必要展示它们。我从 Google Photos 添加的图片给出了“IFDHandler 未定义”。控制台中出现错误。我尝试用谷歌搜索但没有成功。