如何使用POST请求在javascript中生成文件？

Question

我有一个REST API（POST方法），该API返回PDF的内容。我使用curl进行了测试，可以在计算机上查看并打开文件：

curl http://localhost:8080/ponyapp/test/generate-pdf -H 'Content-Type: application/json' -d '[{"fieldA":"valueA", "fieldB":"valueB", ...}]' -i -o ~/Desktop/label.pdf

现在我有一个vuejs / js应用程序，需要使用此REST API并能够将文件保存到本地计算机中。我的方法（如果我错了，请纠正我）是：

1. 调用API以获取响应有效载荷
2. 将有效负载放入文件中
3. 使用HTML锚元素将文件下载到本地计算机中

由于某种原因，这不起作用

此响应有效载荷：

％PDF-1.4↵％����↵10obj↵<>↵endobj↵20obj↵<

我尝试过此代码的不同变体：

  axios
    .post(
      this.$store.state.baseUrl + "test/generate-pdf",
      [this.uberShipment],
      {
        headers: {
          Authorization: "Bearer " + this.getToken()
        }
      }
    )
    .then(response => {
      let filename = "label" + new Date().toISOString() + ".pdf";

      let data = new Blob(response.data, { type: 'application/pdf,' });

      let link = document.createElement("a");
      link.setAttribute("href", (window.webkitURL || window.URL).createObjectURL(data));
      link.setAttribute("download", filename);
      link.click();
    })
    .catch(error => {
      ...
    })

哪个失败，并出现以下错误：

错误= TypeError：未能构造'Blob'：提供的值无法转换为序列。在评估（webpack-internal：///../node_modules/cache-loader/dist/cjs.js？！./node_modules/babel-loader/lib/index.js！./node_modules/vuetify-loader/lib/loader.js ？！./ node_modules / cache-loader / dist / cjs.js？！./ node_modules / vue-loader / lib / index.js？！./ src / components / CreateShipmentAndNZPostDomesticLabel.vue？vue＆type = script＆lang = js＆：604： 20）_this

我希望得到关于为什么该方法不起作用的任何建议（无论是在我的方法还是在代码中）

谢谢

Answer 1

您必须将数组传递给Blob构造函数

let data = new Blob([response.data], { type: 'application/pdf,' });

Docs