时间戳

首页 > 解决方案 > 带有 Content-Disposition 的 HTTP 响应不会触发下载

javascript - 带有 Content-Disposition 的 HTTP 响应不会触发下载

问题描述

我使用msw来模拟自动化 FE 测试的后端响应。

我想为用户创建的数据创建一个导出功能。我正在POST向所需路线发出请求，并希望返回带有 .csv 的响应；.pdf；.xls 文件，应自动下载。

我一直在寻找适当的方法来做到这一点，并遇到了Content-Disposition响应标头。

可悲的是，响应没有触发保存对话，也没有开始下载，但我找不到错误。

编辑：经过几次对话和一些独特的情况后，我决定为生成的 Blob-Data 创建一个 ObjectURL，并通过window.open()调用强制下载。

我在处理程序中更改了预期的响应，并在我的 FE 中添加了相应的调用。

handlers.js

rest.post('/mock/things/:thingId/export', async (req, res, ctx) => {
  const docType = req.headers.get('Content-type');
  const startDate = req.url.searchParams.get('startDate');
  const endDate = req.url.searchParams.get('endDate');
  const selected = req.body;

  const resDataString = 'testName,testLastName,\r\nDaniel,Schaller';
  const blob = new Blob([resDataString], { type: docType });
  const buffer = await blob.arrayBuffer();

  return res(
    ctx.status(200),
    ctx.set({
      'content-type': `${docType}`,
      'Content-length': buffer.byteLength.toString(),
    }),
    ctx.body(buffer),
    ctx.delay(),
  );
}),

存储模块.js

async exportThings(ctx, exportData) {
  const {
    docType, startDate, endDate, selected,
  } = exportData;

  const res = await services.exportThingsForStuff(ctx.state.id, docType, startDate, endDate, selected);

  if (res.data !== undefined) {
    const dataBLOB = new Blob([res.data], { type: res.headers['content-type'] });
    window.open(URL.createObjectURL(dataBLOB));
  }
},

让我向您展示工作流程：

一些组件.vue

async submitExport() {
  const exportDataFilters = {
    docType: this.docType,
    startDate: this.startDate,
    endDate: this.endDate,
    selected: this.selected,
  };

  const response = await this.$store.dispatch('exportThings', exportDataFilters);
  console.log(response);
},

存储模块.js

async exportThings(ctx, exportData) {
  const {
    docType, startDate, endDate, selected,
  } = exportData;

  return services.exportThingsForStuff(ctx.state.id, docType, startDate, endDate, selected);
},

服务.js

export const exportThingsForStuff = async (thingsId, docType, startDate, endDate, pl) => axios.post(`/mock/things/${thingsId}/export`, pl, {
  headers: {
    'Content-type': docType,
  },
  params: {
    startDate,
    endDate,
  },

最后是来自 handlers.js 的 MSW Response 函数

rest.post('/mock/things/thingId/export', (req, res, ctx) => {
  // Vars will be in use to mimic filter behavior, as soon as the download problem is solved
  const docType = req.headers.get('Content-type');
  const startDate = req.url.searchParams.get('startDate');
  const endDate = req.url.searchParams.get('endDate');
  const selected = req.body;


  
// Creating a test string and blobbing it.
const resDataString = 'testName,testLastName,\r\nJoe,Moe';
const blob = new Blob([resDataString], { type: 'text/csv' });

return res(
  ctx.status(200),
  ctx.set({
    'Content-Disposition': 'attachment; filename="things_export.csv"',
    'Content-Length': blob.size.toString(),
    'Content-Transfer-Encoding': 'binary',
    'Content-Type': 'text/csv',
  }),
  ctx.body(blob),
  ctx.delay(),
);

}),

我找不到它的问题，因为响应看起来像预期的那样：

Request URL: http://localhost:8080/mock/things/101/export?startDate=&endDate=
Request Method: POST
Status Code: 200 OK (from service worker)
Referrer Policy: strict-origin-when-cross-origin

RESPONSE HEADERS
content-disposition: attachment; filename="things_export.csv"
content-length: 37
content-transfer-encoding: binary
content-type: text/csv
x-powered-by: msw

标签： javascriptaxiosxmlhttprequesthttp-headersmsw

解决方案

据我了解，您正在使用您的 Javascript 应用程序链接的响应，对吗？在这种情况下，浏览器不会打开下载对话框。您应该将用户重定向到链接以触发下载对话框。但是您想使用 POST 方法，而不是填写表单并以编程方式提交，而不是调用axios.post

推荐阅读