下载CSV文档的按钮在React中不起作用？

mjqavswn 于 2023-05-04 发布在 React

关注(0)|答案(2)|浏览(189)

我有一个csv文件在我的目录，我想触发一个直接下载后，点击下载按钮。
我使用了文件保护程序库和一个fetch请求来处理一切。
下面是函数：

const handleDownload = () => {
    fetch('public/data/COW2021001887-I589Data.csv', {
      headers: {
        'Content-Type': 'text/csv'
      }
    })
      .then(response => response.blob())
      .then(blob => saveAs(blob, 'file.csv'))
      .catch(error => console.error(error));
  };

但是当我点击按钮时，我会得到一个Excel电子表格，其中只有一个HTML模板。
附件是一张路径的图片，以防这是问题所在，因为这是我唯一能想到的。当然，我从文件保存程序库导入了保存存为，这个函数是按钮的处理程序。
任何建议将不胜感激。我试过用几种不同的方法触发hte下载，但总是以html模板文档结束（如图）
the CSV with the html template the paths of the files i'm working on Render landing page near the bottom, the file is in public/data

csv

来源：https://stackoverflow.com/questions/76159310/button-to-download-csv-document-not-working-in-react

2条答案

按热度按时间

bis0qfac1#

你有没有试过使用库直接保存URL？

const FileSaver = require('file-saver');

const handleDownload = () => {
  FileSaver.saveAs("public/data/COW2021001887-I589Data.csv", "file.csv");
};

另外，您是否正在使用旧版本的文件保护程序？我在文档中没有看到.blob()语法，只有new Blob语法：

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});

赞(0）回复(0）举报 2023-05-04

9udxz4iz2#

而不是response.blob()，尝试使用new操作符，如下所示：

const handleDownload = () => {
    fetch('public/data/COW2021001887-I589Data.csv', {
      headers: {
        'Content-Type': 'text/csv'
      }
    })
      .then(response => {
          // double check the response object is what you want here
          const blob = new Blob([response], {type: "text/csv"});
          FileSaver.saveAs("file.csv");
      })
      .catch(error => console.error(error));
  };

赞(0）回复(0）举报 2023-05-04

我来回答

下载CSV文档的按钮在React中不起作用？

2条答案

相关问题

热门标签

最新问答