Javascript 如何在angular 7中下载PDF?
请求: 组件技术Javascript 如何在angular 7中下载PDF?,javascript,java,angular,angular7,Javascript,Java,Angular,Angular7,请求: 组件技术 getRevenueReport() { const revenueReport = { dateFrom: '1/04/2019', dateTo: '23/04/2019', }; this.apiService.getRevenueReport(revenueReport).subscribe( response => { c
getRevenueReport() {
const revenueReport = {
dateFrom: '1/04/2019',
dateTo: '23/04/2019',
};
this.apiService.getRevenueReport(revenueReport).subscribe( response => {
console.log('response: ', response);
const mediaType = 'application/pdf';
const blob = new Blob(response, { type: mediaType });
saveAs(blob, 'revenue.pdf');
}, error => {
console.log('error: ', error);
});
}
service.ts:
getRevenueReport(revenueReport): any {
const options = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Accept: '*/*',
Authorization: 'apiKey 8989jjjhjhgghghg765756',
})
};
return this.http.post(this.BASE_API_URL + '/api/report', revenueReport, options);
}
我正在尝试下载一个PDF。我弄错了
错误:SyntaxError:JSON中位于位置0处的意外标记%
XMLHttpRequest.onLoad上的JSON.parse()
()在
ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
()位于Object.onInvokeTask
()在
ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
()在
Zone.push../node_modules/Zone.js/dist/Zone.js.Zone.runTask
()在
ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask
在invokeTask处[作为调用]()
()在
XMLHttpRequest.globalZoneAwareCallback
()
消息:“JSON中位置0处的意外标记%1”
堆栈:“SyntaxError:JSON中位于位置0的意外标记%↵ 在JSON.parse()处↵ 在XMLHttpRequest.onLoad时
()↵ 在
ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
()↵ 在
Object.onInvokeTask()↵ 在
ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
()↵ 在
Zone.push../node_modules/Zone.js/dist/Zone.js.Zone.runTask
()↵ 在
ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask
[作为调用]()↵ 在
invokeTask()↵ 在
XMLHttpRequest.globalZoneAwareCallback
()"
协议:错误
正文:“%PDF-1.5”↵%����↵30 obj↵<
您需要使用map函数
getRevenueReport(revenueReport): any {
const options = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Accept: '*/*',
Authorization: 'apiKey hjhjhjhu787878hjhjhjhzBa',
})
};
this.http.post(this.BASE_API_URL + '/api/report', revenueReport, options).pipe(
map((res) => {
return new Blob([res.body], { type: res.headers.get('Content-Type') });
})
);
}
重要信息-在请求头中,将响应类型作为“json”添加到“arraybuffer”,否则它将无法工作
fetchPDF(url: string,data): Observable<any> {
this.getCredentials();
const authHeaders = this.createBasicAuthorizationHeader(this.credentials);
return this.http.post(this.getApiUrl(url),data,{headers: authHeaders,'responseType' : 'arraybuffer' as 'json'})
}
exportPDF(){
this.httpRestClient.fetchPDF("download_salary_report", revenueReport ).subscribe(
response => {
var blob = new Blob([response], {type: 'application/pdf'});
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE');
var trident = ua.indexOf('Trident/');
var edge = ua.indexOf('Edge/');
if(msie > 0 || trident > 0 || edge > 0){
window.navigator.msSaveOrOpenBlob(blob,'revenue.pdf');
}
else if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = "revenue.pdf";
document.body.appendChild(link);
link.click();
window.setTimeout(function() {
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
}, 0);
}
else{
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="revenue.pdf";
link.click();
}
},
error=>{
// show your error message here
});
}
只需在url后添加变量。可能需要在请求选项中添加一个
{responseType:'blob'}
。看看这是否有用:我不确定,但我猜您获取的数据是用json解析的(默认情况下)…我认为它在新版本的express中的正常行为…你能看看那个响应对象吗?好的。我正在尝试响应类型我相信你不会从你的subscribe()
中的响应中得到太多,因为你正在发送post
请求(除非你在请求选项中使用{observe:'response'}
).控制台中打印的响应是什么?响应类型:blob不工作
window.open(appConfig.DOMAIN_NAME+"export_report_item_consumption/"+(itemName+ "," +this.datepipe.transform(this.payloadBean.fromDate, 'yyyy-MM-dd')
+ "," +this.datepipe.transform(this.payloadBean.toDate, 'yyyy-MM-dd')+","+this.currentuser.userID).toString(),'_blank' , "");