我有一个连接到 Rails API 后端的 VueJS 前端。
在其中一个端点中,我正在使用邪恶_PDF https://github.com/mileszs/wicked_pdf生成 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
...
我不太确定这是什么数据类型?我最初认为它可能是一个 BLOB,但我不知道。我遵循概述的逻辑here https://blog.jayway.com/2017/07/13/open-pdf-downloaded-api-javascript/解析来自我的rails api的响应,它确实将PDF下载到chrome。打开此 PDF 时,它是空白的,并且 Chrome 浏览器顶部的文件名是奇怪字符的组合。这让我认为我没有以正确的方式转换响应,并且最终发生了一些编码问题。
这是我的 Rails API 代码:
def pdf
pdf_html = ActionController::Base.new.render_to_string(
template: 'api/v1/exporters/pdf',
layout: 'pdf',
page_size: 'A4',
formats: :html,
encoding: 'utf8',
margin: {
top: 20,
left: 20,
}
)
pdf = WickedPdf.new.pdf_from_string(pdf_html)
send_data(
pdf,
filename: 'download.pdf',
type: 'application/pdf',
disposition: 'attachment'
)
end
这是上面链接中的 JS 函数。我将 Rails 响应主体(当控制台记录时,第一个代码块中看起来很奇怪的字符集)作为唯一的参数传递:
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}
}
任何人都可以帮助我指出正确的方向,即如何以正确的方式进行配置或如何以不同/更好的方式进行配置?即使确认响应的数据类型也可能对我有帮助。