Angular应用中如何从json-server下载json、txt或csv格式文件

问题根因 #

你当前的downloadExtractions方法仅完成了Blob对象的创建，没有触发浏览器的文件下载逻辑，因此没有下载动作产生。

修复方案 #

1. 基础下载逻辑实现（支持JSON/文本格式） #

先修改服务中的downloadExtractions方法，补充触发浏览器下载的代码：

// 新增可选参数：文件名、文件类型
downloadExtractions(post: Post, fileName: string = 'extraction', fileType: 'json' | 'text' = 'json') {
  let content: string, mimeType: string, suffix: string;

  // 根据格式处理内容和MIME类型
  if (fileType === 'json') {
    content = JSON.stringify(post, null, 2);
    mimeType = 'application/json';
    suffix = '.json';
  } else {
    // 文本格式直接拼接字段内容，可根据需求调整格式
    content = `内容名称: ${post.contentName}\n内容类型: ${post.contentType}\n存储内容: ${post.contentToStore}\nID: ${post.id}`;
    mimeType = 'text/plain';
    suffix = '.txt';
  }

  const blob = new Blob([content], { type: mimeType });

  if (blob.size > 0) {
    this.downloaded = 'The blob contains ' + blob.size + ' byte!';
    // 创建临时a标签触发下载
    const downloadLink = document.createElement('a');
    const downloadUrl = URL.createObjectURL(blob);
    downloadLink.href = downloadUrl;
    downloadLink.download = `${fileName}${suffix}`;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    // 下载完成后清理资源
    setTimeout(() => {
      document.body.removeChild(downloadLink);
      window.URL.revokeObjectURL(downloadUrl);
    }, 100);
  } else {
    this.downloaded = 'The download failed!';
  }
}

2. CSV格式下载实现 #

如果需要导出CSV格式，新增专门的导出方法即可：

downloadAsCsv(postList: Post[], fileName: string = 'extractions') {
  // 定义CSV表头
  const headers = ['内容名称', '内容类型', '存储内容', 'ID'];
  // 转换数据为CSV行格式，自动处理逗号、引号等特殊字符
  const rows = postList.map(post => [
    `"${post.contentName.replace(/"/g, '""')}"`,
    `"${post.contentType.replace(/"/g, '""')}"`,
    `"${post.contentToStore.replace(/"/g, '""')}"`,
    post.id
  ].join(','));
  // 拼接完整CSV内容
  const csvContent = [headers.join(','), ...rows].join('\n');
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  // 触发下载逻辑
  const downloadLink = document.createElement('a');
  const downloadUrl = URL.createObjectURL(blob);
  downloadLink.href = downloadUrl;
  downloadLink.download = `${fileName}.csv`;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  setTimeout(() => {
    document.body.removeChild(downloadLink);
    window.URL.revokeObjectURL(downloadUrl);
  }, 100);
}

3. 调用注意事项 #

提交操作是异步的，如果你需要下载包含当前提交数据的内容，请将下载逻辑放到submitExtractions的subscribe回调内，避免出现下载内容缺失最新提交数据的问题：

onSubmitExtractions(postData: Post) {
  this.dbService.submitExtractions(postData)
    .subscribe(
      savedPost => {
        this.jsonPosts.push(savedPost);
        // 下载逻辑放到这里，保证提交完成后再执行
        this.dbService.downloadExtractions(savedPost);
        // 如果要下载全量CSV，也在这里调用，先拉取全量数据再导出
        // this.dbService.getAllExtractions().subscribe(allData => {
        //   this.dbService.downloadAsCsv(allData);
        // })
      }
  );
}

如果需要下载所有存储的extracts数据，需要在服务中新增拉取全量数据的方法：

getAllExtractions(): Observable<Post[]> {
  return this.httpClient.get<Post[]>(this.apiUrl);
}

内容的提问来源于stack exchange，提问作者user14932840