如何从我在响应中收到的内容下载任何文件

Question

{ "title": "Dummy File", "name": "temp_file.csv", "content": "name,role\r\n" }我必须在前端使用上述内容在文件中下载 react。 怎么做？

Answer 1

可以只使用基于此示例的本机 js

// some api response
const fileContent = { "title": "Dummy File", "name": "temp_file.csv", "content": "name,role\r\n" }

// implementation
const link = document.createElement('a');
link.download = fileContent.name;
link.href = 'data:text/csv;charset=utf-8,' + encodeURI(fileContent.content);
link.click();

这还假定文件扩展名始终为 CSV。

反应示例：

import React from 'react';

export function App(props) {

  const fileContent = { "title": "Dummy File", "name": "temp_file.csv", "content": "name,role\r\n" }

function downloadFile() {
  const link = document.createElement('a');
  link.download = fileContent.name;
  link.href = 'data:text/csv;charset=utf-8,' + encodeURI(fileContent.content);
  link.click();
}

  return (
    <button onClick={downloadFile}>Download File</button>
  );
}