基于blob的文档流word文档导出按钮（后端返回文档流）

原创于 2023-07-07 11:20:49 发布 · 658 阅读

本内容遵循CC 4.0 BY-SA版权协议

这段代码演示了如何通过JavaScript的axios库异步获取HTTP资源，以blob形式处理响应数据，创建一个可供下载的Word文档（客流日报.docx）。它设置特定的请求头，传递日期参数，并监听下载完成以释放内存中的URL对象。

const wordExportTwo = async () => {
  try {
    const response = await axios.get('http://192.168.0.108:8080/Word/Report/Export', {
      responseType: 'blob',
      headers: {
        Accept: 'application/json',
      },
      params: {
        date: choiceYesterdayDate,
      },
    });

    const fileName = '客流日报.docx'; // 替换为实际的文件名
    const blob = new Blob([response.data], {
      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8',
    });
    const url = window.URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);

    // 触发点击事件开始下载
    link.click();

    // 下载完成后释放 URL 对象
    link.addEventListener('click', () => {
      setTimeout(() => {
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
      }, 100);
    }, { once: true });
  } catch (error) {
    console.error('导出失败:', error);
  }
};

标签

#word