gpt4 book ai didi

node.js - 从 Angular 2 中使用 html-pdf 创建的 Node/快速后端接收文件

转载 作者:搜寻专家 更新时间:2023-11-01 00:38:41 25 4
gpt4 key购买 nike

在我的 node/express 应用程序中,我使用 node-html-pdf 创建了一个 pdf 文件:

exports.getTestPdf = async function(req, res) {
// set page format
const options = { format: 'A4' };

// define content
const html = `
<html>
<head>
<meta charset="utf8">
<title>PDF Test</title>
<style>
.page {
position: relative;
height: 90mm;
width: 50mm;
display: block;
page-break-after: auto;
margin: 50px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="page">
Page 1
</div>
<div class="page">
Page 2
</div>
</body>
</html>
`;

// set header
res.set('Content-type', 'application/pdf');

// create and stream file to client
pdf.create(html).toStream(function(err, stream){
stream.pipe(res);
});

// check: the file is created with content when saved server side
// pdf.create(html, options).toFile('./pdf-test.pdf', function(err, res) {
// if (err) return console.log(err);
// console.log(res); // { filename: pathtofile/pdf-test.pdf' }
// });
}

该文件将在 Angular 2 前端接收。

服务:

@Injectable()
export class PdfService {

constructor (private http: Http) {}

getPdf (): any {
return this.http.get('api/test-pdf')
.map(res => res)
.catch(this.handleError);
}
}

Controller :

pdf(){
this.userService.getPdf().subscribe(
response => {
// create hidden dom element (so it works in all browsers)
let a = document.createElement("a");
a.setAttribute('style', 'display:none;');
document.body.appendChild(a);

var blob = new Blob([response._body], { type: 'application/pdf' });
let url = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'MerapiExport.pdf';
a.click();
},
error => this.errorMessage = <any>error
);
}

当我通过按钮激活我的 pdf() 函数时,将下载一个空的 pdf 文件。知道为什么文件是空的并且没有内容吗?

最佳答案

我找到了一个解决方案:您需要从@angular/http 导入 ResponseContentType 并将响应内容类型从 json(标准)更改为数组缓冲区。

编辑后的代码:

后端 Node/ express

exports.getTestPdf = async function(req, res) {
// set page format
const options = { format: 'A4' };

// define content
const html = `
<html>
<head>
<meta charset="utf8">
<title>PDF Test</title>
<style>
.page {
position: relative;
height: 90mm;
width: 50mm;
display: block;
page-break-after: auto;
margin: 50px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="page">
Page 1a
</div>
<div class="page">
Page 2a
</div>
</body>
</html>
`;

// set header
res.set('Content-type', 'application/pdf');

// create and stream file to client
pdf.create(html).toStream(function(err, stream){
stream.pipe(res);
});
}

Angular 2 服务:

 getPdf (): any {
return this.http.get('api/user-pdf', {
responseType: ResponseContentType.ArrayBuffer //magic
})
.map(res => this.downloadFile(res))
.catch(this.handleError);
}

private downloadFile(data){
let blob = new Blob([data._body], { type: 'application/pdf' });
let url = window.URL.createObjectURL(blob);
window.open(url);
}

Angular 2 Controller

pdf(){
console.log('start download')
this.userService.getPdf().subscribe(
response => {
console.log('end download');
},
error => this.errorMessage = <any>error
);
}

关于node.js - 从 Angular 2 中使用 html-pdf 创建的 Node/快速后端接收文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42402669/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com