Web 浏览器在尝试创建 blob 时出现错误类型错误：无法构造“Blob”：提供的值无法转换为序列答案

【问题标题】：web browser complains when trying to create a blob TypeError: Failed to construct 'Blob': The provided value cannot be converted to a sequenceWeb 浏览器在尝试创建 blob 时出现错误类型错误：无法构造“Blob”：提供的值无法转换为序列
【发布时间】：2020-06-13 17:01:06
【问题描述】：

我有一个返回 PDF 内容的 REST API（POST 方法）。我使用 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 并能够将文件保存到本地计算机。我的方法（如果我错了请纠正我）是：

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

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

这是响应负载：

%PDF-1.4↵%��↵1 0 obj↵>↵endobj↵2 0 obj↵

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

  axios
    .post(
      this.$store.state.baseUrl + "test/generate-pdf",
      [this.uberShipment],
      {
        responseType: "blob",
        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 => {
      ...
    })

失败并出现以下错误：

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) _这个

我将不胜感激任何关于为什么这不起作用的建议（无论是在我的方法中还是在代码中）

谢谢

【问题讨论】：

您可以查看these answers。可以避免在js中下载，直接构造链接<a href="path_to_file" download="proposed_file_name">Download</a>，在vue中可以使用:href="url"。我认为即使window.location = <pdf-url-here> 也可以，应该下载
我可能误解了您的评论。该文件不存在。我需要对服务器（代理）进行 REST 调用，该服务器将使用请求有效负载从另一台服务器获取 pdf 内容的内容。不确定我是否解释得当。
这个不需要ajax，只需要链接文件或者设置window.location。另外，请确保在您的后端为 pdf 设置正确的标题
这里是如何设置php headers的例子stackoverflow.com/a/20080402/3226121

标签： javascript vue.js post

【解决方案1】：

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

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

Docs

【讨论】：