Javascript 使用JS使用Rails send_数据响应

我有一个连接到Rails API后端的VueJS前端

在其中一个端点中，我使用生成PDF。当我在浏览器中打开URL本身时，PDF下载很好，并且完全按照预期工作。当我通过Vue发送请求时，API会以一个奇怪的字符串响应，如下所示：

%PDF-1.4
1 0 obj
<<
/Title (��)
/Creator (��wkhtmltopdf 0.12.4)
/Producer (��Qt 4.8.7)
/CreationDate (D:20190222102025+02'00')
>>
endobj
3 0 obj
<<
/Type /ExtGState
/SA true
/SM 0.02
/ca 1.0
/CA 1.0
/AIS false
...

下面是上面链接中的JS函数。我将Rails响应体（当console记录时，它是第一个代码块中的奇怪字符集）作为唯一的参数传递：

showFile(blob){
  var newBlob = new Blob([blob], {type: "application/pdf"})

  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(newBlob);
    return;
  } 

  const data = window.URL.createObjectURL(newBlob);
  var link = document.createElement('a');
  link.href = data;
  link.download="file.pdf";
  link.click();
  setTimeout(function(){
    window.URL.revokeObjectURL(data);
  , 100}
}

有谁能帮我指出正确的方向，告诉我如何以正确的方式进行配置，或者如何以不同/更好的方式进行配置？即使是确认响应的数据类型也可能对我有所帮助。

如果您正在使用API调用，您可以指定客户端以blob形式下载数据

从“axios”导入axios；
axios
.请求({
url:“/api下载pdf的url”，
responseType:'blob'，
})
.then（response=>response.data）
.然后（blob=>{
const data=URL.createObjectURL（blob）；
//…在这里做你的事。。。
.catch（（错误）=>{
//处理错误
});

如果您正在使用发出API请求

fetch（“/api url下载pdf”{
标题：{
接受：'application/pdf'，
},
响应类型：“arraybuffer”
})
。然后（响应=>{
控制台日志（响应）；
if（response.ok）{
返回response.blob（）；
}
})
.然后（blob=>{
const data=URL.createObjectURL（blob）；
//…在这里做你的事。。。
})
.catch（（错误）=>{
//处理错误
});

您是否尝试过使用

window.location.assign（url）

？谢谢@dan klasson我尝试过将数据字符串作为url打开，但结果只是一个空白屏幕不，我是说使用

window.location.assign（url）

使用

url

作为实际的url。您似乎没有传递任何标题数据，所以这不只是打开url并让浏览器执行其余操作的问题吗？url是“窗口”对象的一部分，因此createObjectURL所在的行应该类似于

const data=window.url.createObjectURL（blob）；

Yes correct@AskarHussain然而，由于

窗口的所有属性都是全局可访问的，我们实际上不需要对其加上后缀。示例代码也可以不加后缀地工作。
const data=URL.createObjectURL（blob）；
正在为我抛出以下错误
TypeError:未能对“URL”执行“createObjectURL”：重载解析失败。
我通过将其更改为
const data=URL.createObjectURL（response.data）；
并删除
。然后（blob=>…
部分解决了此问题。
showFile(blob){
  var newBlob = new Blob([blob], {type: "application/pdf"})

  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(newBlob);
    return;
  } 

  const data = window.URL.createObjectURL(newBlob);
  var link = document.createElement('a');
  link.href = data;
  link.download="file.pdf";
  link.click();
  setTimeout(function(){
    window.URL.revokeObjectURL(data);
  , 100}
}