如何使用reactjs下载Docx文件或msWord文件？

Question

当用户单击按钮时，我一直在尝试弄清楚如何创建下载功能。

我尝试使用文件保存库，但结果尚未如预期的那样，我也尝试了一个周转并使用了其他方法，但同样是相同的。

当我使用fetch api使用第二种方法下载文件时，文件获取是一个损坏的文件。 请参阅下面的代码，其中还具有CODESANDBOX链接。

方法1

const onDownload1 = () => {
    saveAs("../../testFile.docx", "testFile.docx");
  }; 

方法2

const onDownload2 = () => {
    fetch("../../testFile.docx").then((response) => {
      response.blob().then((blob) => {
        let url = window.URL.createObjectURL(blob);
        let a = document.createElement("a");
        a.href = url;
        a.download = "testFile.docx";
        a.click();
      });
    });
  };

完整源代码链接

单击以在codesandbox中打开。

感谢您的帮助和时间。

Answer 1

使用“../../testFile.docx”，应用程序尝试从托管和提供应用程序的相对路径提供文件。 testFile.docx 文件需要可访问并正确提供。

• 如果从公共文件夹提供文件

  将 testFile.docx 放入 public 目录中。

  <前><代码>/公共
  +-/文件
  +-testFile.docx

  使用绝对路径访问 testFile.docx 文件。

  示例：

  • 方法 1

    const onDownload1 = () =>; {
      saveAs("/files/testFile.docx", "testFile.docx");
    };
    

  • 方法 2

    const onDownload2 = () =>; {
      fetch("/files/testFile.docx").then((response) => {
        response.blob().then((blob) => {
          让 url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = 网址；
          a.download = "testFile.docx";
          a.点击();
        });
      });
    };
    

• 如果导入并在本地使用

  从“./testFile.docx”导入文件；

  • 方法 3

    const onDownload3 = () =>; {
      saveAs(文件, "testFile.docx");
    };
    

  • 方法 4

    const onDownload4 = () =>; {
      fetch(文件).then((响应) => {
        response.blob().then((blob) => {
          让 url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = 网址；
          a.download = "testFile.docx";
          a.点击();
        });
      });
    };