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

Question

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

我尝试使用文件保存库，但结果不如预期，我也尝试了一个周转并使用了不同的方法，但还是一样。

当我使用第二种方法下载文件时，即使用 fetch API，我得到的文件是一个损坏的文件。请同时使用 codeSandbox link 查看下面的代码。

方法一

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

方法二

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();
      });
    });
  };

完整源代码link

Click to open in codeSandbox.

感谢您的帮助和时间。

Answer 1

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

如果从 public 文件夹提供文件

将 testFile.docx 放入 public 目录。

/public
+-/files
  +-testFile.docx

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

示例：

方法一

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

方法二

const onDownload2 = () => {
  fetch("/files/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();
    });
  });
};

如果导入并在本地使用

import file from './testFile.docx';

方法 3

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

方法 4

const onDownload4 = () => {
  fetch(file).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();
    });
  });
};

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

How to download a Docx file or msWord file using reactjs?

javascript

node.js

reactjs

download